Extjs4.0.7 Formpanel 中各组件属性详解

1、ComboBox

var store = new Ext.data.SimpleStore({
   fields :['id', 'text'],
   data : [['1','一月'], ['2', '二月'], ['3', '三月'], ['4', '四月'],
     ['5','五月'], ['6', '六月'], ['7', '七月'], ['8', '八月'],
     ['9','九月'], ['10', '十月'], ['11', '十一月'], ['12', '十二月']]
});

var combo = new new Ext.form.ComboBox({
   id :'myCombo',
   name :'name',// name只是改下拉的名称
   hiddenName :'id',// 提交到后台的input的name ，对应下面store里的''id，必须要填
   width :80,
   store :store,// 填充数据
   emptyText :'请选择',
   mode :'local',// 数据模式，local代表本地数据
   readOnly :true,// 是否只读
   value : '',//默认值,要设置为提交给后台的值，不要设置为显示文本,可选
   triggerAction: 'all',// 显示所有下列数据，一定要设置属性triggerAction为all
   allowBlank :false,// 不允许为空
   valueField :'value',// 值,可选
   displayField: 'text',// 显示文本 ，对应下面store里的'text'，
   editable :false,// 是否允许输入
   forceSelection: true,// 必须选择一个选项
   blankText :'请选择'// 该项如果没有选择，则提示错误信息,
  listeners : {
     afterRender : function(combo) {
        var firstValue = store.reader.jsonData[0].text;
        combo.setValue(firstValue);//同时下拉框会将与name为firstValue值对应的text显示
     }
   }

});
combo.on('load',function(){Ext.getCmp("myCombo").setValue(1);});

//combobox里的id一定要设置，并且不能和hiddenname的值相同，然后通过Ext.getCmp(id值).setValue(value)即可达到html里的select效果，注意这里的value表示的是store里的第几项！

其他说明：

 

[javascript]  view plain copy

 

1. /*  
2. Ext.form.ComboBox配置表:  
3. allQuery              String            发往服务器查询全部信息的查询字符串(默认'')  
4. displayField          String            被显示在下拉框中字段名  
5. editable              Boolean           设置下拉框是否可以编辑(默认true)  
6. forceSelection        Boolean           true输入值必须在列表中存在，false用户可输入任何值  
7. handleHeight          Number            下拉列表中拖动手柄高(默认8,只在resizable配置为true生效)  
8. hiddenName            String            隐藏字段名，创建一隐藏字段，存储所选值  
9. lazyInit              Boolean           下拉框得到焦点才初始化下拉列表(默认true)  
10. lazyRender            Boolean           延时渲染(默认false)  
11. listAlign             String            列表对齐方式  
12. listClass             String            应用于下拉列表元素的样式  
13. listWidth             Number            下拉列表宽度  
14. loadingText           String            当下拉框加载时显示提示信息(只有mode='remote'才生效)  
15. maxHeight             Number            下拉框最大高度(默认300)  
16. minChars              Number            下拉列表框自动选择用户要输入的最小字符数  
17.                                          mode='remote'默认4  
18.                                          mode='local'默认0  
19.                                          editable=false使其自动失效  
20. minListWidth          Number             设置下拉列表最小宽度,listWidth宽度大于最小宽度，该项被忽略  
21. mode                  String             设置下拉框数据读取模式  
22.                                          local:读取本地数据  
23.                                          remote:读取远程数据  
24. pageSize              Number             设置下拉列表分页大小(只在mode='remote'生效)  
25. queryDelay            Number             设置从键入字符结束到发送查询请求的延时  
26.                                          mode="remote"默认500  
27.                                          mode="local"默认10  
28. queryParam            String             查询的名字,默认'query'，被传递查询字符串中  
29. selectOnFocus         Boolean            当获得焦点立刻选择一存在列表项(默认false),只在editable=true生效  
30. store                 Ext.data.Store     列表框绑定数据源(默认undefined)  
31. title                 String             列表框头  
32. transform             Mixed              将页面以存在元素转换组合框  
33. triggerAction         String             设置单击触发按钮执行默认操作，值'all'执行allQuery中查询，'query'  
34. typeAhead             Boolean            设置输入中是否自动匹配剩余文本(默认false)  
35. typeAheadDelay        Number             设置输入中自动匹配剩余文本延时时间(默认250)  
36. value                 String             初始化组合框中值  
37. valueField            String             下拉框值自段  
38. valueNotFoundText     String             值不存在时错误信息提示  
39. */    
40.     
41. Ext.onReady(function(){    
42.     Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';    
43.         
44.     var config = {    
45.         fields:['province','post'],    
46.         data:[['北京','10000'],['通县','101100'],['昌平','102200'],['大兴','102600'],    
47.              ['密云','101500'],['延庆','102100'],['顺义','101300'],['怀柔','101400']]    
48.     }    
49.         
50.     //定义组合框中显示的数据源    
51.     var store = new Ext.data.SimpleStore(config);    
52.         
53.     config = {    
54.         title:'Ext.form.ComboBox示例',    
55.         labelSeparator:':',    
56.         labelWidth:80,    
57.         bodyStyle:'padding:5 5 5 5',    
58.         frame:true,    
59.         height:100,    
60.         width:300,    
61.         renderTo:'form',    
62.         items:[    
63.             new Ext.form.ComboBox({    
64.                 id:'post',    
65.                 fieldLabel:'邮政编码',    
66.                 triggerAction:'all',            //单击触发按钮显示全部数据    
67.                 //设置数据源    
68.                 store:store,    
69.                 displayField:'province',        //定义要显示的字段    
70.                 valueField:'post',              //定义值字段    
71.                 mode:'local',                   //本地模式    
72.                 forceSelection:true,           //要求输入的值必须在列表中存在    
73.                 resizable:true,                //允许改变下拉列表大小    
74.                 typeAhead:true,                //允许自动选择剩余部分文本    
75.                 value:'101100',                //默认选择的项    
76.                 handelHeight:10                //下拉列表中拖动手柄的高度    
77.             })    
78.         ]    
79.     }    
80.         
81.     var form = new Ext.form.FormPanel(config);    
82. });    

 

2、Window

一、属性 
plain：布尔类型，true表示强制与背景色保持协调，默认值为false。 
resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。 
maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。 
maximized：布尔类型，true表示显示窗体时将窗体最大化，默认值为false。 
closable：布尔类型，true表示显示关闭按钮，默认值为true。 
bodyStyle：与边框的间距，如：bodyStyle:"padding:3px"。 
buttonAlign：窗体中button的对齐方式(left、center、right)，默认值为right。 
closeAction："close"释放窗体所占内存，"hide"隐藏窗体，建议使用"hide"。

二、方法 
show：打开窗体。 
hide：隐藏窗体。 
close：关闭窗体。

三、事件 
show：打开窗体时触法。 
hide：隐藏窗体时触法。 
close：关闭窗体时触法。

 

 

 

3、NumberField

[javascript]  view plain copy

 

1. new Ext.form.NumberField({    
2.     fieldLabel:'整数',    
3.     allowDecimals:false,               //不允许输入小数    
4.     nanText:'请输入有效整数',           //无效数字提示    
5.     allowNegative:false                //不允许输入负数    
6. }),    
7. new Ext.form.NumberField({    
8.     fieldLabel:'小数',    
9.     decimalPrecision:2,                 //精确到小数点后2位(执行4舍5入)    
10.     allowDecimals:true,                //允许输入小数    
11.     nanText:'请输入有效小数',    
12.     allowNegative:false    
13. }),    
14. new Ext.form.NumberField({    
15.     fieldLabel:'数字限制',    
16.     nanText:'请输入有效数字',    
17.     baseChars:'12345'                   //输入数字范围    
18. }),    
19. new Ext.form.NumberField({    
20.     fieldLabel:'数字限制',    
21.     maxValue:100,                       //最大值    
22.     maxText:'值太大',    
23.     minValue:50,                        //最小值    
24.     minText:'值太小'    
25. })   

[javascript]  view plain copy

 

1. 隐藏上下递增箭头、键盘导航、鼠标滚轮    
2. var numberFiled = new Ext.form.NumberField({    
3.         width: 200,    
4.         name: 'numberField',    
5.         value: 90,    
6.         hideTrigger: true,      
7.         keyNavEnabled: true,    
8.         mouseWheelEnabled: true,    
9.         step:5,           //设置步进  
10.     listeners: {    //处理change事件  
11.         change: function(field, value) {    
12.             value = parseInt(value, 10);    
13.             field.setValue(value + value % 2);    
14.         }    
15.     },    
16.         renderTo: 'div1'    
17.     });    

4、Radio 、 Checkbox

 

[javascript]  view plain copy

 

1. new Ext.form.Radio({    
2.     name:'sex',                  //名字相同的单选框做为一组    
3.     fieldLabel:'性别',    
4.     boxLabel:'男'    
5. }),    
6. new Ext.form.Radio({    
7.     name:'sex',    
8.     fieldLabel:'性别',    
9.     boxLabel:'女'    
10. }),    
11. new Ext.form.Checkbox({    
12.     name:'swim',    
13.     fieldLabel:'爱好',    
14.     boxLabel:'游泳'    
15. }),    
16. new Ext.form.Checkbox({    
17.     name:'walk',    
18.     fieldLabel:'爱好',    
19.     boxLabel:'散步'    
20. })    

 

5、触发字段 TriggerField

 

[javascript]  view plain copy

 

1. //触发字段    
2. new Ext.form.TriggerField({    
3.     id:'memo',                                //id    
4.     fieldLabel:'触发字段',    
5.     hideTrigger:false,                       //显示触发按钮    
6.     //单击触发按钮后事件处理    
7.     onTriggerClick:function(e)    
8.     {    
9.         var memo = form.findById('memo');    //取得输入控件    
10.             
11.         var config = {    
12.             title:'触发字段值:',    
13.             msg:memo.getValue(),             //取得控件值    
14.             width:200    
15.         }    
16.             
17.         Ext.Msg.show(config);    
18.     }    
19. })    

 

6、DateField

[javascript]  view plain copy

 

1. /*  
2. Ext.form.DateField主要配置表:  
3. altFormats              String              多个日期输入格式组成字符串，不同格式用|隔开  
4. disabledDates           Array               禁止选择日期组成数组  
5. disabledDatesText       String              禁止选择日期错误提示  
6. disabledDays            Array               禁止星期组成数组  
7. disabledDaysText        String              禁止星期错误提示  
8. format                  String              日期格式(默认'm/d/y')  
9. maxValue                Date/String         允许选择最大日期  
10. maxText                 String              最大日期错误信息提示  
11. minValue                Date/String         允许选择最小日期  
12. minText                 String              最小日期错误信息提示  
13.   
14. ["09/16/2003","03/08/2003"]           禁止选09/16/2003和03/08/2003  
15. ["03/08","09/16"]                     禁止选每年03/08和09/16  
16. ["^03/08"]                            匹配日期开始部分，禁止选每年03/08  
17. ["03/../2006"]                        禁止选2006年3月的任何一天  
18. ["^03"]                               禁止选任何3月的任何一天  
19. */    
20.   
21.             new Ext.form.DateField({    
22.                 id:'date',    
23.                 format:'Y年m月d日',    
24.                 maxValue:'12/31/2008',    
25.                 maxText:'所选日期小于{0}',    
26.                 minValue:'01/01/2008',    
27.                 disabledDates:["2008年03月12日"],             //禁止选择2008年03月12日    
28.                 width:150,    
29.                 fieldLabel:'日期选择'    

 

7、TimeField

[javascript]  view plain copy

 

1. /*  
2. Ext.form.TimeField主要配置表:  
3. altFormats         String           多个时间格式组成的字符串  
4. format             String           显示格式(默认'g:i:A')  
5. maxValue           Date/String      列表中允许的最大时间  
6. maxText            String           最大时间错误提示信息  
7. minValue           Date/String      列表中允许的最小时间  
8. minText            String           最小时间错误提示信息  
9. increment          Number           时间列表中相邻项间时间间隔(默认15分钟)  
10. */    
11.             new Ext.form.TimeField({    
12.                 id:'time',    
13.                 width:150,    
14.                 maxValue:'18:00',                      //最大时间    
15.                 maxText:'所选时间小于{0}',    
16.                 minValue:'10:00',                      //最小时间    
17.                 minText:'所选时间大于{0}',    
18.                 maxHeight:70,    
19.                 increment:60,                          //时间间隔    
20.                 format:'G时i分s秒',                    //时间格式    
21.                 invalidText:'时间格式无效',    
22.                 fieldLabel:'时间选择框'    
23.             })    

8、多行文本 TextArea

 

[javascript]  view plain copy

 

1. /*  
2. Ext.form.TextArea独有配置表:  
3. preventScrollbars           Boolean           文本溢出是否显示滚动条，true隐藏滚动条(默认false)  
4. */    
5.   
6.             new Ext.form.TextArea({    
7.                 id:'memo',    
8.                 widht:150,    
9.                 fieldLabel:'备注'    
10.             })    
11.   
12.     //保存时事件处理    
13.     function showValue()    
14.     {    
15.         var memo = form.findById('memo');       //取得输入框控件    
16.             
17.         var config = {    
18.             title:'TextArea值是:',    
19.             msg:memo.getValue(),                //取得控件值    
20.             width:200    
21.         }    
22.             
23.         Ext.Msg.show(config);    
24.     }    

 

 

9、其他

 

 

[javascript]  view plain copy

 

1. 1. 重要按钮配置项 handler:  renderTo:     
   2.     
   3. 取得控件及其值    
   4. var memo = form.findById('memo');//取得输入控件    
   5. alert(memo.getValue());//取得控件值    
   6.     
   7. NumberField控件    
   8. 整数，小数，数字限制，值范围限制    
   9.     
   10.             new Ext.form.NumberField({    
   11.                 fieldLabel:'整数',    
   12.                 allowDecimals : false,//不允许输入小数    
   13.                 allowNegative : false,//不允许输入负数    
   14.                 nanText :'请输入有效的整数',//无效数字提示    
   15.             }),    
   16.             new Ext.form.NumberField({    
   17.                 fieldLabel:'小数',    
   18.                 decimalPrecision : 2,//精确到小数点后两位    
   19.                 allowDecimals : true,//允许输入小数    
   20.                 nanText :'请输入有效的小数',//无效数字提示    
   21.                 allowNegative :false//允许输入负数    
   22.             }),    
   23.             new Ext.form.NumberField({    
   24.                 fieldLabel:'数字限制',    
   25.                 baseChars :'12345'//输入数字范围    
   26.             }),    
   27.             new Ext.form.NumberField({    
   28.                 fieldLabel:'数值限制',    
   29.                 maxValue : 100,//最大值    
   30.                 minValue : 50//最小值    
   31.             })    
   32.     
   33. TextArea 控件    
   34.     
   35. Radio或Checkbox用法  box类    
   36.     
   37.             new Ext.form.Radio({    
   38.                 name : 'sex',//名字相同的单选框会作为一组    
   39.                 fieldLabel:'性别',    
   40.                 boxLabel : '男'    
   41.             }),    
   42.             new Ext.form.Radio({    
   43.                 name : 'sex',//名字相同的单选框会作为一组    
   44.                 fieldLabel:'性别',    
   45.                 boxLabel : '女'    
   46.             }),    
   47.     
   48.                      在一排    
   49.             new Ext.form.Radio({    
   50.                 name : 'sex',//名字相同的单选框会作为一组    
   51.                 itemCls:'float-left',//向左浮动    
   52.                 clearCls:'allow-float',//允许浮动    
   53.                 fieldLabel:'性别',    
   54.                 boxLabel : '男'    
   55.             }),    
   56.             new Ext.form.Radio({    
   57.                 name : 'sex',//名字相同的单选框会作为一组    
   58.                 clearCls:'stop-float',//阻止浮动    
   59.                 hideLabel:true, //横排后隐藏标签    
   60.                 boxLabel : '女'    
   61.             }),    
   62.     
   63.             new Ext.form.Checkbox({    
   64.                 name : 'swim',    
   65.                 fieldLabel:'爱好',    
   66.                 boxLabel : '游泳'    
   67.             }),    
   68.                     在一排    
   69.             new Ext.form.Checkbox({    
   70.                 name : 'swim',    
   71.                 itemCls:'float-left',//向左浮动    
   72.                 clearCls:'allow-float',//允许浮动    
   73.                 fieldLabel:'爱好',    
   74.                 boxLabel : '游泳'    
   75.             }),    
   76.             new Ext.form.Checkbox({    
   77.                 name : 'walk',    
   78.                 clearCls:'stop-float',//允许浮动    
   79.                 hideLabel:true, //横排后隐藏标签    
   80.                 boxLabel : '散步'    
   81.             })    
   82.     
   83.     
   84.     
   85. TriggerField （很像一个默认combobox）    
   86.             new Ext.form.TriggerField({    
   87.                 id:'memo',    
   88.                 fieldLabel:'触发字段',    
   89.                 hideTrigger : false,    
   90.                 onTriggerClick : function(e){    
   91.     
   92.                 }    
   93.             })    
   94.                 
   95. combobox下拉菜单控件    
   96.    1.本地模式    
   97.        
   98.         本地数据源：    
   99.         数据源的定义：    
   100.         var store = new Ext.data.SimpleStore({//定义组合框中显示的数据源    
   101.             fields: ['province', 'post'],    
   102.             data : [['北京','100000'],['通县','101100'],['昌平','102200'],    
   103.                     ['大兴','102600'],['密云','101500'],['延庆','102100'],    
   104.                     ['顺义','101300'],['怀柔','101400']]    
   105.         });    
   106.             
   107.             new Ext.form.ComboBox({    
   108.                 id:'post',    
   109.                 fieldLabel:'邮政编码',    
   110.                 triggerAction: 'all',//单击触发按钮显示全部数据    
   111.                 store : store,//设置数据源    
   112.                 displayField:'province',//定义要显示的字段    
   113.                 valueField:'post',//定义值字段    
   114.                 mode: 'local',//本地模式    
   115.                 forceSelection : true,//要求输入值必须在列表中存在    
   116.                 resizable : true,//允许改变下拉列表的大小    
   117.                 typeAhead : true,//允许自动选择匹配的剩余部分文本    
   118.                 value:'102600',//默认选择大兴    
   119.                 handleHeight : 10//下拉列表中拖动手柄的高度    
   120.             })    
   121.    2.远程模式    
   122.                远程数据源    
   123.             var store = new Ext.data.SimpleStore({    
   124.             proxy : new Ext.data.HttpProxy({//读取远程数据的代理    
   125.                 url : 'bookSearchServer.jsp'//远程地址    
   126.             }),    
   127.             fields : ['bookName']    
   128.         });    
   129.     
   130.             new Ext.form.ComboBox({    
   131.                 id:'book',    
   132.                 allQuery:'allbook',//查询全部信息的查询字符串    
   133.                 loadingText : '正在加载书籍信息',//加载数据时显示的提示信息    
   134.                 minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量    
   135.                 queryDelay : 300,//查询延迟时间    
   136.                 queryParam : 'searchbook',//查询的名字    
   137.                 fieldLabel:'书籍列表',    
   138.                 triggerAction: 'all',//单击触发按钮显示全部数据    
   139.                 store : store,//设置数据源    
   140.                 displayField:'bookName',//定义要显示的字段    
   141.                 mode: 'remote'//远程模式,    
   142.             })    
   143.              远程json数据源    
   144.         var store = new Ext.data.JsonStore({    
   145.             url : 'bookSearchServerPage.jsp',//远程地址    
   146.             totalProperty : 'totalNum',    
   147.             root : 'books',    
   148.             fields : ['bookName']    
   149.         });    
   150.     
   151. 分页式组合框    
   152.             new Ext.form.ComboBox({    
   153.                 id:'book',    
   154.                 fieldLabel:'书籍列表',    
   155.                 store : store,//设置数据源    
   156.                 allQuery:'allbook',//查询全部信息的查询字符串    
   157.                 triggerAction: 'all',//单击触发按钮显示全部数据    
   158.                 listWidth : 230,//指定列表宽度    
   159.                 editable : false,//禁止编辑    
   160.                 loadingText : '正在加载书籍信息',//加载数据时显示的提示信息    
   161.                 displayField:'bookName',//定义要显示的字段    
   162.                 mode: 'remote',//远程模式    
   163.                 pageSize : 3//分页大小    
   164.             })    
   165.     
   166.     
   167. 转select 为 combobox     
   168.             new Ext.form.ComboBox({    
   169.                 name:'level',    
   170.                 fieldLabel:'职称等级',    
   171.                 lazyRender : true,    
   172.                 triggerAction: 'all',//单击触发按钮显示全部数据    
   173.                 transform : 'levelName'    
   174.             })    
   175.     <SELECT ID="levelName">    
   176.         <OPTION VALUE="1">高级工程师</OPTION>    
   177.         <OPTION VALUE="2">中级工程师</OPTION>    
   178.         <OPTION VALUE="3" SELECTED>初级工程师</OPTION>    
   179.         <OPTION VALUE="4">高级经济师</OPTION>    
   180.         <OPTION VALUE="5">中级经济师</OPTION>    
   181.         <OPTION VALUE="6">初级经济师</OPTION>    
   182.     </SELECT>    
   183.     
   184.     
   185. TimeField 控件    
   186.             new Ext.form.TimeField({    
   187.                 id:'time',    
   188.                 width : 150,    
   189.                 maxValue : '18:00',//最大时间    
   190.                 maxText : '所选时间应小于{0}',//大于最大时间的提示信息    
   191.                 minValue : '10:00',//最小时间    
   192.                 minText : '所选时间应大于{0}',//小于最小时间的提示信息    
   193.                 maxHeight : 70,//下拉列表的最大高度    
   194.                 increment : 60,//时间间隔为60分钟    
   195.                 format : 'G时i分s秒',//G标示为24时计时法    
   196.                 invalidText :'时间格式无效',    
   197.                 fieldLabel:'时间选择框'    
   198.             })    
   199.     
   200.     
   201. DateField 控件    
   202.             new Ext.form.DateField({    
   203.                 id:'date',    
   204.                 format:'Y年m月d日',//显示日期的格式    
   205.                 maxValue :'12/31/2008',//允许选择的最大日期    
   206.                 minValue :'01/01/2008',//允许选择的最小日期    
   207.                 disabledDates : ["2008年03月12日"],//禁止选择2008年03月12日    
   208.                 disabledDatesText :'禁止选择该日期',    
   209.                 disabledDays : [0,6],//禁止选择星期日和星期六    
   210.                 disabledDaysText : '禁止选择该日期',    
   211.                 width : 150,    
   212.                 fieldLabel:'日期选择框'    
   213.             })    
   214.     
   215. Hidden 控件    
   216.     
   217.             new Ext.form.Hidden({//隐藏域    
   218.                 name:'age',    
   219.                 width : 150,    
   220.                 fieldLabel:'年龄'    
   221.             }),    
   222.     
   223.     
   224. FieldSet控件相当于groupBox    
   225.             new Ext.form.FieldSet({    
   226.                 title:'产品信息',    
   227.                 labelSeparator :'：',//分隔符    
   228.                 items:[    
   229.                     new Ext.form.TextField({    
   230.                         fieldLabel:'产地'    
   231.                     }),    
   232.                     new Ext.form.NumberField({    
   233.                         fieldLabel:'售价'    
   234.                     })    
   235.                 ]    
   236.             }),    
   237.     
   238. TextField控件    
   239. vtype 输入格式属性应用    
   240.                 new Ext.form.TextField({    
   241.                     fieldLabel:'电子邮件',    
   242.                     width : 170,    
   243.                     vtype:'email'    
   244.                 }),    
   245.                 new Ext.form.TextField({    
   246.                     fieldLabel:'网址',    
   247.                     width : 170,    
   248.                     vtype:'url'    
   249.                 }),    
   250.                 new Ext.form.TextField({    
   251.                     fieldLabel:'字母',    
   252.                     width : 170,    
   253.                     vtype:'alpha'    
   254.                 }),    
   255.                 new Ext.form.TextField({    
   256.                     fieldLabel:'字母和数字',    
   257.                     width : 170,    
   258.                     vtype:'alphanum'    
   259.                 })    

转载于:https://www.cnblogs.com/OliverChen/p/3329277.html