Combox下拉GridPanel菜單

extjs Combox下拉GridPanel菜單

Ext.onReady(function(){
      Ext.BLANK_IMAGE_URL = wroot+'ext-3.2.0/resources/images/default/s.gif';

//

var data=[['1','非誠勿擾'],['2','讓子彈飛'],['3','錦衣衛'],['4','狄仁傑4']];

 

// 控制gridpanel  列表行 為隻能選擇一行

var  rsm = new Ext.grid.RowSelectionModel({   singleSelect:true     });

 

var store = new Ext.data.Store({
   autoDestroy: true,
   proxy:new Ext.data.MemoryProxy(data),
   reader:new Ext.data.ArrayReader({},[
       {name:'mid'},
       {name:'mname'}
   ])
});

 

var grid = new Ext.grid.GridPanel({
      width:600,
      height: 200,
     frame: true,
     border:true,
     //enableHdMenu:false,
     store: store,
     enableColumnMove:false,   //支持列移動
     enableColumnResize:true,
      autoExpandColumn : true,
      trackMouseOver : true,
      viewConfig:{
               forceFit:true
     },
  sm:rsm ,
  tbar:[{text:'確定一'},'-',new Ext.form.TextField({id: 'paramCnName',width:60}),{text:'查找一'}],
  cm: new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
       {header:'編號',dataIndex:'mid', sortable: true},
       {header:'姓名',dataIndex:'mname', sortable: true}
  ]),

// 遠程數據 才有效果

  bbar:new Ext.PagingToolbar({
      pageSize:10,
      store:store,
      displayInfo:true,
      displayMsg:'顯示第{0} 條 到 {1} 條記錄,一共{2}條',
      emptyMsg:'無記錄'
  }),

  listeners:{
    rowdblclick:function(grid , rowIndex ,e){
       showMenu .hide();
       var rowOptions = grid.getSelectionModel().getSelections();
        for(var i=0; i< rowOptions.length; i++){
            var uid = rowOptions[i].get('mid');
            var uname = rowOptions[i].get('mname');
            comb.setValue(uid);
            comb.setRawValue(uname);
        }
    }
  }
});

 

var showMenu = new Ext.menu.Menu({
     items : [grid]
});

 

var comb = new Ext.form.ComboBox({
    renderTo:'combox-panel-grid',  /*渲染到一個容器裡*/
    width:600,
    triggerAction: 'all',
    typeAhead: true,
    lazyRender:true,
    editable:true,
emptyText:'請選擇…',
    valueField: 'mid',
    displayField: 'mname',
    tpl:'<p id="panel-item"></p>',
    mode: 'local',
    onSelect:Ext.emptyFn ,
    store:new Ext.data.ArrayStore({ fields: ['mid','mname'],  data:[[]] }),
    listeners:{
      expand:function(combo){

        //重要
        if(this.menu == null) {
           this.menu = showMenu;
        }
        store.load();
        this.menu.show(this.el, "tl-bl?");

       // this.menu.show(combo.getEl());

      }
    }
});

 

});

 

  <p id="combox-panel-grid"></p>

 

ComboBox組件中實現下拉樹效果:

var combtree = new Ext.form.ComboBox({  
        store:new Ext.data.SimpleStore({fields:[],data:[[]]}),  
        editable:false,  
        mode: 'local',  
        triggerAction:'all',  
        maxHeight: 200,  
        tpl: "<tpl for='.'><p style='height:200px'><p id='tree'></p></p></tpl>",  
        selectedClass:'',  
        onSelect:Ext.emptyFn  
    });  
    var tree = new Ext.tree.TreePanel({  
        loader:new Ext.tree.TreeLoader(),
        border:false,  
         root:new Ext.tree.AsyncTreeNode({text: '目錄',id:'0'}) ,
         listeners:{
           beforeload:function(node){
                   this.loader.dataUrl = '../../nodes.action?ID=' + node.id;
           }} 
      });  
      tree.on('click',function(node){  
          combtree.setValue(node.text);  
          combtree.collapse();  
      });  
    combtree.on('expand',function(){  
        tree.render('tree');  
      });  
    combtree.render('combtree');