Ext适用例子

Ext实用例子

总结自己的代码 可能以后会用到 记录一下 方便以后查阅

?1：所以显示window 的所需的代码

?

MyExt.Utils.myWindow = Ext.extend(Ext.Window, {? ?? ??shadow:false,??? closeAction:'hide',??? layout:'fit',??? closable:true,??? resizable:false, ??? modal:true,??? constrain:true,??? listeners:{?????hide:function(w){?????? if(w.items){??????? w.items.each(function(f){??????? ?if(f.getXType()=="form"){??????? ?? f.form.reset();??????? ?}???????????});?????? }?????}??? }, ????? initComponent: function(config){ ??? ??Ext.apply(this,config);????MyExt.Utils.myWindow.superclass.initComponent.call(this);?? ??? }?? ?? });

?? 使用例子：

?

var win = new MyExt.Utils.myWindow({ height:600 ,width:650 ,items:[form] })

?

2:jsonStore

?

MyExt.Utils.myJsonStore = Ext.extend(Ext.data.JsonStore, { constructor: function(config){ var cfg = { totalProperty: "totalCount",//总数 root: "items",//grid的数据 autoLoad:false, //是否自动加载 autoDestroy:true, //自动销毁 idProperty: 'id' //一个数据对象的参数名，它包含了一条记录的标识符。 默认为 id }; //把cfg对象的所有属性覆盖到congfig对象里面 //如果congfig对象已经存在cfg的属性 则不覆盖 Ext.applyIf(config,cfg); MyExt.Utils.myJsonStore.superclass.constructor.call(this,config); }});

?

? 使用例子：

?

store = new MyExt.Utils.myJsonStore({ url:"....action", fields:[ {"name":"yyshd","type":"string","mapping":"yyshd"}, {"name":"hm","type":"string","mapping":"hm"}, {"name":"sf","type":"string","mapping":"sf"}, {"name":"ds","type":"string","mapping":"ds"}, {"name":"yysid","type":"int","mapping":"yysid"}, {"name":"qy","type":"int","mapping":"qy"} ] });

?

3:行提示

?

function showGjToolTip(_grid){ var _store = _grid.getStore(); var view = _grid.getView(); _grid.tip = new Ext.ToolTip ({target:view.mainBody,delegate:'.x-grid3-row',trackMouse :true,width:230,autoHide:true, title:"告警信息",dismissDelay:5000, //默认5秒后提示框消失frame:true,renderTo:document.body,bodyStyle:"color:red",//字体颜色//floating:{shadow:false,shim:true,useDisplay:true,constrain:false},listeners:{beforeshow:function updateTipBody(tip){var rowIndex = view.findRowIndex(tip.triggerElement);if(_store.getAt(rowIndex).get("sfgj")==0){return false;tip.destroy(); }else{tip.body.dom.innerHTML=_store.getAt(rowIndex).get("gjxx");}}}})}

?

4:获得一个不带复选框的树的所有子节点的id

?

function getTreeChildIds(node){ var r = []; var f = function(){ r.push(this.id); }; node.cascade(f); return r; }

?

? 调用例子

?

var rootNode = tree.getRootNode(); //获取主节点 var result = getTreeChildIds(rootNode ); alert(result );

?

?

5：对Ext中DateField字段的扩展 （转自： http://gaoliujie.iteye.com/blog/703839?）

? Ext中的DateField字段默认显示格式为'm/d/Y'，不太符合中国的使用习惯，以'-'号隔开，或直接显示'xxxx年x月x日'的格??? 式，并且在同一个软件系统中，通常情况会希望日期的显示格式都相同，不要在每个页面中单独设置显示样式。

另外，由于后台传输到前台的格式一般都是java中的Date类型，直接传输到前台会因为Ext中的时区设置问题造成转换错。

基于以上原因，扩展Ext中的DateField字段类型，代码如下所示：?

?

?

justgin.bap.DateFieldEx = Ext.extend(Ext.form.DateField,{format:"Y-m-d",initComponent: function() {this.hideTrigger = this.readOnly;justgin.bap.DateFieldEx.superclass.initComponent.call(this);},setValue:function(value){var date = this.formatDate2(value);justgin.bap.DateFieldEx.superclass.setValue.call(this, date);},// private ,ext自己有个formatDate方法，因此这里用formatDate2 formatDate2 : function(date){ //CST时间和UTC时差转换 var dateStr=date.toString(); var position=dateStr.indexOf("UTC"); if(position!=-1){ return Ext.util.Format.date(date, this.format); }else{ var vdate=new Date(date); //后台默认为格林尼治时间，该方法会默认把后台时间认为是北京时间，北京时间比格林尼治时间多14小时。 //找出当地时间偏移值的毫秒数 var localOffset=vdate.getTimezoneOffset()*60000; var utcOffset= vdate.getTime() + localOffset; timezone=utcOffset-6*3600000;// var lastDate=new Date(timezone); return Ext.util.Format.date(lastDate, this.format); } }});

?

6：对Ext中CheckBox的扩展 （转自：http://gaoliujie.iteye.com/blog/703833?）

?使用Ext中的Checkbox时，经常需要随form一起提交，但Checkbox设置的默认的提交值为"on"或""，后台代码中需要对字段的提交进行判断后取值，不符合我们通常的使用习惯，即直接将提交的值转换为对应的boolean类型，为此，特进行扩展和封装，以满足通过的使用方式，代码如下：

justgin.bap.CheckboxEx = Ext.extend(Ext.form.Checkbox, {trueValue: true,falseValue: false,hiddenField: {value:''},onRender : function(ct, position){ justgin.bap.CheckboxEx.superclass.onRender.call(this, ct, position); var hidden = this.el.insertSibling({tag:'input', type:'hidden', name: this.name}, 'before', true); hidden.value = this.hiddenField.value; this.hiddenField = hidden; this.el.dom.removeAttribute('name'); this.on('check', this.onCheck); }, setValue : function(v){ var me = this; justgin.bap.CheckboxEx.superclass.setValue.call(this, v); this.hiddenField.value = this.checked?me.trueValue:me.falseValue; }, getValue : function(v){ return this.hiddenField.value; }, onDestroy : function(){ Ext.destroy(this.wrap); justgin.bap.CheckboxEx.superclass.onDestroy.call(this); },onCheck : function(me, checked){ this.hiddenField.value = checked?me.trueValue:me.falseValue; }});

?

1. 扩展两个属性trueValue和falseValue，可提供使用者指定选中或取消时提交的值，默认为true和false。
2. 重写字段的onRender方法，在render时，移除用来展示的html的input元素的名称，插入一个的同名hidden元素，保存要提交的值，不改变使用方式的前提下，能保证from在提交时，将插入的新元素提交，确保了设置的值会提交到后台。
3. 重写setValue和getValue方法，保证了存取值时数据的同步。
4. 常用的Ext创建对象的方式有两种：new justgin.bap.CheckboxEx()和Ext.create({xtype: 'checkbox'})，要想使用户在使用第二种方式时创建一个自己扩展的对象，可以在类的声明后加入一句对象类型的注册语句即可??
5. Ext.reg('checkbox', justgin.bap.CheckboxEx);

   ?

   ?

   ?7:grid 上移 下移

   ?

   Ext.apply(Ext.grid.GridPanel.prototype, { moveUp : function() {var d = this.getStore();var c = this.getColumnModel();var r = this.getSelectionModel().getSelections();var idx;if (r.length == 0) {Ext.Msg.alert('提示', '请选择记录进行操作！');return;}if (r.length == d.getCount())return;if (d.indexOf(r[0]) == 0)return;for (var i = 0; i < r.length; i++) {idx = d.indexOf(r[i]) - 1;d.remove(r[i]);d.insert(idx, r[i]);}this.getSelectionModel().selectRow(idx);this.reconfigure(d, c);},moveDown : function() {var d = this.getStore();var c = this.getColumnModel();var r = this.getSelectionModel().getSelections();var idx;var idx;var len = r.length;if (len == 0) {Ext.Msg.alert('提示', '请选择记录进行操作！');return;}if (len == d.getCount())return;if (d.indexOf(r[len - 1]) == d.getCount() - 1)return;for (var i = 0; i < len; i++) {idx = d.indexOf(r[len - i - 1]) + 1;d.remove(r[len - i - 1]);d.insert(idx, r[len - i - 1]);}this.getSelectionModel().selectRow(idx);this.reconfigure(d, c);}});

   ?

   ?? ?8：自定义事件 ?来自我的ext群：23334375中的中国加油所写

   ?

   <script type="text/javascript">Ext.onReady(function(){ Ext.ExtendPanel= Ext.extend(Ext.Panel,{initComponent:function(){Ext.ExtendPanel.superclass.initComponent.call(this); this.addEvents("click");},onRender: function(ct, position){ Ext.ExtendPanel.superclass.onRender.apply(this, arguments); var c = this.body; c.on("click", this.onClick, this);},onClick:function(e){ this.fireEvent("click", e);} });var ep=new Ext.ExtendPanel({renderTo:'panel',width:500,height:500,html:'点击试试',listeners:{click:function(e){alert("被点击了!"+e.getTarget());}}});}); </script> </head> <body> <div id="panel"></div> </body></html>

   ?

   ?? 9:五步掌握Ext的拖放好文章地址：

   ????? http://blog.csdn.net/zhangxin09/archive/2010/05/03/5551665.aspx

   ??

   ? 10:Ext extend解释好文章?

   ??? ?http://kaizhongfan.blog.163.com/blog/static/108708240201012411257716/?????

   ???? http://damoqiongqiu.iteye.com/blog/370591

   ?

   ??11:用户界面与业务逻辑的解耦(来自：http://nickevin.iteye.com/blog/691340)

   ?? ?UI定义

   ?

   //?Account.ui.js?定义UI ????&nbsp;AccountUi?=?Ext.extend(Ext.form.FormPanel,?{ ??????title:?'Account', ??????labelWidth:?100, ??????labelAlign:?'left', ??????layout:?'form', ??????width:?600, ??????frame:?true, ??????initComponent:?function()?{ ??????????this.items?=?[ ??????????????{ ??????????????????xtype:?'container', ??????????????????autoEl:?'div', ??????????????????layout:?'column', ??????????????????items:?[ ??????????????????????{ ??????????????????????????xtype:?'container', ??????????????????????????autoEl:?'div', ??????????????????????????layout:?'form', ??????????????????????????columnWidth:?0.5, ??????????????????????????items:?[ ??????????????????????????????{ ??????????????????????????????????xtype:?'textfield', ??????????????????????????????????fieldLabel:?'First?Name', ??????????????????????????????????anchor:?'95%', ??????????????????????????????????name:?'fname', ??????????????????????????????????ref:?'../../fname'??????????????????????????????}, ??????????????????????????????{ ??????????????????????????????????xtype:?'datefield', ??????????????????????????????????fieldLabel:?'Birth?of?day', ??????????????????????????????????anchor:?'95%', ??????????????????????????????????name:?'birthday', ??????????????????????????????????ref:?'../../birthday'??????????????????????????????} ??????????????????????????] ??????????????????????}, ??????????????????????{ ??????????????????????????xtype:?'container', ??????????????????????????autoEl:?'div', ??????????????????????????layout:?'form', ??????????????????????????columnWidth:?0.5, ??????????????????????????items:?[ ??????????????????????????????{ ??????????????????????????????????xtype:?'textfield', ??????????????????????????????????fieldLabel:?'Last?Name', ??????????????????????????????????anchor:?'95%', ??????????????????????????????????name:?'lname', ??????????????????????????????????ref:?'../../lname'??????????????????????????????}, ??????????????????????????????{ ??????????????????????????????????xtype:?'combo', ??????????????????????????????????fieldLabel:?'Sex', ??????????????????????????????????anchor:?'95%', ??????????????????????????????????name:?'sex', ??????????????????????????????????ref:?'../../sex'??????????????????????????????} ??????????????????????????] ??????????????????????} ??????????????????] ??????????????}, ??????????????{ ??????????????????xtype:?'htmleditor', ??????????????????anchor:?'98%', ??????????????????fieldLabel:?'Memo', ??????????????????height:?150, ??????????????????width:?300, ??????????????????name:?'memo', ??????????????????ref:?'memo'??????????????} ??????????]; ??????????this.fbar?=?{ ??????????????xtype:?'toolbar', ?