Extjs下拉框扩展

本文主要讲解了下拉框的基础使用和扩展使用.扩展使用本文写了一个动态变化组件类型的示例。

1、基础使用部分代码 只介绍了常用属性。

//使用 new 或者 Ext.create 方法实例化对象

//下拉框数据store对象
var comboStore = new Ext.data.Store({
autoLoad : false,    //这里设置不自动加载
//id 和 name对应bean 的属性
fields: ['id', 'name'],
proxy: {
type: 'ajax',     //代理类型  ajax异步读取
url: '你的获取下拉数据的路径',
reader: {
type: 'json'   //数据类型   json
}
}
});

//下拉框对象
var combo = new Ext.form.ComboBox({
fieldLabel: "用户信息",      //下拉框左侧文字
labelAlign : 'right',      //左侧文字对齐方式
labelWidth : '100',        //左侧文字宽度
store: comboStore,
displayField: 'name',      //下拉框显示的值   对应comboStore中的field属性的值
valueField: 'id',          //下拉框提交的值  对应comboStore中的field属性的值
width : 250,
queryMode : 'local',      //点击下拉框时加载且只加载一次,设置为remote则每次都加载
editable : false          //下拉框只能通过选择填值,不能编辑 当此属性 设置为true时,下面两个属性才有意义。想试试效果解除下面两个属性的注释此属性值设为true即可
//  typeAhead : true,         // 根据输入的值自动匹配下拉框中的值 比如下拉框有名称为张三的值,如果你输入张,则下拉框会自动筛选出张三;
//  forceSelection : true,    //该输入框填的值必须是下拉框内存在的
});

以上代码comboStore链接更改为你自己的链接，fields放入你的字段,即可生成下拉框,到此,基础部分结束。

2、扩展使用部分代码 自定义属性动态生成文本框类型

适应需求:根据选择的下拉框项,获取选择字段的类型,生成对应类型的输入/选择框(你们可自定义设置更多的类型)；

结果图:
选择日期类型的值 :


选择文本类型的值 :


代码:

//属性实体 对应属性表 (只添加了部分属性,可根据自己特殊需求添加)
public class PropertyBean {
private String id;              //属性id
private String name;            //属性显示名称 如开始日期
private String columnName;      //属性对应数据列名如 start_date
private String propertyName;    //属性名     如startDate
private String dataType;        //数据类型  如d 代表date 具体规则自定义
private String queryType;       //查询类型 自定义 如 EQ 代表等于 LK 代表模糊查询 GT 代表大于  由于考虑代码量问题,在本示例中未写搜索功能

/** 在此 省略getter setter 方法,你们自行添加 **/
}

/***************************js代码************************/
var indexBtn = new Ext.button.Button({
text: '搜索',
handler : function(){
//写你自己的搜索实现方法
}
});
//默认下拉框右侧的输入框
var searchField = new Ext.form.field({
emptyText : '请输入检索关键字'
});
//下拉框的store
var comboStore = new Ext.data.Store({
autoLoad : false,    //这里设置不自动加载
//id 、name 、propertyName 、dataType 对应PropertyBean 的属性
fields: ['id', 'name','propertyName','dataType'],
proxy: {
type: 'ajax',     //代理类型  ajax异步读取
url: '你的获取下拉数据的路径',//填写成获取上面的PropertyBean的对象列表的链接
reader: {
type: 'json'   //数据类型   json
}
}
});

//获取搜索框  根据属性bean的值
function getSearchField(property,item,isSelectCombo){
/** added by Kenneth **/
//默认配置
var config = {
xtype : 'textfield',
fieldLabel : isSelectCombo ? '' : property.name,
name : property.propertyName,
searchProp : property.propertyName,
compareMode : property.queryType,
type : property.dataType
};
//如果是日期类型的 覆盖默认配置  可自定义更多类型的判断,改变生成的组件
if(property.dataType == 'd'){
if(property.queryType == "EQ" || isSelectCombo){
Ext.apply(config, {
xtype : 'datefield',
format : 'Y-m-d'
});
if(isSelectCombo){
Ext.apply(config, {
compareMode : 'EQ'
});
}
}
}
item.items[0] = config;
}

//添加自定义属性 type --> 用于获取所需生成的右侧组件类型
var combo = new Ext.form.ComboBox({
fieldLabel: "检索字段",
labelAlign : 'right',
type : 'dataType',
store: comboStore,
displayField: 'name',
valueField: 'propertyName',
width : 250,
labelWidth : 80,
queryMode : 'local',
editable : false,
listeners: {
select : function(combo,records){
var toolbar = this.up('toolbar');
//  下拉框所在的 工具条 本示例中下拉框和下拉框后的组件和搜索按钮占用该工具条最后3个位置
toolbar.remove(toolbar.items.items[toolbar.items.items.length-1]);//移除 搜索按钮组件
toolbar.remove(toolbar.items.items[toolbar.items.items.length-1]);//移除 下拉框右侧框组件
var items = {items:[]};
getSearchField(records[0].raw,items,true);
toolbar.add(items.items[0]);  //工具条添加根据参数生成的新组件
toolbar.add(indexBtn); //工具条重新添加搜索按钮
toolbar.doLayout();    //工具条重新布局
}
}
});

var toolbar = new Ext.toolbar.Toolbar({
width : 40,
items : [combo,searchField,indexBtn ]
});