extjs4.1自定义组件

Ext.define('Lis.Component.Seletor', {
 extend : 'Ext.form.field.Text',
 alias : ['widget.selector'],
 // 创建实例时传入的参数列表
 config : {
   store : null,    // 检索字典数据源
   columns : [    // Grid 展示列
    { dataIndex : 'code', header : '编码' },
    { dataIndex : 'name', header : '名称' },
    { dataIndex : 'py_code', header : '拼音码' },
    { dataIndex : 'd_code', header : '自定义码' }
   ],
   valueField : '',   // 文本框的值域(Grid 的某一列)
   searchField : '',  // 用来检索的域(Grid 的某一列)
   hiddenName : '',   // 生成隐藏表单项
   hiddenField : '',   // 生成隐藏表单项值域(Grid的某一列)(可选,没设置则取hiddenName的值)
   searchNumber : 20,   // 显示检索结果条数,默认20(可选)
   searchMode : 'local',  // 检索模式(local,remote),默认local(可选)
   gridTitle : '字典列表',  // Grid 标题(可选)
   gridWidth : null,     // Grid 宽度(可选)
   gridHeight : null  // Grid 高度(可选)
 },
 // 不需要配置的成员
 searchValue : '',    // 暂存检索值
 tmpStore : null,    // 检索结果 Store
 popMenu : null,    // 弹出的选择窗体
 hiddenEl : null,    // 生成的隐藏域
 enableKeyEvents : true,
 emptyText: '输入字符检索',
 initComponent : function() {
   var me = this;
   me.callParent(arguments);
   /**
    * 选择事件,在Grid发生选择时触发,接受6个参数 1、文本框 2、当前Grid 3、选中的记录record
    * 4、选中的HTMLElenment 5、当前索引index 6、当前事件 event
    */
   me.addEvents('select');
      
   me.addListener('keyup', function(field, event) {
    // 弹出检索框后,使用上下键进行选择
    if (event.getKey() == event.UP || event.getKey() == event.DOWN) {
     var view = Ext.getCmp(me.id + "_view");
     view.select(0, false, false);
     view.focus(false, 100);
    }
   });
   me.tmpStore = Ext.create('Ext.data.Store', {
    model : me.store.model
   });
   if (Ext.isEmpty(me.hiddenField)) {
    me.hiddenField = me.hiddenName;
   }
   me.popMenu = Ext.create('Ext.menu.Menu', {
    focusOnToFront : false,
    id : me.id + "_menu",
    listeners : {
     beforehide : function() {
      me.setRawValue(me.searchValue);
      me.lastValue = me.searchValue;
     }
    },
    items : [{
     xtype : 'grid',
     id : me.id + "_grid",
     width : me.gridWidth,
     height : me.gridHeight,
     title : me.gridTitle,
     resizable : true,
     forceFit : true,
     columnLines : true,
     store : me.tmpStore,
     columns : me.columns,
     viewConfig : {
      id : me.id + "_view",
      listeners : {
       beforeitemkeydown : function(view, record, item, index, event) {
        if (event.getKey() == event.ENTER) {
         record = view.getSelectionModel().getSelection()[0];
         me.hiddenEl.setValue(record.get(me.hiddenField));
         me.searchValue = record.get(me.valueField);
         me.setRawValue(me.searchValue);
         me.lastValue = me.searchValue;
         me.popMenu.hide();
         me.fireEvent('select', me, view.up(), record,item, index, event);
        }
       }
      }
     },
     listeners : {
      itemdblclick : function(grid, record, item, index, event) {
       me.hiddenEl.setValue(record.get(me.hiddenField));
       me.searchValue = record.get(me.valueField);
       me.setRawValue(me.searchValue);
       me.lastValue = me.searchValue;
       me.popMenu.hide();
       me.fireEvent('select', me, grid, record, item, index, event);
      }
     }
    }]
   });
 },
 afterRender : function() {
   var me = this;
   me.callParent(arguments);
   me.hiddenEl = Ext.create('Ext.form.field.Hidden', { name : me.hiddenName });
   me.up().add(this.hiddenEl);
   me.up().doLayout();
 },
 onDestroy : function() {
   var me = this;
   if (me.rendered) {
    Ext.destroy(Ext.getCmp(me.id + "_view"), Ext.getCmp(me.id + "_grid"), Ext.getCmp(me.id + "_menu"));
   }
   me.callParent();
 },
 onChange : function() {
   var me = this;
   me.callParent(arguments);
   var searchValue = me.getValue().toUpperCase();
      
   // 清除检索
   if (me.getValue() == '') {
    me.hiddenEl.setValue('');
    me.searchValue = '';
    return;
   }
      
   searchValue = Ext.String.trim(searchValue);
   // 如果输入的不是字母数字组合,则不弹出选择菜单,这种情况可能是外部调用setValue()
   var reg = /[^a-zA-Z0-9]/g;
   if(reg.test(searchValue)){
    return;
   }
      
   // 进入检索
   me.showMenu(searchValue);
 },
 // 获得焦点后把检索到的CODE显示出来, 并选择文本
 onFocus : function() {
   this.callParent(arguments);
   this.setRawValue(this.hiddenEl.getValue());
   this.lastValue = this.hiddenEl.getValue();
   this.selectText();
 },
 // 失掉焦点,如果当前值和CODE值相同,则显示searchValue
 onBlur : function() {
   this.callParent(arguments);
   if (this.getValue() == this.hiddenEl.getValue()) {
    this.setRawValue(this.searchValue);
    this.lastValue = this.searchValue;
   }
 },
 showMenu : function(searchValue) {
   var me = this;
   if (me.searchMode == 'local') {
    var index = 0;
    var datas = new Array();
    me.store.each(function(record) {
     if (index >= me.searchNumber) {
      return false;
     }
     var data = Ext.String.trim(record.get(me.searchField)).toUpperCase();
     if (data.search(searchValue) != -1) {
      datas.push(record);
      index++;
     }
    });
    var searchNumber = me.searchNumber - index;
    if (searchNumber > 0) {
     index = 0;
     me.store.each(function(record) {
      if (index >= searchNumber) {
       return false;
      }
      var data = Ext.String.trim(record
        .get('code')).toUpperCase();
      if (data.search(searchValue) != -1) {
       datas.push(record);
       index++;
      }
     });
    }
    me.tmpStore.loadData(datas);
   } else if (me.searchMode == 'remote') {
    var searchField = me.searchField;
    me.tmpStore.setProxy(me.store.getProxy());
    var params = {};
    params['searchNumber'] = me.searchNumber;
    params[searchField] = searchValue;
    me.tmpStore.load({ params : params });
   }
   me.popMenu.showBy(me.inputEl, "tl-tl", [((me.gridWidth < document.body.clientWidth-me.getBox().x) ? 0 : document.body.clientWidth-me.getBox().x-me.gridWidth-5), me.getEl().getHeight()]);
 },
 // 返回内部Grid的store
 getStore : function() {
   return Ext.getCmp(this.id + '_grid').getStore();
 },
 /**
   * 重写setValue方法,当外部设置Value时把value赋值给searchValue(说明直接输入的不调用setValue方法)
   * 如果有第二个参数,则设置为隐藏域的值
   */
 setValue: function(){
   this.callParent(arguments);
   this.searchValue = this.getValue();
   if(arguments[1]){
    this.hiddenEl.setValue(arguments[1]);
   }
 }
 });


知识共享许可协议
《extjs4.1自定义组件》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     164.96ms