Extjs 下拉grid

Extjs 下拉grid

 

Ext.ns("Ext.plugins.GridCombox");
Ext.plugins.GridCombox = function(a) {
 this.config = Ext.apply({
    width : 320,
    height : 350
   }, a);
};
Ext.extend(Ext.plugins.GridCombox, Ext.util.Observable, {
 init : function(b) {
  Ext.apply(b, {
   initList : b.initList.createInterceptor((function(d) {
      return function() {
       if(!this.list){
        var cls = 'x-combo-list';
                 this.list = new Ext.Layer({shadow:this.shadow, constrain:true, shim:true});
                 var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
                 this.list.setWidth(lw);
                 this.list.swallowEvent('mousewheel');
                 this.assetHeight = 0;
                 
                 if(this.title){
                     this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
                     this.assetHeight += this.header.getHeight();
                 }
                 
                 this.innerList = this.list.createChild({cls:cls+'-inner'});
                 this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
                  
                  this.grid = new Ext.grid.GridPanel({
         border:true,
            collapsible: false, 
            loadMask: true ,
            autoScroll:true,
         width : this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth),
         height : 250,
         store : b.store,
         cm : b.cm,
         sm: new Ext.grid.RowSelectionModel({singleSelect:true}),  
         bbar:new Ext.PagingToolbar({
                   id:'PagingToolbar',
                   pageSize: b.pageSize || 20,
                   store:b.store,
                   displayInfo: false
               })
        });
        this.grid.render(this.innerList);
        this.innerList.appendChild(this.grid.getEl());
        
        this.grid.on("rowclick", function (g, rowIndex, e) {
         var record = b.store.getAt(rowIndex);
         this.onSelect(record, rowIndex);
         this.collapse();
         if (!b.trigger) {
          this.focus();
         }
        }, this);
       }
       return false;
      }
     })(this.config), b),
   onRender : b.onRender.createSequence(function() {
      if (!this.lazyInit) {
       this.initList();
      } else {
       this.on("focus", this.initList, this, {
          single : true
         });
      }
     }, b),
   onTriggerClick : b.onTriggerClick.createInterceptor((function(d) {
      return function() {
       if (!this.disabled) {
        if (this.isExpanded()) {
         this.collapse();
         this.el.focus();
        } else {
         this.onFocus({});
         this.expand();
         this.store.load();//点击时 grid的store加载数据
        }
       }
       return false;
      };
     })(this.config), b),
   expand : b.expand.createInterceptor((function(d) {
      return function() {
       if (this.isExpanded()) {
        return;
       }
       
       this.list.alignTo(this.wrap, this.listAlign);
       this.list.show();
       if (Ext.isGecko2) {
        this.innerList.setOverflow('auto'); // necessary
       }
       Ext.getDoc().on('mousewheel', this.collapseIf, this);
       Ext.getDoc().on('mousedown', this.collapseIf, this);
       this.fireEvent('expand', this);
      };
     })(this.config), b)
  });
 }
});

 

使用例子：

 var cm = new Ext.grid.ColumnModel([
  {header:'编号',dataIndex:'id',menuDisabled:true},
  {header:'性别',dataIndex:'name',menuDisabled:true},
  {header:'名称',dataIndex:'descn',menuDisabled:true},
  {header:'描述',dataIndex:'date',menuDisabled:true}
 ]);

    var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'js/8.jsp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalCount',
            root: 'items',
            id:id
        }, [
          {name: 'id', type: 'int'},
          {name: 'name', type: 'string'},
          {name: 'descn', type: 'string'},
          {name: 'date', type: 'string'}
        ]),
        baseParams:{
         start:0,limit:10
        }
    }); 
        
      var c = new Ext.form.ComboBox({
    typeAhead : true,
    fieldLabel : '名称',
    hiddenName : 'id',
    triggerAction : 'all',
    lazyRender : true,
    width:300,
    displayField:'name',
    valueField:'id',
    store:store,
    mode : 'local',
    listClass : 'x-combo-list-small',
    selectedClass:'', 
    allowBlank : false,
    emptyText:'请选择...',
    cm:cm,
    onSelect:function(record,rowIndex){
     c.setValue(record.get("id"));
     c.setRawValue(record.get("name"));
    },
    plugins : [new Ext.plugins.GridCombox()]
   });

 

 

	 其中8.jsp内容

<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
try {
    int index = Integer.parseInt(start);
    int pageSize = Integer.parseInt(limit);

    String json = "{totalCount:100,items:[";

        for (int i = index; i < pageSize + index; i++) {
            json += "{id:" + i + ",name:'name" + i + "',descn:'descn" + i + "',date:'2010-01-01'}";
            if (i != pageSize + index - 1) {
                json += ",";
            }
        }
    json += "]}";
    response.getWriter().write(json);
    System.out.println(json);
} catch(Exception ex) {
}
%>

 

 

 

 

评论

2 楼 love_wting 2015-04-27  

为什么下拉框的表格样式显示了，数据访问json也从数据库中取到了，但是json数据并没有渲染到下拉表格。为什么表格没有数据呢

1 楼 qhdpeter 2012-09-06  

怎么第一次点上去的时候，下拉框没有展开，一定要点右边的下拉按钮。。