Ext实用例子

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

 1:所以显示window 的所需的代码

 

Java代码 复制代码
  1. MyExt.Utils.myWindow = Ext.extend(Ext.Window, {     
  2.      shadow:false,   
  3.       closeAction:'hide',   
  4.      layout:'fit',   
  5.      closable:true,   
  6.      resizable:false,    
  7.      modal:true,   
  8.      constrain:true,   
  9.       listeners:{   
  10.        hide:function(w){   
  11.                 if(w.items){   
  12.              w.items.each(function(f){   
  13.                 if(f.getXType()=="form"){   
  14.                         f.form.reset();   
  15.                 }   
  16.                  });   
  17.               }   
  18.        }   
  19.      },    
  20.       initComponent: function(config){    
  21.       Ext.apply(this,config);   
  22.     MyExt.Utils.myWindow.superclass.initComponent.call(this);      
  23.     }      
  24.    });  
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);   
    }   
   });

   使用例子:

 

Java代码 复制代码
  1. var win = new MyExt.Utils.myWindow({   
  2.     height:600  
  3.     ,width:650  
  4.     ,items:[form]   
  5. })  
   		var win = new MyExt.Utils.myWindow({
   			height:600
   			,width:650
   			,items:[form]
   		})

 

2:jsonStore

 

Java代码 复制代码
  1. MyExt.Utils.myJsonStore = Ext.extend(Ext.data.JsonStore, {   
  2.     constructor: function(config){   
  3.         var cfg = {   
  4.               totalProperty: "totalCount",//总数    
  5.               root: "items",//grid的数据   
  6.               autoLoad:false//是否自动加载   
  7.               autoDestroy:true//自动销毁   
  8.               idProperty: 'id' //一个数据对象的参数名,它包含了一条记录的标识符。 默认为 id    
  9.                    
  10.         };   
  11.         //把cfg对象的所有属性覆盖到congfig对象里面   
  12.         //如果congfig对象已经存在cfg的属性 则不覆盖   
  13.         Ext.applyIf(config,cfg);   
  14.         MyExt.Utils.myJsonStore.superclass.constructor.call(this,config);   
  15.     }   
  16. });  
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);
    }
});

 

  使用例子:

 

Java代码 复制代码
  1. store = new MyExt.Utils.myJsonStore({   
  2.                         url:"....action",   
  3.                         fields:[   
  4.                                     {"name":"yyshd","type":"string","mapping":"yyshd"},   
  5.                                     {"name":"hm","type":"string","mapping":"hm"},   
  6.                                     {"name":"sf","type":"string","mapping":"sf"},   
  7.                                     {"name":"ds","type":"string","mapping":"ds"},   
  8.                                     {"name":"yysid","type":"int","mapping":"yysid"},   
  9.                                     {"name":"qy","type":"int","mapping":"qy"}   
  10.                                 ]   
  11.                     });   
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:行提示

 

Java代码 复制代码
  1. function showGjToolTip(_grid){   
  2.                 var _store = _grid.getStore();   
  3.                 var view = _grid.getView();   
  4.                 _grid.tip = new Ext.ToolTip ({   
  5.                     target:view.mainBody,   
  6.                     delegate:'.x-grid3-row',   
  7.                     trackMouse :true,   
  8.                     width:230,   
  9.                     autoHide:true,    
  10.                     title:"告警信息",   
  11.                     dismissDelay:5000,  //默认5秒后提示框消失   
  12.                     frame:true,   
  13.                     renderTo:document.body,   
  14.                     bodyStyle:"color:red",//字体颜色   
  15.                     //floating:{shadow:false,shim:true,useDisplay:true,constrain:false},   
  16.                     listeners:{   
  17.                         beforeshow:function updateTipBody(tip){   
  18.                             var rowIndex = view.findRowIndex(tip.triggerElement);   
  19.                             if(_store.getAt(rowIndex).get("sfgj")==0){   
  20.                                 return false;   
  21.                                 tip.destroy();    
  22.                             }else{   
  23.                                 tip.body.dom.innerHTML=_store.getAt(rowIndex).get("gjxx");   
  24.                             }   
  25.                         }   
  26.                     }   
  27.     })   
  28. }  
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

 

Java代码 复制代码
  1.  function getTreeChildIds(node){   
  2. var r = [];   
  3. var f = function(){   
  4.         r.push(this.id);   
  5. };   
  6. node.cascade(f);   
  7.         return r;   
  8.  }  
            function getTreeChildIds(node){
			        var r = [];
			        var f = function(){
			                r.push(this.id);
			        };
			        node.cascade(f);
              	    return r;
            }

 

  调用例子

 

Java代码 复制代码
  1. var rootNode = tree.getRootNode();   //获取主节点   
  2.              var result = getTreeChildIds(rootNode );   
  3.             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',不太符合中国的使用习惯,以'-'号隔开,或直接显示'xxxxxx'的格    式,并且在同一个软件系统中,通常情况会希望日期的显示格式都相同,不要在每个页面中单独设置显示样式。

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

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

 

 

Java代码 复制代码
  1. justgin.bap.DateFieldEx = Ext.extend(Ext.form.DateField,{   
  2.     format:"Y-m-d",   
  3.        
  4.     initComponent: function() {   
  5.         this.hideTrigger = this.readOnly;   
  6.         justgin.bap.DateFieldEx.superclass.initComponent.call(this);   
  7.     },   
  8.        
  9.     setValue:function(value){   
  10.         var date = this.formatDate2(value);   
  11.         justgin.bap.DateFieldEx.superclass.setValue.call(this, date);   
  12.     },   
  13.        
  14.     // private ,ext自己有个formatDate方法,因此这里用formatDate2   
  15.     formatDate2 : function(date){   
  16.         //CST时间和UTC时差转换   
  17.         var dateStr=date.toString();   
  18.         var position=dateStr.indexOf("UTC");   
  19.         if(position!=-1){   
  20.             return Ext.util.Format.date(date, this.format);   
  21.         }else{   
  22.             var vdate=new Date(date); //后台默认为格林尼治时间,该方法会默认把后台时间认为是北京时间,北京时间比格林尼治时间多14小时。   
  23.             //找出当地时间偏移值的毫秒数   
  24.             var localOffset=vdate.getTimezoneOffset()*60000;    
  25.             var utcOffset= vdate.getTime() + localOffset;   
  26.             timezone=utcOffset-6*3600000;//   
  27.             var lastDate=new Date(timezone);        
  28.             return Ext.util.Format.date(lastDate, this.format);    
  29.         }   
  30.     }   
  31. });  
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类型,为此,特进行扩展和封装,以满足通过的使用方式,代码如下:

Java代码 复制代码
  1. justgin.bap.CheckboxEx = Ext.extend(Ext.form.Checkbox, {   
  2.     trueValue: true,   
  3.     falseValue: false,   
  4.     hiddenField: {value:''},   
  5.        
  6.     onRender : function(ct, position){   
  7.         justgin.bap.CheckboxEx.superclass.onRender.call(this, ct, position);   
  8.         var hidden = this.el.insertSibling({tag:'input', type:'hidden', name: this.name}, 'before'true);   
  9.         hidden.value = this.hiddenField.value;   
  10.         this.hiddenField = hidden;   
  11.         this.el.dom.removeAttribute('name');   
  12.         this.on('check'this.onCheck);   
  13.     },   
  14.        
  15.     setValue : function(v){   
  16.         var me = this;         
  17.         justgin.bap.CheckboxEx.superclass.setValue.call(this, v);   
  18.         this.hiddenField.value = this.checked?me.trueValue:me.falseValue;   
  19.     },   
  20.       
  21.     getValue : function(v){   
  22.         return this.hiddenField.value;   
  23.     },   
  24.       
  25.     onDestroy : function(){   
  26.         Ext.destroy(this.wrap);   
  27.         justgin.bap.CheckboxEx.superclass.onDestroy.call(this);   
  28.     },   
  29.   
  30.     onCheck : function(me, checked){   
  31.         this.hiddenField.value = checked?me.trueValue:me.falseValue;   
  32.     }   
  33.   
  34. );  
	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;
	    }

});

 

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

 

 

 7:grid 上移 下移

 

Java代码 复制代码
  1.         Ext.apply(Ext.grid.GridPanel.prototype, {   
  2.             moveUp : function() {   
  3.     var d = this.getStore();   
  4.     var c = this.getColumnModel();   
  5.     var r = this.getSelectionModel().getSelections();   
  6.     var idx;   
  7.     if (r.length == 0) {   
  8.         Ext.Msg.alert('提示''请选择记录进行操作!');   
  9.         return;   
  10.     }   
  11.     if (r.length == d.getCount())   
  12.         return;   
  13.     if (d.indexOf(r[0]) == 0)   
  14.         return;   
  15.     for (var i = 0; i < r.length; i++) {   
  16.         idx = d.indexOf(r[i]) - 1;   
  17.         d.remove(r[i]);   
  18.         d.insert(idx, r[i]);   
  19.     }   
  20.     this.getSelectionModel().selectRow(idx);   
  21.     this.reconfigure(d, c);   
  22. },   
  23. moveDown : function() {   
  24.     var d = this.getStore();   
  25.     var c = this.getColumnModel();   
  26.     var r = this.getSelectionModel().getSelections();   
  27.     var idx;   
  28.     var idx;   
  29.     var len = r.length;   
  30.     if (len == 0) {   
  31.         Ext.Msg.alert('提示''请选择记录进行操作!');   
  32.         return;   
  33.     }   
  34.     if (len == d.getCount())   
  35.         return;   
  36.     if (d.indexOf(r[len - 1]) == d.getCount() - 1)   
  37.         return;   
  38.     for (var i = 0; i < len; i++) {   
  39.         idx = d.indexOf(r[len - i - 1]) + 1;   
  40.         d.remove(r[len - i - 1]);   
  41.         d.insert(idx, r[len - i - 1]);   
  42.     }   
  43.     this.getSelectionModel().selectRow(idx);   
  44.     this.reconfigure(d, c);   
  45. }   
  46. );  
    		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中的中国加油所写

 

Java代码 复制代码
  1. <script type="text/javascript">   
  2. Ext.onReady(function(){   
  3.   
  4.   Ext.ExtendPanel= Ext.extend(Ext.Panel,{   
  5.     initComponent:function(){   
  6.         Ext.ExtendPanel.superclass.initComponent.call(this);   
  7.          this.addEvents("click");   
  8.     },   
  9.     onRender: function(ct, position){   
  10.           Ext.ExtendPanel.superclass.onRender.apply(this, arguments);   
  11.            var c = this.body;   
  12.           c.on("click"this.onClick, this);   
  13.     },   
  14.     onClick:function(e){   
  15.          this.fireEvent("click", e);   
  16.     }   
  17.    });   
  18.   
  19.     var ep=new Ext.ExtendPanel({   
  20.             renderTo:'panel',   
  21.             width:500,   
  22.             height:500,   
  23.             html:'点击试试',   
  24.             listeners:{   
  25.                 click:function(e){   
  26.                     alert("被点击了!"+e.getTarget());   
  27.                 }   
  28.             }   
  29.     });   
  30. });   
  31.         </script>   
  32.     </head>   
  33.     <body>   
  34.         <div id="panel"></div>   
  35.     </body>   
  36. </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定义

 

Java代码 复制代码
  1. // Account.ui.js 定义UI   
  2.   
  3. &nbsp;AccountUi = Ext.extend(Ext.form.FormPanel, {   
  4.     title: 'Account',   
  5.     labelWidth: 100,   
  6.     labelAlign: 'left',   
  7.     layout: 'form',   
  8.     width: 600,   
  9.     frame: true,   
  10.     initComponent: function() {   
  11.         this.items = [   
  12.             {   
  13.                 xtype: 'container',   
  14.                 autoEl: 'div',   
  15.                 layout: 'column',   
  16.                 items: [   
  17.                     {   
  18.                         xtype: 'container',   
  19.                         autoEl: 'div',   
  20.                         layout: 'form',   
  21.                         columnWidth: 0.5,   
  22.                         items: [   
  23.                             {   
  24.                                 xtype: 'textfield',   
  25.                                 fieldLabel: 'First Name',   
  26.                                 anchor: '95%',   
  27.                                 name: 'fname',   
  28.                                 ref: '../../fname'  
  29.                             },   
  30.                             {   
  31.                                 xtype: 'datefield',   
  32.                                 fieldLabel: 'Birth of day',   
  33.                                 anchor: '95%',   
  34.                                 name: 'birthday',   
  35.                                 ref: '../../birthday'  
  36.                             }   
  37.                         ]   
  38.                     },   
  39.                     {   
  40.                         xtype: 'container',   
  41.                         autoEl: 'div',   
  42.                         layout: 'form',   
  43.                         columnWidth: 0.5,   
  44.                         items: [   
  45.                             {   
  46.                                 xtype: 'textfield',   
  47.                                 fieldLabel: 'Last Name',   
  48.                                 anchor: '95%',   
  49.                                 name: 'lname',   
  50.                                 ref: '../../lname'  
  51.                             },   
  52.                             {   
  53.                                 xtype: 'combo',   
  54.                                 fieldLabel: 'Sex',   
  55.                                 anchor: '95%',   
  56.                                 name: 'sex',   
  57.                                 ref: '../../sex'  
  58.                             }   
  59.                         ]   
  60.                     }   
  61.                 ]   
  62.             },   
  63.             {   
  64.                 xtype: 'htmleditor',   
  65.                 anchor: '98%',   
  66.                 fieldLabel: 'Memo',   
  67.                 height: 150,   
  68.                 width: 300,   
  69.                 name: 'memo',   
  70.                 ref: 'memo'  
  71.             }   
  72.         ];   
  73.         this.fbar = {   
  74.             xtype: 'toolbar',  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值