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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值