Combox drop-down GridPanel menu

Extjs Combox drop-down GridPanel menu

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

//

Var data = [['1', 'If you are the one'], ['2', 'Let the bullet fly '], ['3', 'jinyiwei'], ['4 ', 'dean 4'];

 

// Control the rows in the gridpanel list to select only one row

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, // supports column Movement
EnableColumnResize: true,
AutoExpandColumn: true,
TrackMouseOver: true,
ViewConfig :{
ForceFit: true
},
Sm: rsm,
Tbar: [{text: 'Confirm 1'}, '-', new Ext. form. textField ({id: 'paramcnname', width: 60}), {text: 'Find one'}],
Cm: new Ext. grid. ColumnModel ([
New Ext. grid. RowNumberer (),
{Header: 'number', dataIndex: 'mid ', sortable: true },
{Header: 'name', dataIndex: 'mname', sortable: true}
]),

// Remote data is effective

Bbar: new Ext. PagingToolbar ({
PageSize: 10,
Store: store,
DisplayInfo: true,
DisplayMsg: 'display records from {0} to {1}, total records from {2 ',
EmptyMsg: 'No records'
}),

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',/* render to a container */
Width: 600,
TriggerAction: 'all ',
TypeAhead: true,
LazyRender: true,
Editable: true,
EmptyText: 'select ...',
ValueField: 'mid ',
DisplayField: 'mname ',
Tpl: '<div id = "panel-item"> </div> ',
Mode: 'local ',
OnSelect: Ext. emptyFn,
Store: new Ext. data. ArrayStore ({fields: ['mid ', 'mname'], data: [[]}),
Listeners :{
Expand: function (combo ){

// Important
If (this. menu = null ){
This. menu = showMenu;
}
Store. load ();
This. menu. show (this. el, "tl-bl? ");

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

}
}
});

 

});

 

<Div id = "combox-panel-grid"> </div>

 

Implement the drop-down tree effect in the ComboBox component:

Var combtree = new Ext. form. ComboBox ({
Store: new Ext. data. SimpleStore ({fields: [], data: [[]}),
Editable: false,
Mode: 'local ',
TriggerAction: 'all ',
MaxHeight: 200,
Tpl: "<tpl for = '. '> <div style = 'height: 200px'> <div id = 'tree'> </div> </tpl> ",
SelectedClass :'',
OnSelect: Ext. emptyFn
});
Var tree = new Ext. tree. TreePanel ({
Loader: new Ext. tree. TreeLoader (),
Border: false,
Root: new Ext. tree. AsyncTreeNode ({text: 'directory', 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 ');