extjs--form combo下拉列表框

1、combo下拉列表框：      

 

    xtype:'combo',
          fieldLabel:'选择',
          name:'combo',
          store:new Ext.data.SimpleStore({
           fields:['value','text'],
           data:[
            ['value1','text1'],
            ['value2','text2'],
           ]
          }),
          displayField:'text',
          valueField:'value',
          mode:'local',
          emptyText:'请选择',
          readOnly:false--- 必须要写的，否则不会显示下拉列表框，只会显示一个文本框

 

2、文本框，文本域，日期控件，时间控件，在线编辑器

   var textfield = new Ext.form.TextField({
    fieldLabel:'empty',
    allowBlank:false,
    emptyText:'空',
    maxLength:50,
    minLength:10
   });

设置了非空检测，并限制输入的字符数必须在10-50之间。其中emptyText会在输入为空时显示一个默认的提示信息   

-----------------------------------------------------------------------------------------------------------------------------------------------
   var textarea = new Ext.form.TextArea({
    width:200,
    grow:true,
    preventScrollbars:true,
    fieldLabel:'empty',
    allowBlank:false,
    maxLength:50,
    minLength:10
   });

grow:true  ， 文本域会根据输入的内容自动修改自身的宽度，preventScrollbars:true 是防止出现滚动条，如果内容

超出显示范围，就会自动隐藏
------------------------------------------------------------------------------------------------------------------------------------------------------

   var dateField = new Ext.form.DateField({
    fieldLabel:'日期',
    emptyText:'请选择',
    format:'y-m-d',
    disabledDays:[0,6]
   });

disabledDays的参数值是一个数组，内部包括0至7的整数，它可以禁止用户选择一周内的特定日期   

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

var timeField = new Ext.form.TimeField({
    fieldLabel:'时间',
    emptyText:'请选择',
    minValue:'10:00 AM',
    maxValue:'14:00 Pm',
    increment:30
   });

时间输入控件，将起始时间设置为上午十点，结束时间设置为下午两点，时间间隔为30分钟

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

var htmlEditor = new Ext.form.HtmlEditor({
    fieldLabel:'在线编辑器',
    enableAlignments:true,
    enableColors:true,
    enableFont:true,
    enableFontSize:true,
    enableFormat:true,
    enableLinks:true,
    enableLists:true,
    enableSourceEdit:true
   });

在线编辑器，enable就是启用或禁用某些功能按钮true，false

图下

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

 隐藏域HiddenField

var hiddenfield = new Ext.form.Hidden({
    name:'hiddenId'
   });
   hiddenfield.setValue("some thing");
   var value = hiddenfield.getValue();
   alert(value);

可以通过它的setValue()和getValue()函数对它执行赋值和取值操作，但它不会显示在页面上

---------------------------------------------------------------------------------------------------------------------------------------
   var form = new Ext.form.FormPanel({
   
       title:'form',
       autoHeight:true,
       frame:true,
       items:[textfield,textarea,dateField],
       renderTo:'form'
       
      });