form中的combobox组件详解

                                                        form中的combobox组件详解

一、概述

       根类：Ext.form.field.ComboBox

              Ext.viewBoundList  约束列表

二、组件讲解

1、下拉列表框本地数据

Ext.onReady(function(){

       Ext.QuickTips.init();

       //部门类

       Ext.define("department",{

              extend:"Ext.data.Model",

              fields:[

                     {name:"name"},

                     {name:"id"}

              ]            

       });

       var st=Ext.create("Ext.data.Store",{

              model:"department",

              data:[

                     {name:"研发部",id:"001"},

                     {name:"销售部",id:"002"},

                     {name:"产品部",id:"003"},

                     {name:"技术部",id:"004"},

                     {name:"营销部",id:"005"}

              ]

       });

       var textForm=Ext.create("Ext.form.Panel",{

              title:"form中下拉列表框本地数据实例",

              bodyStyle:"padding:5 5 5 5",

              frame:true,

              width:400,

              height:250,

              id:"my_form",

              renderTo:"formDemo",

              defaults:{

                     labelSeparator:":",

                     labelAlign:"left",

                     labelWidth:100,

                     width:200,

                     allowBlank:false, //是否能为空

                     msgTarget:"side" //提示信息现在的位置

              },

              items:[{

                     xtype:"combobox",

                     listConfig:{ //控制下拉列表的样式

                            emptyText:"没有找到匹配的项",

                            maxHeight:200

                     },

                     fieldLabel:"选择部门",

                     name:"post",

                     queryMode:"local",//[local |remot]  //本地化数据或者外部数据

                     store:st,

                     valueField:"id",//真正传入的值

                     displayField:"name", //显示的值

                     forceSelection:true,//不运行使用数据集合中没有的数据

                     typeAhead:true, //自动填充后续内容

                     value:"001"//默认值

              }]

       })

})

 

2、下拉列表框内存代理数据(可以使用ajax，由于没有后台处理，所以用的memory代理来实现)

Ext.onReady(function(){

       Ext.QuickTips.init();

       //部门类

       Ext.define("city",{

              extend:"Ext.data.Model",

              fields:[

                     {name:"name"},

                     {name:"id"},

                     {name:"c"}

              ]            

       });

       var st=Ext.create("Ext.data.Store",{

              model:"city",

              pageSize:2,

              proxy:{

                     type:"memory",

                     data:[

                     {name:"保定",id:"001"},

                     {name:"邯郸",id:"002",c:"a"},

                     {name:"石家庄",id:"003"},

                     {name:"邢台",id:"004"},

                     {name:"北京",id:"005"}

                     ]

              },

              autoLoad:true

       });

       var textForm=Ext.create("Ext.form.Panel",{

              title:"form中下拉列表框内存代理实例", //可以使用ajax，由于没有后台。

              bodyStyle:"padding:5 5 5 5",

              frame:true,

              width:400,

              height:250,

              id:"my_form",

              renderTo:"formDemo",

              defaults:{

                     labelSeparator:":",

                     labelAlign:"left",

                     labelWidth:100,

                     width:300,

                     allowBlank:false, //是否能为空

                     msgTarget:"side", //提示信息现在的位置

                     pageSize:2 //设置每页展示几条数据

              },

              items:[{

                     xtype:"combobox",

                     listConfig:{ //控制下拉列表的样式

                            emptyText:"没有找到匹配的项",

                            maxHeight:200,

                            getInnerTpl:function(){ //使用样式模版

                                   return "<div class='{c}'>{name},{id}</div>"

                            }

                     },

                     fieldLabel:"城市",

                     name:"post",

                     queryMode:"remot",//[local |remot]  //本地化数据或者外部数据

                     mixChars:1,//以一个字段来查询

                     queryDelay:400,//响应时间

                     queryParam:"wheresql", //以什么参数名来给后台传

                     store:st,

                     multiSelect:true, //允许多选

                     valueField:"id",//真正传入的值

                     displayField:"name" //显示的值

                     //使用分页，它会自动向后台传入limit pageSize 参数

              }]

             

       })

})

3、时间选择器

Ext.onReady(function(){

       Ext.QuickTips.init();

       var textForm=Ext.create("Ext.form.Panel",{

              title:"form中下拉列表框时间实例",

              bodyStyle:"padding:5 5 5 5",

              frame:true,

              width:400,

              height:250,

              id:"my_form",

              renderTo:"formDemo",

              defaults:{

                     labelSeparator:":",

                     labelAlign:"left",

                     labelWidth:100,

                     width:300,

                     allowBlank:false, //是否能为空

                     msgTarget:"side" //提示信息现在的位置

              },

              items:[{

                     xtype:"timefield",

                     fieldLabel:"上班时间",

                     minValue:"9:00", //指定最小时间

                     maxValue:"18:00", //指定最大事件

                     minText:"时间要大于{0}",

                     maxText:"时间要小于{0}",

                     format:"G时i分",

                     increment:60, //指定步长

                     invalidText:"时间格式错误",//提示信息

                     pickerMaxHeight:100 //指定最大的高度

              }]

             

       })

})

3、日期选择器

Ext.onReady(function(){

       Ext.QuickTips.init();

       var textForm=Ext.create("Ext.form.Panel",{

              title:"form中下拉列表框时间实例",

              bodyStyle:"padding:5 5 5 5",

              frame:true,

              width:400,

              height:250,

              id:"my_form",

              renderTo:"formDemo",

              defaults:{

                     labelSeparator:":",

                     labelAlign:"left",

                     labelWidth:100,

                     width:300,

                     allowBlank:false, //是否能为空

                     msgTarget:"side" //提示信息现在的位置

              },

              items:[{

                     xtype:"timefield",

                     fieldLabel:"上班时间",

                     minValue:"9:00", //指定最小时间

                     maxValue:"18:00", //指定最大事件

                     minText:"时间要大于{0}",

                     maxText:"时间要小于{0}",

                     format:"G时i分",

                     increment:60, //指定步长

                     invalidText:"时间格式错误",//提示信息

                     pickerMaxHeight:100 //指定最大的高度

              }]

       })

})