ExtJS4.2学习(八)表格限制输入数据的类型



 如何软件和系统都会对输入的数据类型进行限制。Ext提供了多种数据类型的组件,比如NumberField限制只能输入数字,ComboBox限制只能输入备选项,DateField限制只能选择日期,CheckBox则限制从true和false中选择其一,等等。RAW思考者日记网-束洋洋个人博客

效果:RAW思考者日记网-束洋洋个人博客

QQ截图20131114232030.jpgRAW思考者日记网-束洋洋个人博客

选择列:RAW思考者日记网-束洋洋个人博客

QQ截图20131114232030.jpgRAW思考者日记网-束洋洋个人博客

日期列:RAW思考者日记网-束洋洋个人博客

QQ截图20131114232030.jpgRAW思考者日记网-束洋洋个人博客

判断列:RAW思考者日记网-束洋洋个人博客

QQ截图20131114232030.jpgRAW思考者日记网-束洋洋个人博客

现在我们来修改之前的数据,让数据类型变得更丰富,如下面的代码:RAW思考者日记网-束洋洋个人博客

Ext.onReady(function(){  
    var comboData=[  
                   ['0','新版ext教程'],  
                   ['1','ext在线支持'],  
                   ['2','ext扩展']  
                   ];  
    var columns = [{  
        header:'数字列',  
        dataIndex:'number',  
        editor:new Ext.form.NumberField({  
            allowBlank: false,  
            allowNegative: false,  
            maxValue: 10  
        })  
    },{  
        header:'选择列',  
        dataIndex:'combo',  
        editor:new Ext.form.ComboBox({  
            store: new Ext.data.SimpleStore({  
                fields:['value','text'],  
                data: comboData  
            }),  
            emptyText: '请选择',  
            mode: 'local',  
            triggerAction: 'all',  
            valueField: 'value',  
            displayField: 'text',  
            editable: false  
        }),  
        renderer: function(value){  
            return comboData[value][1];  
        }  
    },{  
        header:'日期列',  
        dataIndex:'date',  
        editor:new Ext.form.DateField({  
            format: 'Y-m-d',  
            minValue: '2007-12-14',  
            disabledDays: [0, 6],  
            disabledDaysText: '只能选择工作日'  
        }),  
        renderer: function(value) {  
            return Ext.Date.format(value, "Y-m-d");  
        }  
    },{  
        header:'判断列',  
        dataIndex:'check',  
        editor:new Ext.form.Checkbox({  
            allowBlank: false  
        }),  
        renderer:function(value) {  
            return value ? '是' : '否';  
        }  
    }];  
    // 放到grid里显示的原始数据  
    var data = [  
        [1.1,1,new Date(),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.ArrayStore({  
        data: data,  
        fields: [  
            {name: 'number'},  
            {name: 'combo'},  
            {name: 'date'},  
            {name: 'check'}  
        ]  
    });  
    store.load();  
  
    var grid = new Ext.grid.GridPanel({  
        autoHeight: true,  
        renderTo: 'grid',  
        store: store,  
        columns: columns,  
        selType: 'cellmodel',  
        plugins: [  
            Ext.create('Ext.grid.plugin.CellEditing', {  
                clicksToEdit: 1  
            })  
        ]  
    });  
});

 RAW思考者日记网-束洋洋个人博客

大家仔细研究一下渲染函数renderer。经常有人会遇到EditorGrid里的ComboBox无法正常显示数据的情况,其实,这是因为少了这个renderer函数。当没写这个函数时,显示的数据是value值,而不是text。毕竟Editor里的编辑器只在实际编辑时起作用,表格与editor质检共享的是数据,显示层都要依靠各自的实现。不够这样做更灵活,不需要两者都使用一样的显示方式。RAW思考者日记网-束洋洋个人博客

 RAW思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridRAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridRAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingRAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格RAW思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldRAW思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件RAW思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorRAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 RAW思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解RAW思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目RAW思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈