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'));
b.store = new Ext.data.Store({
baseParams: { objParam: JSON.stringify(b.storeParams) },
proxy: new Ext.data.HttpProxy({ url: b.Url }),
reader: new Ext.data.JsonReader({ root: 'items', totalProperty: 'TotolRecord' }, b.gridFields),
listeners: { exception: function(dataProxy, type, action, options, response, arg) { TimeOutOrError(response.responseText); } },
remoteSort: true,
autoLoad: true
});
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,
loadMask: true,
loadMask: { msg: '正在加载.....' },
viewConfig: { forceFit: true },
cm: new Ext.grid.ColumnModel(b.gridColFields),
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)
});
}
});
前端js调用:
new Ext.form.ComboBox({
typeAhead: true,
fieldLabel: '名称',
hiddenName: 'UnitTypeCode',
triggerAction: 'all',
lazyRender: true,
width: 260,
displayField: 'UnitTypeName',
valueField: 'UnitTypeCode',
mode: 'local',
listClass: 'x-combo-list-small',
selectedClass: '',
allowBlank: false,
emptyText: '请选择...',
Url: '../ASHX/D_EvlUnitType.ashx',
gridFields: [{ name: 'UnitTypeCode' }, { name: 'UnitTypeName'}],
gridColFields: [{ header: '名称', dataIndex: 'UnitTypeName'}],
storeParams: { WDO: -1, start: 0, limit: PAGING_PAGE_SIZE },
onSelect: function(record, rowIndex) {
c.setValue(record.get("UnitTypeCode"));
c.setRawValue(record.get("UnitTypeName"));
},
plugins: [new Ext.plugins.GridCombox()]
});