注：此文需要的一些JSON的轉換方法引用之前寫的（C#中的EXT相關操作類一文）
下面是一個簡單的EXT表單的內容，裏面有textbox,combox,time時間控件，textarea四種格式。其中時間格式DateTimeField是一個擴展的控件，可以精確到秒，可以在網上下載其JS和相關文件。
首先在頁面引入相關的JS文件，並定義一個DIV。首頁代碼如下[注意EXT的JS引用的順序]：
FORM表單的JS代碼如下：
其中JBCombox爲下拉菜單，初始store,需要寫hiddenName:這個屬性，以便在後臺能接收到下拉菜單中的VALUE值。
<textarea cols="88" rows="15" name="code" class="javascript">Ext.BLANK_IMAGE_URL='ext-3.2.0/resources/images/default/tree/s.gif'; Ext.onReady(function(){ Ext.QuickTips.init(); //級別下拉框 var JBCombox = new Ext.form.ComboBox({ store: new Ext.data.JsonStore({ url: 'form_test.aspx?action=getjb', root: 'data', autoLoad:true, fields: ['JBID', 'JBNAME'] }), displayField : 'JBNAME', valueField : 'JBID', hiddenName:'JBID', typeAhead : true, mode : 'local', fieldLabel: '級別', editable : false, anchor:'99%', width:200, triggerAction : 'all', selectOnFocus : true }); var part1Form = new Ext.FormPanel({ fileUpload: true, labelWidth: 80, buttonAlign:'center', frame:true, title: '簡單的FORM表單', bodyStyle:'padding:5px 5px 0px', width: 500, height:265, id:'mainForm', defaults: {width: 380}, items: [ { xtype:'textfield', width:200, fieldLabel:'姓名', name:'xm', id:'xm' }, JBCombox , { xtype:'datetimefield', format:'H:i', fieldLabel:'時間', name:'sj' }, { xtype:'textarea', fieldLabel:'內容', height:180, name:'nr' } ], buttons: [ { text: '保存', handler: function(){ part1Form.getForm().submit({ url:'form_test.aspx?action=save', success: function(form, action) { Ext.Msg.alert('Success', action.result.msg); form.reset(); }, failure: function(form, action) { var obj = Ext.util.JSON.decode(action.response.responseText); Ext.Msg.alert('提示',obj.data); } }); } }, { text:'重置', handler:function(){part1Form.getForm().reset();} } ] }); part1Form.render("Div"); }); </textarea>
頁面後臺的代碼處理,包括兩個保存和初始化下拉菜單的方法，最後返回的是JSON格式的字符串。
頁面的效果圖如下：
-------------------------------------------------------------------------------------------------------------------
如果想要初始化此FORM表單的話，有兩種方法：
方法1.在FORM表單加載的時候，啓動load方法中的'load'事件，傳遞一個action來獲得FORM表單的值，此時FORM表單讀取數據的方法還是JsonReader.以讀取傳回來的DATATABLE的JSON格式數據。注：此時FORM加載到DIV，可以在FORM定義的外部使用FORM.render()方法，也可以在內部使用renderTo屬性來實現。
方法2.FORM表單的store的初始化在外面，FORM中可以不用定義store:的屬性，在外面定義的store的autoLoad:true,.定義完成之後，給stroe定義一個監聽方法addListener('load',setContent),然後在外面定義setContent方法，在方法裏獲取FORM各個FIELD的ID，然後賦值。注：FROM的各個控件可用Ext.getCmp()方法來獲得，但是下拉菜單直接用在外面定義的菜單的名稱即可，不用定義ID,或name.此方法中FORM加載到DIV必須在FORM的屬性renderTo中定義。[下面註釋代碼爲第二種方法]
<textarea cols="88" rows="15" name="code" class="c-sharp">Ext.onReady(function(){ Ext.QuickTips.init(); //級別下拉框 var JBCombox = new Ext.form.ComboBox({ store: new Ext.data.JsonStore({ url: 'form_test.aspx?action=getjb', root: 'data', autoLoad:true, fields: ['JBID', 'JBNAME'] }), displayField : 'JBNAME', valueField : 'JBID', hiddenName:'JBID', typeAhead : true, mode : 'local', fieldLabel: '級別', editable : false, anchor:'99%', width:200, triggerAction : 'all', selectOnFocus : true }); //--------------初始化賦值方法2 ↓ // function setContent(s,records) // { // try // { // var XM = Ext.getCmp('XM'); // var SJ = Ext.getCmp('SJ'); // var NR = Ext.getCmp('NR'); // XM.setValue(records[0].get('XM')); // SJ.setValue(records[0].get('SJ')); // JBCombox.setValue(records[0].get('JBID')); // NR.setValue(records[0].get('NR')); // } // catch(err) // { // alert(err.description); // } // } // var form_store=new Ext.data.JsonStore({ // url:'form_test.aspx?action=buildContent&name='+encodeURI('張四'), // root:'data', // autoLoad:true, // fields:[ // 'XM','JBID','NR',{name: 'SJ', type:'date', dateFormat:'Y-m-d H:i:s'} // ] // }); // form_store.addListener('load',setContent); //--------------------- 初始化賦值方法2 ↑ var part1Form = new Ext.FormPanel({ fileUpload: true, labelWidth: 80, buttonAlign:'center', frame:true, renderTo:'Div', title: '簡單的FORM表單', bodyStyle:'padding:5px 5px 0px', width: 500, height:280, id:'mainForm', defaults: {width: 380}, reader : new Ext.data.JsonReader({ root:'data', fields: [ 'XM','NR',{name: 'SJ', type:'date', dateFormat:'Y-m-d H:i:s'},'JBID' ] }), items: [ { xtype:'textfield', width:200, fieldLabel:'姓名', name:'XM', id:'XM' }, JBCombox , { xtype:'datetimefield', format:'H:i', value:'', validateOnBlur:false, readOnly:false, format: 'Y-m-d H:i:s' , anchor:'99%', fieldLabel:'時間', name:'SJ', id:'SJ' }, { xtype:'textarea', fieldLabel:'內容', height:180, anchor: "96.7%", name:'NR', id:'NR' } ], buttons: [ { text: '保存', handler: function(){ part1Form.getForm().submit({ url:'form_test.aspx?action=save', success: function(form, action) { Ext.Msg.alert('Success', action.result.msg); form.reset(); }, failure: function(form, action) { var obj = Ext.util.JSON.decode(action.response.responseText); Ext.Msg.alert('提示',obj.data); } }); } }, { text:'重置', handler:function(){part1Form.getForm().reset();} } ] }); //part1Form.render("Div"); part1Form.getForm().load({url:'form_test.aspx?action=buildContent&name='+encodeURI('張四'),waitMsg:'Loading'}); }); </textarea>
兩種方法從後臺獲取數據的buildContent的方法代碼如下：注意因爲textarea裏面有換行，需要進行轉義 temp = temp.Replace("/r/n", "//n");//轉換格式
初始化效果圖如下：
