EXT表单

ETX系列:

EXT基础

EXT表单

EXT表格

EXT事件

EXT窗口

EXT按钮事件



纯表单

[html]  view plain copy
  1. <html>  
  2. <head><title>演示</title>  
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  4. <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />  
  5. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>  
  6. <script type="text/javascript" src="extjs/ext-all.js"></script>  
  7.  <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10. Ext.onReady(function(){  
  11.     var form1 = new Ext.form.FormPanel({  
  12.         title:'综合查询',  
  13.         applyTo:'search_form',  
  14.         frame:false,  
  15.                 items: [{  
  16.         }]  
  17.     });  
  18.   
  19. });  
  20.   
  21. </script>  
  22. </head>  
  23.    
  24. </head>  
  25. <body>  
  26. <div id="hello"></div>  
  27. <div id='search_form'></div>  
  28. </body>  
  29. </html>  

EXT表单_第1张图片

注意:frame:false,和frame:true的差异

 

基本表单

[html]  view plain copy
  1. <html>  
  2. <head><title>演示</title>  
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  4. <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />  
  5. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>  
  6. <script type="text/javascript" src="extjs/ext-all.js"></script>  
  7.  <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10. Ext.onReady(function(){  
  11.     var form1 = new Ext.form.FormPanel({  
  12.         title:'综合查询',  
  13.         applyTo:'search_form',  
  14.         frame:true,  
  15.                items: [{  
  16.             xtype: 'textfield',  
  17.             fieldLabel: '名称',  
  18.             name: 'title'  
  19.         },{  
  20.             xtype: 'textfield',  
  21.             fieldLabel: '内容',  
  22.             name: 'director'  
  23.         }],  
  24.             buttons:[{  
  25.             text:'开始查询',  
  26.             handler:function(){  
  27.                 doSearch();  
  28.             }  
  29.         }]  
  30.   
  31.     });  
  32.   
  33. var doSearch=function()  
  34. {  
  35. Ext.Msg.alert('提示','操作已经成功');  
  36. }  
  37.   
  38. });  
  39.   
  40. </script>  
  41. </head>  
  42.    
  43. </head>  
  44. <body>  
  45. <div id="hello"></div>  
  46. <div id='search_form'></div>  
  47. </body>  
  48. </html>  

EXT表单_第2张图片 

 

表单跳转:

var doSearch=function() { //Ext.Msg.alert('提示','操作已经成功'); location.href ='d.php'; }

 

表单元素设置ID以及获取

设置id

items: [{ xtype: 'textfield', fieldLabel: '名称', name: 'title', id:'tt' },

获取id:

Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);

完整代码

[html]  view plain copy
  1. <html>  
  2. <head><title>演示</title>  
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  4. <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />  
  5. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>  
  6. <script type="text/javascript" src="extjs/ext-all.js"></script>  
  7.  <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10. Ext.onReady(function(){  
  11.      
  12.     var form1 = new Ext.form.FormPanel({  
  13.         title:'综合查询',  
  14.         applyTo:'search_form',  
  15.         frame:true,  
  16.                items: [{  
  17.             xtype: 'textfield',  
  18.             fieldLabel: '名称',  
  19.             name: 'title',  
  20.                         id:'tt'  
  21.         },  
  22.                 {  
  23.             xtype: 'textfield',  
  24.             fieldLabel: '内容',  
  25.             name: 'director'  
  26.         }],  
  27.             buttons:[{  
  28.             text:'开始查询',  
  29.             handler:function(){  
  30.                 doSearch();  
  31.             }  
  32.         }]  
  33.   
  34.     });  
  35.   
  36. var doSearch=function()  
  37. {  
  38. Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);  
  39. }  
  40.   
  41. });  
  42.   
  43. </script>  
  44. </head>  
  45.    
  46. </head>  
  47. <body>  
  48. <div id="hello"></div>  
  49. <div id='search_form'></div>  
  50. </body>  
  51. </html>  

如果不设置id系统会默认给其id

注释// id:'tt'

比较就明白了

EXT表单_第3张图片

 

获取文本框内容

Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").value);

或者

Ext.get('title').getValue()

EXT表单_第4张图片

 

声明示定义文本框以及获取值

[html]  view plain copy
  1. <html>  
  2. <head><title>演示</title>  
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  4. <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />  
  5. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>  
  6. <script type="text/javascript" src="extjs/ext-all.js"></script>  
  7.  <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10. Ext.onReady(function(){  
  11.     var txtAccount = new Ext.form.TextField({  
  12.         width:120,fieldLabel:'用户名'  
  13.     });  
  14.     var form1 = new Ext.form.FormPanel({  
  15.         title:'综合查询',  
  16.         applyTo:'search_form',  
  17.         frame:true,  
  18.                items: [{  
  19.             xtype: 'textfield',  
  20.             fieldLabel: '名称',  
  21.             name: 'title'  
  22.                           
  23.         },  
  24.                 {columnWidth:.5,layout: 'form',  
  25.         items: [txtAccount]  
  26.         },  
  27.                 {  
  28.             xtype: 'textfield',  
  29.             fieldLabel: '内容',  
  30.             name: 'director'  
  31.         }],  
  32.             buttons:[{  
  33.             text:'开始查询',  
  34.             handler:function(){  
  35.                 doSearch();  
  36.             }  
  37.         }]  
  38.   
  39.     });  
  40.   
  41. var doSearch=function()  
  42. {  
  43. //Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);  
  44. Ext.Msg.alert('提示','操作已经成功'+txtAccount.getValue());  
  45. }  
  46.   
  47. });  
  48.   
  49. </script>  
  50. </head>  
  51.    
  52. </head>  
  53. <body>  
  54. <div id="hello"></div>  
  55. <div id='search_form'></div>  
  56. </body>  
  57. </html>  

EXT表单_第5张图片

 

定义单选框以及获取选中

[html]  view plain copy
  1. <html>  
  2. <head><title>演示</title>  
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  4. <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />  
  5. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>  
  6. <script type="text/javascript" src="extjs/ext-all.js"></script>  
  7.  <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10. Ext.onReady(function(){  
  11.         var txtAccount = new Ext.form.TextField({  
  12.         width:120,fieldLabel:'用户名'  
  13.     });  
  14.        var checkFlag = new Ext.form.Checkbox({boxLabel:'是',fieldLabel:'是否选择',value:1});  
  15.          
  16.     var form1 = new Ext.form.FormPanel({  
  17.         title:'综合查询',  
  18.         applyTo:'search_form',  
  19.         frame:true,  
  20.                items: [{  
  21.             xtype: 'textfield',  
  22.             fieldLabel: '名称',  
  23.             name: 'title'  
  24.                           
  25.         },  
  26.                 {columnWidth:.5,layout: 'form',  
  27.         items: [txtAccount]  
  28.         },  
  29.                 {columnWidth:.5,layout: 'form',  
  30.         items: [checkFlag]  
  31.         },  
  32.                 {  
  33.             xtype: 'textfield',  
  34.             fieldLabel: '内容',  
  35.             name: 'director'  
  36.         }],  
  37.             buttons:[{  
  38.             text:'开始查询',  
  39.             handler:function(){  
  40.                 doSearch();  
  41.             }  
  42.         }]  
  43.   
  44.     });  
  45.   
  46. var doSearch=function()  
  47. {  
  48. //Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);  
  49. //Ext.Msg.alert('提示','操作已经成功'+txtAccount.getValue());  
  50. var rejectFlag =0;  
  51. if(checkFlag.checked==true)  
  52. {  
  53. rejectFlag=1;  
  54. }  
  55. Ext.Msg.alert('提示','操作已经成功'+rejectFlag);  
  56. }  
  57.   
  58. });  
  59.   
  60. </script>  
  61. </head>  
  62.    
  63. </head>  
  64. <body>  
  65. <div id="hello"></div>  
  66. <div id='search_form'></div>  
  67. </body>  
  68. </html>  

EXT表单_第6张图片

 

下拉框绑定以及获取选中值

 

[html]  view plain copy
  1. <html>  
  2. <head><title>演示</title>  
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  4. <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />  
  5. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>  
  6. <script type="text/javascript" src="extjs/ext-all.js"></script>  
  7.  <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10. Ext.onReady(function(){  
  11.         var txtAccount = new Ext.form.TextField({  
  12.         width:120,fieldLabel:'用户名'  
  13.     });  
  14.        var checkFlag = new Ext.form.Checkbox({boxLabel:'是',fieldLabel:'是否选择',value:1});  
  15.   
  16.        var DeptDs = new Ext.data.Store({  
  17.             proxy: new Ext.data.HttpProxy({  
  18.                 method:'post',  
  19.                 url: 'd.php',  
  20.                 params:{test:'load'}  
  21.             }),   
  22.             autoLoad:true,  
  23.             reader:new Ext.data.JsonReader({  
  24.                 root : 'data',id:'dddd',  
  25.                 totalProperty : 'totalCount'  
  26.             }, [{name : 'value'},{name : 'text'}])  
  27.     });  
  28.        var comboDepts = new Ext.form.ComboBox({  
  29.         store:DeptDs,  
  30.         valueField :"value",  
  31.         displayField: "text",id:'value',  
  32.         mode: 'local',allowBlank:true,  
  33.         emptyText:'选择省份.....',width:220,fieldLabel: '省份',  
  34.         blankText:'选择省份',  
  35.         editable: true,anyMatch:true,tabIndex:4,  
  36.         triggerAction: 'all'  
  37.     });  
  38.     var form1 = new Ext.form.FormPanel({  
  39.         title:'综合查询',  
  40.         applyTo:'search_form',  
  41.         frame:true,  
  42.                items: [{  
  43.             xtype: 'textfield',  
  44.             fieldLabel: '名称',  
  45.             name: 'title'  
  46.                           
  47.         },  
  48.                 {columnWidth:.5,layout: 'form',  
  49.         items: [txtAccount]  
  50.         },  
  51.                 {columnWidth:.5,layout: 'form',  
  52.         items: [checkFlag]  
  53.         },  
  54.                 {columnWidth:.5,layout: 'form',  
  55.         items: [comboDepts]  
  56.         },  
  57.                 {  
  58.             xtype: 'textfield',  
  59.             fieldLabel: '内容',  
  60.             name: 'director'  
  61.         }],  
  62.             buttons:[{  
  63.             text:'开始查询',  
  64.             handler:function(){  
  65.                 doSearch();  
  66.             }  
  67.         }]  
  68.   
  69.     });  
  70.   
  71. var doSearch=function()  
  72. {  
  73. //Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);  
  74. //  
  75. //Ext.Msg.alert('提示','操作已经成功'+txtAccount.getValue());  
  76.   
  77. //Ext.Msg.alert('提示','操作已经成功'+Ext.get('title').getValue());  
  78. Ext.Msg.alert('提示','操作已经成功'+comboDepts.getValue());  
  79.   
  80. }  
  81.   
  82. });  
  83.   
  84. </script>  
  85. </head>  
  86.    
  87. </head>  
  88. <body>  
  89. <div id="hello"></div>  
  90. <div id='search_form'></div>  
  91. </body>  
  92. </html>  

d.php返回的数据

{"success":true,"data":[
{"value":"010","text":"北京"},
{"value":"021","text":"上海"}
]}

EXT表单_第7张图片

 

ajax提交表单数据

 

[html]  view plain copy
  1. <html>  
  2. <head><title>演示</title>  
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  4. <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />  
  5. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>  
  6. <script type="text/javascript" src="extjs/ext-all.js"></script>  
  7.  <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10.   
  11. Ext.onReady(function(){  
  12.   
  13.           Ext.QuickTips.init();  
  14.           Ext.form.Field.prototype.msgTarget = 'side';  
  15.   
  16.   
  17.           var simple = new Ext.FormPanel({  
  18.                 labelWidth: 75,  
  19.                 baseCls: 'x-plain',  
  20.                 defaults: {width: 150},  
  21.                 defaultType: 'textfield',  
  22.   
  23.   
  24.                 items: [{  
  25.                         fieldLabel: '帐户',  
  26.                         name: 'name',  
  27.                         allowBlank:false,  
  28.                         blankText:'帐户不能为空'  
  29.                     },{  
  30.                         inputType:'password',  
  31.                         fieldLabel: '密码',  
  32.                         name: 'pwd',  
  33.                         allowBlank:false,  
  34.                         blankText:'密码不能为空'  
  35.                     }  
  36.                 ],  
  37.   
  38.                 buttons: [{  
  39.                     text: '登录系统',  
  40.                     type: 'submit',  
  41.   
  42.                     handler:function(){  
  43.                               if(simple.form.isValid()){  
  44.   
  45.   
  46.                                  //ExtJs Ajax表单提交  
  47.                                  simple.form.doAction('submit',{  
  48.                                      url:'d1.php',  
  49.                                      method:'post',  
  50.                                      params:'',  
  51.   
  52.                                      success:function(result,request){  
  53.                                             //alert(action.result.msg);  
  54.                                                 Ext.Msg.alert('操作成功',request.result.data);//json是什么这里就是什么  
  55.                                      },  
  56.   
  57.                                      failure:function(){  
  58.                                             Ext.Msg.alert('警告', '未知的失败原因!');  
  59.   
  60.                                      }  
  61.                                   });  
  62.                                }  
  63.                     }  
  64.                 }]  
  65.             });  
  66.   
  67.                    win = new Ext.Window({  
  68.                         id:'win',  
  69.                         title:'用户登陆',  
  70.                         layout:'fit',  
  71.                         width:300,  
  72.                         height:150,  
  73.                         plain:true,  
  74.                         bodyStyle:'padding:5px;',  
  75.                         maximizable:false,  
  76.                         closeAction:'close',  
  77.                         closable:false,  
  78.                         collapsible:true,  
  79.                         plain: true,  
  80.                         buttonAlign:'center',  
  81.                         items:simple  
  82.                     });  
  83.                     win.show();  
  84.   
  85.          });  
  86. </script>  
  87. </head>  
  88.    
  89. </head>  
  90. <body>  
  91. <div id="hello"></div>  
  92.   
  93. </body>  
  94. </html>  


验证的d.php页面

[php]  view plain copy
  1. <?php  
  2. $arr = array(  
  3. 'success' => 'true',  
  4. 'data' => '1001111111111111111111111'  
  5. );  
  6. $json_string = json_encode($arr);  
  7. echo $json_string;  
  8. ?>  

 

EXT表单_第8张图片
说明:

必须返回json的格式切要有success,类似这样的:

("{success:true,info:'1001111111111111111111111!'}");

=========================================

//ExtJs 表单提交   
form.getForm().submit({   
    success:function(){   
    },   
    failure:function(){   
    }   
});   
//ExtJs Ajax表单提交   
form.form.doAction('submit', {       
    url : 'user.do?method=login',         
    method : 'post',       
    // 如果有表单以外的其它参数,可以加在这里。我这里暂时为空,也可以将下面这句省略           
    params : '',        
    // 第一个参数是传入该表单,第二个是Ext.form.Action对象用来取得服务器端传过来的json数据           
    success : function(form, action) {        
        Ext.Msg.alert('操作', action.result.data);   //result为json对象        
        this.disabled = false;         
    },           
    failure : function(form, action) {        
        Ext.Msg.alert('警告', '用户名或密码错误!');           
        // 登录失败,将提交按钮重新设为可操作           
        this.disabled = false;         
    }           
});           
  
  
//ExtJs Ajax普通提交   
Ext.Ajax.request({                
     url: 'login.do',    //请求地址        
     //提交参数组           
     params: {           
         form.getForm().getValues()   //取出表单所有值       
     },           
     //成功时回调           
     success: function(response, options) {           
        //获取响应的json字符串           
       var responseArray = Ext.util.JSON.decode(response.responseText);                                                        
        if(responseArray.success==true){           
            Ext.Msg.alert('恭喜','您已成功登录!');               
        } else{           
            Ext.Msg.alert('失败','登录失败,请重新登录');               
        }           
    }           
});      
  
//老grid   
var myData = ${jobs}; //二维数组   
var store = new Ext.data.ArrayStore({   
    fields: [   
       {name: 'group'},   
       {name: 'name'},   
       {name: 'description'},   
       {name: 'jobClass'},   
       {name: 'namegroup'}   
    ]   
});   
store.loadData(myData);   
var grid = new Ext.grid.GridPanel({   
    title:"<fmt:message key='title.listAllJobs'/>",   
    store: store,   
    width:all_width,   
    autoHeight : true,   
    autoExpandColumn : 'namegroup',    
    viewConfig : {   
       forceFit : true    
    },   
    stripeRows: true,   
    columns: [   
        {header: "<fmt:message key='label.job.group'/>", width: 140, sortable: true, dataIndex: 'group'},   
        {header: "<fmt:message key='label.job.name'/>", width: 140, sortable: true, dataIndex: 'name'},   
        {header: "<fmt:message key='label.job.description'/>", width: 180, sortable: true, dataIndex: 'description'},   
        {header: "<fmt:message key='label.job.jobClass'/>", width: 200, sortable: true, dataIndex: 'jobClass'},   
        {id : 'namegroup',header: "<fmt:message key='label.global.actions'/>", dataIndex: 'namegroup', renderer: change}   
    ],   
    bbar: new Ext.PagingToolbar({ afterPageText: '/ {0}',beforePageText: '页',firstText: '第一页'  
        ,prevText: '前一页',nextText: '后一页',lastText: '最后一页',refreshText: '刷新',store: store   
        , pageSize: 20,displayInfo: true, displayMsg: '显示 {0} - {1} 条记录,共 {2} 条', emptyMsg: "没有数据"})   
});   
  
//如果store设置了url属性,可重新指定url的参数:   
store.load({params:{a:1, b:2}});   
  
//如果store的内容只是普通的数组:   
store.loadData([...]);   
  
//如果store没有单独的变量定义,可以用   
comboBox.initialConfig.store   
//或   
Ext.getCmp('comboId').initialConfig.store   
                    
//窗口   
var win;   
  
win = new Ext.Window({//添加/修改菜单弹出窗口   
    id:'winId',   
    title:'',   
    width: '',   
    height:'',   
    layout: 'fit',   
    modal:true,   
    closeAction:'hide',   
    buttonAlign:'center',   
    resizable:false,   
    items: [grid],   
    listeners:{   
        'hide':function(){}   
    }           
});    
Ext.getCmp('winId').show();   
  
listeners:{   
    render:function(){},   
    click:function(a,e){}   
}   
  
//按钮   
var button = new Ext.Button({   
    text:'查询',   
    listeners:{click:function(a,e){   
    }}   
})     
  
//表单   
var form = new Ext.FormPanel({   
    id:'form',   
    width: '',   
    height:42,   
    labelWidth: '',             //标签宽度   
    layout:'column',            //分列   
    style:'padding:4 4 2 4',   
    defaults:{layout:'form'},   //子项默认使用form样式   
    colspan:2,   
    frame:true,   
    submit: function(){   
       this.getEl().dom.action = '${pageContext.request.contextPath}/layout.table?method=addData'; //连接到服务器的url地址   
       this.getEl().dom.method = 'post';   
       this.getEl().dom.submit();   
    },   
    items:[   
    {      
        columnWidth:.17,   
        items: [{   
            xtype:'label',   
            text:'',   
            emptyText:'',   
            allowBlank:false,   
            blankText:'',   
            regex:/^[A-Za-z0-9]+$/,   
            regexText:'',   
            maxLength:20,    
            maxLengthText:''  
        }]   
    },{   
        columnWidth:.04,   
        items: [button]   
    }]   
});    
//form.getForm().isValid()   
  
//表格   
var table = new Ext.Panel({   
    renderTo:'content',   
    layout:'table',   
    width:'',   
    border:false,   
    layoutConfig: {columns:2},      //划分两列   
    bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',   
    defaults: {frame:true},         //填充文本背景颜色   
    items:[form,chart,grid]   
})   
  
//标签页   
var tabs = new Ext.TabPanel({   
    resizeTabs:true, // tab宽度自动调整   
    minTabWidth: 115,   //tab最小宽度值   
    tabWidth:135,       //tab初始宽度   
    enableTabScroll:true,//tab超出范围出现横向滚动条   
    frame:true,   
    activeTab:0,   
    defaults: {bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6'},    
    items:[{   
        id:'tab1_1',   
        title:'',   
        items:[chart1]  //添加table   
    },{   
        id:'tab1_2',   
        title:'',   
        items:[chart1]   
    }]   
});   
  
var tools = [{   
    id:'gear',   
    qtip :'为表单分配权限',   
    handler: function(e, target, panel){   
        //获得grid中所选的表单编号(即id值)   
        sRows = grid.getSelections('id_');   
        if(sRows==null)    
        {   
            Ext.Msg.show({   
                        title:'提示',   
                        msg: '<b>请选择表单后再分配权限!</b>',   
                        buttons: {ok:'确定'},   
                        icon: Ext.MessageBox.INFO,   
                        maxWidth :300,   
                        minWidth :300,   
                        closable:false,   
                        defaultTextHeight :100   
                        });   
            return;   
        }   
    }   
}]   
  
//框架面板   
var border = new Ext.Panel({   
    layout:'border',   
    renderTo:'content',   
    width:'',   
    height:'',   
    items:[{   
        region:'north',   
        xtype:'panel',   
        margins: '4 4 2 4',   
        height:42,   
        bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',   
        items:[form]   
    },{   
        region:'west',   
        id:'west-panel',   
        width: '',   
        style:'padding:2 2 4 4',   
        collapsible: true,   
        defaults:{border:false},   
        layoutConfig:{   
            animate:true  
        },   
        items: [tree]   
    },{   
        region:'center',   
        style:'padding:2 4 4 2',   
        border:false,   
        items:[tabs]   
    }]   
});   
  
//日期控件   
var dateSign_start = new Ext.form.DateField({   
    value:startTime,   
    format:"Y-m",   
    fieldLabel:'开始时间',   
    listeners:{   
        change:function(){   
        }   
    }    
});   
  
//下拉列表   
//静态   
var fields=["name","valtext"];   
var data_branchCompany=[['01','1月'],['02','2月']];   
var store_branchCompany = new Ext.data.SimpleStore({    
    fields:fields,   
    data:data_month   
});   
//动态   
var dsUrl_branchCompany ="${pageContext.request.contextPath}/adapter2Table.table?key=branchCompany&dropdownlist=true";    
var store_branchCompany = new Ext.data.Store({    
    url:dsUrl_branchCompany,   
    autoLoad: true,   
    reader: new Ext.data.JsonReader({},[   
     //设置如何解析   
    {name:'name'},   
    {name:'valtext'}   
    ])   
    ,listeners:{   
        "load":function()   
        {   
        }   
    }   
});   
var comboBox_branchCompany = new Ext.form.ComboBox({   
    id:'comboBox_branchCompanyId',   
    width: 75,    
    selectOnFocus : true,       
    allowBlank:false,   
    readOnly:true,   
    emptyText: '',    
    fieldLabel:'',     
    store:store_branchCompany,   
    triggerAction: "all",  //不加该语句选中某项后   
    mode: "local",   //动态需要    
    displayField: "name",   
    valueField: "valtext",   
    listeners: {   
        "select": function (combo,record,index){    
            //record.get("name");   
         }   
    }              
});    
  
//隐藏div   
type.on("select",function(combo,record,index){   
    if(record.get('valtext') == 0){   
    }   
});   
  
  
//树   
var tree = new Ext.tree.TreePanel({   
    id:'tree',   
    border: false,   
    containerScroll: true,   
    enableDD:false,//设置是否允许拖拽   
    useArrows: false,//是否使用箭头记号,默认为false   
    rootVisible :true,//设置是否显示根节点   
    autoScroll:true,   
    loader: new Ext.tree.TreeLoader({    
        dataUrl: '${pageContext.request.contextPath}/treeQuery.tree?method=queryNode&key=product_order',   
        listeners:{beforeload:function(treeLoader, node) {   
                    this.baseParams.id = node.id;   
        }}   
    }),   
    root: {   
        nodeType: 'async',   
        text: '付费节目',   
        draggable: false,   
        id: '1'  
    },   
    listeners:{   
        click:function(node,ev){   
            id=node.id;   
        }   
    }   
});   
tree.getRootNode().expand();       
  
tree_org.on("append",function(tree,parentNode,node,index)   
{   
    for(var i=0,len=roles.length;i<len;i++)   
    {   
        if(roles[i].编号 == node.id)   
        {   
            node.attributes.checked=true;   
            break;   
        }   
    }   
});   
  
//滑动菜单   
{   
    region:'west',   
    id:'west-panel',   
    title:'West',   
    width: 200,   
    style:'padding:4 2 4 4',   
    collapsible: true,   
    layout:'accordion',   
    defaults:{border:false},   
    layoutConfig:{   
        animate:true  
    },   
    items: [{   
        title:'菜单1',   
        items:[tree]   
    },{   
        title:'菜单2',   
        contentEl:'hw'  
    }]   
}   
  
//表单中控件   
{   
    fieldLabel: '性别',   
    xtype:'radiogroup',   
    items:[{   
            boxLabel:'男',   
            name: 'SEX_',   
            value:"${SEX_}",   
            checked:true,   
            inputValue: 1   
        },{   
            boxLabel:'女',   
            name: 'SEX_',   
            inputValue: 2   
        }]   
},{   
    fieldLabel: 'SHOURU',   
    xtype:'checkboxgroup',   
    items:[{   
            boxLabel:'SHOURU1',   
            name: 'SHOURU',   
            checked:true,   
            inputValue: 1   
        },{   
            boxLabel:'SHOURU2',   
            name: 'SHOURU',   
            inputValue: 2   
        },{   
            boxLabel:'SHOURU3',   
            name: 'SHOURU',   
            inputValue: 3   
        }]   
},{   
    xtype:'field',   
    inputType:'file',   
    name:'SHUISHOU',   
    fieldLabel:'上传'  
},{   
    xtype:'textfield',   
    name:"",   
    hidden:true,   
    hideMode:"display",   
    hideLabel:true,   
    value:""  
},{   
    frame:false,border:false,baseCls:'x-plain',items:[{   
    xtype:'htmleditor',   
    id:'id_htmleditor',   
    width:500,   
    height:350,   
    name:'rulecontent_',   
    fieldLabel:'规则信息'  
}]}   
  
//Ext dom操作   
Ext.getDom('')//返回Js对象   
Ext.getCmp('').getValue();   
Ext.getCmp("org-tree-panel").getChecked("id");//获得树节点   
Ext.getCmp('form').form.findField("name").setValue('1',true);   
Ext.getCmp('form').form.findField('name').getValue().inputValue;//radio选中值   
grid.getSelections('列名');//获得选中   
//checkbox选中值   
var checkbox = Ext.getCmp('form').form.findField('name');   
if(checkbox.items.get(i).checked){   
    checkbox.items.get(i).inputValue;   

你可能感兴趣的:(EXT表单)