Extjs4 输入式 ComboBox 实现 (软件环境 struts2.3 , spring3) 博客分类： ExtJs4 springjsonAjaxComboBox

Extjs4 输入式 ComboBox 实现 (软件环境 struts2.3 , spring3)

第一步： 创建 ComboBox 对象， 该对象在Ext.form.field.ComboBox 下.

var staffCombox = Ext.create('Ext.form.field.ComboBox', {
        // 下拉列表框的名称 label。
        fieldLabel: '员工信息',
       // 下拉列表值的展示内容  (显示 )
        displayField: 'name',
       // 下拉列表隐藏的值
        valueField : 'staffNumber',
       // 是否允许为空， false 不能为空， 默认为ture
        allowBlank : false,
        // 数据存储的对象， 是第二步需要处理的（创建数据仓储）
        store: staffStore,
       // 发送到action 的参数名称， 在 action 中通过 request.getParameter("staffNumber") 获取， 输入框中输入的值
        queryParam: 'staffNumber',
       // 查询 模式， remote 远程， local  本地
        queryMode: 'remote',
      // all 表示每次都去服务端查询， query 表示，相同值及不去远程查询，否则去远程查询
        triggerAction: 'all',
      //
        listConfig: {
            getInnerTpl: function() {
                return '{%var value = this.field.getRawValue().replace(/([.?*+^$[\\]\\\\(){}|-])/g, "\\\\$1");%}' +
                    '{[values.staffNumber.replace(new RegExp(value, "i"), function(m) {return "<b>" + m + "</b>";})]}';
            }
        },
        //定制监听事件
        listeners: {
            // 定制选中事件
             select: function() {
                 Ext.Msg.alert('员工信息', '员工信息: ' + this.getValue());
      }
        }
    })
第二步：创建数据仓储   Ext.data.Store

var staffStore = Ext.create('Ext.data.Store', {
    //数据加载方式， 默认不自动加载
   autoLoad : false,
    // 对应的model 对象， 在第三步中定义
   model: 'Staff',
// 数据获取方式
   proxy : {
    // 通过ajax 的方式从服务器端获取数据
    type : 'ajax',
    // 请求的action 地址
    url : webContent+'json/queryStaff.action',
    // 返回数据的格式
    reader : {
    // 返回类型json 格式
     type : 'json',
    // 根节点是  staff 的json 数据
     root : 'staffs'
    }
   }
});

// 从action 返回的数据格式如下
{"staffs":[{"createDate":{"date":1,"day":5,"hours":0,"minutes":0,"month":10,"seconds":0,"time":1383264000000,"timezoneOffset":0,"year":113},"name":"向东流","password":"66749","roles":[],"satffId":1000,"staffNumber":"66749","version":{"date":1,"day":5,"hours":0,"minutes":0,"month":10,"seconds":0,"time":1383264000000,"timezoneOffset":0,"year":113}}]}

第三步
定义数据model 对象  需要继承 model 类
Ext.define(' Staff ', {
extend : 'Ext.data.Model',
                    // 字段
fields : [{
name : ' staffNumber ',
type : 'string'
}, {
name : 'name',
type : 'string'
},   {
name : 'staffId',
type : 'string'
}]
});



完成