Ext限制输入的数据类型

数字类型——NumberField

{

    header : '年龄',

    dataIndex : 'age',

    width : 100,

    sortable : true,

    editor:new Ext.Editor(new Ext.form.NumberField({

        allowBlank:false,//不能为空

        allowNegative:false,//不能输入负号

        minValue:1,//可输入的最小值

        maxValue:150 //可输入的最大值

    }))

}

效果：

可以看到，编辑器我配置的是最大输入150，输入了151就提示错误了。

使用NumberField只能输入数字，输入其他的输入不了。

 

16.2下拉列表选择数据——ComboBox

16.2.1本地数据

//cmbobox的值

    var cmbData = [['0','全部'],['1','Java'],['2','C++'],['3','Linux'],['4','Ext Js']];

{

    header:"技术",

    dataIndex:'technology',

    sortable:true,

    editor:new Ext.Editor(new Ext.form.ComboBox({

        emptyText:"请选择技术",

        name:"techonology",

        readOnly:true,//如果设置为TRUE，则不能模糊查询；设置为FALSE，可以模糊查询，但是也可以输入其他内容。

        mode:"local",// 从哪儿获取数据，默认是remote，即从服务器获取

        valueField:"value",//值列，传递给Server的值，对应在store的fields中定义了2列

        displayField:"text",//显示的列

        triggerAction:'all',//如果没有配置为all，那么选择一项之后，就没法选择其他的项了，除非删除再重新选择。

        store:new Ext.data.SimpleStore({

            fields:['value','text'],

            data:cmbData

        })

    }))

}

 

如果triggerAction没有配置为all，那么结果就是这样的。

这样就没法选择其他的项，除非删除再重新选择。triggerAction默认的配置是query，就是这样的效果。

 

那如果配置为all呢？

那可以看到，是可以选择其他的项的。

 

16.2.2远程数据——还有问题

不知道为什么，从server获取数据放入ComboBox始终没法成功，页面上下拉框无内容。网上看了很多文章，依照上面的来也不行。先把代码贴出来，以后再看看。

代码：

var store =new Ext.data.JsonStore({

    url : './cmbnobox_json.jsp',

    fields : ["deptNo","deptName"]

});

 

 store.load();

 

newExt.form.ComboBox({

    renderTo : document.body,

    allowBlank : false,

    emptyText : "请选择部门",

    mode:"local",// 因为上面store已经将数据加载到本地了，因此使用local

    valueField : "deptNo",

    displayField : "deptName",

    name : "department",

    readOnly : true,

    triggerAction : "all",

    selectOnFocus:true,

    store : store

});

 

后台返回的数据格式是二维数组的形式：

[[1,'研发部'],[2,'财务部'],[3,'人事部']]

 

返回其他Json格式也不行。即{root:[{id:1,name:’软件开发’}]}这种格式也不行。下拉框始终没有值。

 

16.2.3将Select转换成ComboBox

这种创建方式要求必须有一个select，Ext将数据抽取出来加到ComboBox中。

示例：

Js：

var cmb =new Ext.form.ComboBox({

        transform:"select",

        mode:"local",

        triggerAction:"all",

        listeners:{

            change:function(c,oldV,newV) {

                Ext.Msg.alert("title",oldV +"," + newV);

            }

        }

    });

HTML：

<selectid="select">

        <optionvalue="0">全部</option>

        <optionvalue="1">开发</option>

        <optionvalue="2">测试</option>

        <optionvalue="3">管理</option>

</select>

 

 

不过，如果select中有optgroup，则会直接取option追加，就没有分组了。

<selectid="select">

        <optgrouplabel="color">

            <optionvalue="red">Red</option>

            <optionvalue="green">Green</option>

            <optionvalue="blue">Blue</option>

        </optgroup>

        <optionvalue="0">全部</option>

        <optionvalue="1">开发</option>

        <optionvalue="2">测试</option>

        <optionvalue="3">管理</option>

</select>

 

16.2.4下拉列表分页——远程加载数据问题

加入pageSize配置就可以了，mode使用remote。

示例：

var store=new Ext.data.JsonStore({

    proxy:new Ext.data.HttpProxy({

        url:"./combobox_remote.jsp"

    }),

    reader:new Ext.data.JsonReader({

        totalProperty:"total",

        root:"items"

    },["value","text"])

});

 

varcbx= new Ext.form.ComboBox({

    store:store,

    renderTo:document.body,

    mode:"remote",

    displayField:"text",

    valueField:"value",

    triggerAction:"all",

    pageSize:6,

    minListWidth:200,

    forceSelection:true,//要求输入的值必须在列表中存在

    resizable:true,//允许改变下拉列表的大小

    typeAhead:true//自动将第一个搜索到的补全输入

});

 

store.load({

    params:{

        start:0,

        limit:6

    }

});

16.3日期控件——DateField

var birthday =new Ext.form.DateField({

    allowBlank:false,

    blankText:"请选择日期！",

    emptyText:"选择日期",

    format:"Y-m-d",

    minValue:"1980-01-01",

    maxValue:"2012-12-12",

    disabledDates:["2000-01-01","09-10"],

    disabledDatesText:"不能选择这个日期",

    renderTo:Ext.getBody(),

    validateOnBlur:true,

    validator:function(v) {// 自定义验证方法

        //返回的格式是yyyy-mm-dd，字符串。

        //这个可以自己添加验证代码

    },

    value:"2012-10-10"//默认的日期

});

 

 

代码中设置了最小日期是1980-01-01，最大日期是2012-12-12，且不能选择2000-01-01，不能选择09-10这一天。

disabledDates可以是下面的形式：

• ["03/08/2003", "09/16/2003"] would disable those exact dates
• ["03/08", "09/16"] would disable those days for every year
• ["^03/08"] would only match the beginning (useful if you are using short years)
• ["03/../2006"] would disable every day in March 2006
• ["^03"] would disable every day in every March
• ["03/08/2003", "09/16/2003"] would disable those exact dates
• ["03/08", "09/16"] would disable those days for every year
• ["^03/08"] would only match the beginning (useful if you are using short years)
• ["03/../2006"] would disable every day in March 2006
• ["^03"] would disable every day in every March
• ["03/08/2003", "09/16/2003"] would disable those exact dates
• ["03/08", "09/16"] would disable those days for every year
• ["^03/08"] would only match the beginning (useful if you are using short years)
• ["03/../2006"] would disable every day in March 2006
• ["^03"] would disable every day in every March
• ["03/08/2003", "09/16/2003"] would disable those exact dates
• ["03/08", "09/16"] would disable those days for every year
• ["^03/08"] would only match the beginning (useful if you are using short years)
• ["03/../2006"] would disable every day in March 2006
• ["^03"] would disable every day in every March

["03/08/2003","09/16/2003"] would disable those exact dates

["03/08","09/16"] would disable those days for every year

["^03/08"]would only match the beginning (useful if you are using short years)

["03/../2006"]would disable every day in March 2006

["^03"]would disable every day in every March

 

 

 

16.4复选框——CheckBox

复选框代码很简单：

示例1：

var cbx =new Ext.form.Checkbox({

    allowBlank:false,

    el:document.body,

    checked:true,

    name:"cbx",

    listeners:{

        click:function(v) {

            alert("click:" + v);

        }

    }

});

cbx.render();

alert(cbx.hasListener("click"));// true

alert(cbx.getValue()); // true

 

示例2：

var f =new Ext.form.FormPanel({

        title:"Checkbox",

        width:300,

        autoHeight:200,

        frame:true,

        items:[

               {

               xtype:"fieldset",

               title:"多选",

               autoHeight:true,

               items:[

                        {boxLabel:"Checkbox1",checked:true,xtype:"checkbox",hideLabel:true,inputValue:"1"},      

                        {boxLabel:"Checkbox2",xtype:"checkbox",hideLabel:true,inputValue:"2"},      

                        {boxLabel:"Checkbox3",xtype:"checkbox",hideLabel:true,inputValue:"3"}      

               ]

               }

        ],

        renderTo:document.body

    });效果：

boxLabel:标签显示到checkbox后面。默认的fieldLabel是显示在左边。需要将hideLabel设置为TRUE，否则左边的标签也会显示出来，很难看。

如果没有inputValue，传递到后台就没法区分到底选择的是哪一个。因为value的默认值是on，因此提交到后台的数据就是这样：checkbox=on&checkbox=on&checkbox=on。

那用inputValue来区分，提交到后台就是这样：checkbox=1&checkbox=2&checkbox=3。

 

 

16.5单选框——RADIO

Radio继承 自Ext.form.CheckBox，CheckBox有的功能它都有。那如果项制作一组单选框，则需要进行一些区别与CheckBox的配置了。

var f =new Ext.form.FormPanel({

        title:"Radio",

        width:300,

        autoHeight:200,

        frame:true,

        items:[

               {

               xtype:"fieldset",

               title:"单选",

               autoHeight:true,

               items:[

                        {boxLabel:"Radio1",checked:true,xtype:"radio",hideLabel:true,inputValue:"1",name:"radio"},      

                        {boxLabel:"Radio2",xtype:"radio",hideLabel:true,inputValue:"2",name:"radio"},      

                        {boxLabel:"Radio3",xtype:"radio",hideLabel:true,inputValue:"3",name:"radio"}      

               ]

               }

        ],

        renderTo:"radio"

    });

效果：

Name相同的单选框会放到一组，这3个单选框的name一样，这样一次就只能选择一个。

 

16.6文件上传

文件上传很简单，2步搞定：

1.       给Form加上fileUpload:true;

2.       给form添加一个field，设置inputType:file。

代码：

var f =new Ext.form.FormPanel({

    title:"File Upload",

    fileUpload:true,

    width:750,

    url:"./fileupload.jsp",

    frame:true,

    items:[

        {

            fieldLabel:"选择文件",

            xtype:"textfield",

            name:"file",

            inputType:"file"

        }      

    ],

    buttons:[{

        text:"OK",

        handler:function() {

            f.getForm().submit();

        }

    }],

    renderTo:Ext.getBody()

});

 

 

当然了，具体的上传功能还是需要自己去实现。