extjs -- 限制输入数据的类型

本文介绍了一个使用ExtJS框架创建可编辑网格的示例,包括数字、下拉选择、日期和判断等列类型的配置及数据展示方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var comboData = [
       ['0','新版ext教程'],
       ['1','ext在线支持'],
       ['2','ext扩展']
      ];
      
       var cm = new Ext.grid.ColumnModel([
        {header:'数字列',dataIndex:'number',editor:new Ext.grid.GridEditor(new Ext.form.
        NumberField({
         allowBlank:false,
         allowNegative:false, 不准出现‘-’号
         maxValue:10
        }))
        },
        {header:'选择列',dataIndex:'combo',editor:new Ext.grid.GridEditor(new Ext.form.
        ComboBox({
         store:new Ext.data.SimpleStore({
            fields:['value','text'],
            data:comboData
         }),
         emptyText:'请选择',
         mode:'local',
         triggerAction:'all',
         valueField:'value',
         displayField:'text'
        })),
        renderer:function(value){
         return comboData[value][1];
         }
        },
        {header:'日期列',
         dataIndex:'date',
         editor:new Ext.grid.GridEditor(new Ext.form.DateField({
         format:'Y-m-d',
         minValue:'2007-12-14',
         disabledDays:[0,6],
         disabledDaysText:'只能选择工作日'
        })),
        render:function(value){
         return value.format("Y-m-d");
        }
        },
        {
        header:'判断列',dataIndex:'check',
        editor: new Ext.grid.GridEditor(new Ext.form.Checkbox({
          allowBlank:false
        })),
        renderer:function(value){
         return value?'是':'否';
        }
        },
       ]);
       
       var data = [
       [1.1,1,new Date().format('Y-m-d'),true],
       [2.2,2,new Date(),false],
       [3.3,0,new Date(),true],
       [4.4,1,new Date(),false],
       [5.5,2,new Date(),true]
      ];
    
    var store = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader:new Ext.data.ArrayReader({},[
      {name:'number'},
      {name:'combo'},
      {name:'date'},
      {name:'check'},
     ])
    });
      store.load();
      
       var grid = new Ext.grid.EditorGridPanel({
        renderTo:'grid',
        store:store,
        cm:cm,
        autoHeight:true
       });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值