总结自己的代码 可能以后会用到 记录一下 方便以后查阅
?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);??? ??
- ????}??? ??
- ???});??
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] ??
- })??
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); ??
- ????} ??
- });??
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"} ??
- ????????????????????????????????] ??
- ????????????????????});???
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"); ??
- ????????????????????????????} ??
- ????????????????????????} ??
- ????????????????????} ??
- ????}) ??
- }??
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; ??
- ?}??
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?);???
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);? ??
- ????????} ??
- ????} ??
- });??
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; ??
- ????} ??
- ??
- );??
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; } });
?
?
?
?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); ??
- } ??
- );??
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>??
<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 ??
- ??
- 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', ?