当前位置: 代码迷 >> Web前端 >> Ext适用例子
  详细解决方案

Ext适用例子

热度:482   发布时间:2012-11-19 10:18:51.0
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;
	    }

});

?

  • 扩展两个属性trueValuefalseValue,可提供使用者指定选中或取消时提交的值,默认为truefalse
  • 重写字段的onRender方法,在render时,移除用来展示的htmlinput元素的名称,插入一个的同名hidden元素,保存要提交的值,不改变使用方式的前提下,能保证from在提交时,将插入的新元素提交,确保了设置的值会提交到后台。
  • 重写setValuegetValue方法,保证了存取值时数据的同步。
  • 常用的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', ?
  •   相关解决方案