您的位置: 首页  >  IT文章  >  Extjs 几个惯用控件

Extjs 几个惯用控件

分类: IT文章 • 2022-05-06 23:01:58
Extjs 几个常用控件

 

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

相关推荐