一个简单的EXT表单保存，初始化

最新推荐文章于 2023-08-25 10:14:06 发布

sky08050025

最新推荐文章于 2023-08-25 10:14:06 发布

阅读量4.3k

点赞数

分类专栏： EXT 文章标签： ext string autoload function action stylesheet

本文链接：https://blog.csdn.net/sky08050025/article/details/6093579

版权

EXT 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

注：此文需要的一些JSON的转换方法引用之前写的（C#中的EXT相关操作类一文）

下面是一个简单的EXT表单的内容，里面有textbox,combox,time时间控件，textarea四种格式。其中时间格式DateTimeField是一个扩展的控件，可以精确到秒，可以在网上下载其JS和相关文件。

首先在页面引入相关的JS文件，并定义一个DIV。首页代码如下[注意EXT的JS引用的顺序]：

<head runat="server"> <title>EXT_From测试</title> <link rel="stylesheet" type="text/css" href="ext-3.2.0/resources/css/ext-all.css" mce_href="ext-3.2.0/resources/css/ext-all.css" /> <mce:script type="text/javascript" language="javascript" src="ext-3.2.0/adapter/ext/ext-base.js" mce_src="ext-3.2.0/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="ext-3.2.0/ext-all.js" mce_src="ext-3.2.0/ext-all.js"></mce:script> <link rel="stylesheet" type="text/css" href="ext-3.2.0/DateTimeField/Spinner.css" mce_href="ext-3.2.0/DateTimeField/Spinner.css" /> <mce:script type="text/javascript" src="ext-3.2.0/DateTimeField/Spinner.js" mce_src="ext-3.2.0/DateTimeField/Spinner.js"></mce:script> <mce:script type="text/javascript" src="ext-3.2.0/DateTimeField/SpinnerField.js" mce_src="ext-3.2.0/DateTimeField/SpinnerField.js"></mce:script> <mce:script type="text/javascript" src="ext-3.2.0/DateTimeField/DateTimeField.js" mce_src="ext-3.2.0/DateTimeField/DateTimeField.js"></mce:script> <mce:script type="text/javascript" src="Js/form_js.js" mce_src="Js/form_js.js"></mce:script> </head> <body> <div id="Div"> </div> </body> </html>

FORM表单的JS代码如下：

其中JBCombox为下拉菜单，初始store,需要写hiddenName:这个属性，以便在后台能接收到下拉菜单中的VALUE值。

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"); });

页面后台的代码处理,包括两个保存和初始化下拉菜单的方法，最后返回的是JSON格式的字符串。

protected void Page_Load(object sender, EventArgs e) { string action = Request.Params["action"]; string result = ""; if (action == "save") { string xm = Request.Params["xm"]; string jb = Request.Params["jb"]; string sj = Request.Params["sj"]; string nr = Request.Params["nr"]; result = SaveFormData(xm, jb, sj, nr); Response.Write(result); Response.End(); } else if (action == "getjb") { result = GetJb(); Response.Write(result); Response.End(); } } /// <summary> /// 从级别中获得级别列表 /// </summary> /// <returns></returns> public string GetJb() { string result = ""; try { string sql = "select jbid, jbname from jb_test order by jbid"; DataTable dt = dbHelpSql.Query(sql); result = "{" + JsonHelper.GetTableJson(dt) + "}"; } catch (Exception ex) { result = "{" + JsonHelper.GetErrorJson(ex.Message) + "}"; } return result; } /// <summary> /// 保存表单数据 /// </summary> /// <param name="xm"></param> /// <param name="jb"></param> /// <param name="sj"></param> /// <param name="nr"></param> /// <returns></returns> public static string SaveFormData(string xm, string jb, string sj, string nr) { string result = ""; try { string executeSQL = string.Format("insert into form_test(name, jb, sj, nr) values('{0}','{1}',to_date('{2}','yyyy-mm-dd hh24:mi:ss'),'{3}')", xm, jb, sj, nr); dbHelpSql.ExecuteSql(executeSQL); result = "{success:true,msg:'保存成功'}"; } catch (Exception ex) { result = "{success:false,msg:'" + ex.Message + "'}"; } return result; }

页面的效果图如下：

-------------------------------------------------------------------------------------------------------------------

如果想要初始化此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中定义。[下面注释代码为第二种方法]

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'}); });

两种方法从后台获取数据的buildContent的方法代码如下：注意因为textarea里面有换行，需要进行转义 temp = temp.Replace("/r/n", "//n");//转换格式

else if (action == "buildContent") { string name = HttpUtility.UrlDecode(Request.Params["name"]); result = GetFormData(name); Response.Write(result); Response.End(); } } /// <summary> /// 获得表单中数据 /// </summary> /// <param name="name"></param> /// <returns></returns> public string GetFormData(string name) { string result = ""; try { string executeSQL = string.Format("select name as XM,jb as jbid,to_char(sj,'yyyy-mm-dd hh24:mi:ss') as sj,NR from form_test where name='{0}'", name); DataTable dt = dbHelpSql.Query(executeSQL); // result = "{" + JsonHelper.GetTableJson(dt) + "}"; string temp = ""; if (dt != null && dt.Rows.Count > 0) { foreach (DataRow row in dt.Rows) { result += "{"; foreach (DataColumn column in dt.Columns) { temp = row[column].ToString(); temp = temp.Replace("/r/n", "//n");//转换格式 temp = temp.Replace("<BR><BR>", "<BR>"); temp = temp.Replace("/'", "/""); result += column.ColumnName + ":'" + temp + "',"; } result = result.Substring(0, result.Length - 1); result += "},"; } result = result.Substring(0, result.Length - 1); } result = "{data:[" + result + "]}"; } catch (Exception ex) { result = "{" + JsonHelper.GetErrorJson(ex.Message) + "}"; } return result; }

初始化效果图如下：

sky08050025

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的EXT表单保存，初始化

下面是一个简单的EXT表单的内容，里面有textbox,combox,time时间控件，textarea四种格式。其中时间格式DateTimeField是一个扩展的控件，可以精确到秒，可以在网上下载其JS和相关文件。首先在页面引入相关的JS文件，并定义一个DIV。首页代码如下[注意EXT的JS引用的顺序]：EXT_From测试
复制链接

扫一扫