steelcombogird.js
/**
*
* 部分特定配置方法如下(其他的和ComboBox一样):
* ------------------------------------------
* 如果需要对grid有特殊的配置,请使用 gridCfg 配置项
* url: [必须] 数据源url
* columns:[必须] grid的cm
* displayField : [必须] 显示对应的列 默认为 text
* valueField : [必须] 值对应的列 默认为 value
* paging: [可选] 是否分页 默认false不分页
* fields: [可选] store的数据列、默认是根据columns的dataIndex构造出了的
* ------------------------------------------
* @extends Ext.form.ComboBox
*/
Ext.SteelComboGrid = Ext.extend(Ext.form.ComboBox, {
steel:1,
JSONSTORE_ROOT:null,
JSONSTORE_TOTALPROPERTY:null,
doQuery: function(q, forceAll) {
q = Ext.isEmpty(q) ? '': q;
var qe = {
query: q,
forceAll: forceAll,
combo: this,
cancel: false
};
if (this.fireEvent('beforequery', qe) === false || qe.cancel) {
return false;
}
q = qe.query;
forceAll = qe.forceAll;
if (forceAll === true || (q.length >= this.minChars)) {
if (this.lastQuery !== q) {
this.lastQuery = q;
this.selectedIndex = -1;
this.store.clearFilter();
this.onLoad();
} else {
this.selectedIndex = -1;
this.onLoad();
}
}
},
onLoad: function() {
if (!this.hasFocus) {
return;
}
if(this.isExpanded()){
this.collapse();
}
this.expand();
this.restrictHeight();
if (this.lastQuery == this.allQuery) {
if (this.editable) {
this.el.dom.select();
}
if (this.autoSelect !== false && !this.selectByValue(this.value, true)) {
this.select(0, true);
}
} else {
if (this.autoSelect !== false) {
this.selectNext();
}
if (this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE) {
this.taTask.delay(this.typeAheadDelay);
}
}
},
listeners:{
expand:function(){
alert(this.el.dom.value);
this.grid.render('steel-'+this.getId());
this.grid.store.removeAll ();
//此处可以改成axj从后台得到数据
if(1==this.steel){
var cbJson ={totalProperty:5, root:[
{functionId:'1',functionName:'夫人',type:'woman'},
{functionId:'2',functionName:'桃花',type:'woman'},
{functionId:'3',functionName:'杏花',type:'woman'},
{functionId:'4',functionName:'梨花',type:'woman'},
{functionId:'5',functionName:'梅花',type:'woman'}]};
this.grid.store.loadData(cbJson.root,true);
this.grid.store.JSONSTORE_ROOT=cbJson.root;
this.grid.store.JSONSTORE_TOTALPROPERTY=cbJson.totalProperty;
}
if(2==this.steel){
var cbJson = [
{functionId:'1',functionName:'夫人',type:'woman'},
{functionId:'2',functionName:'桃花',type:'woman'}];
this.grid.store.loadData(cbJson,true);
}
this.steel++;
}
},
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : this.editable||false,
mode : 'local',
emptyText : this.emptyText||"请选择",
allowBlank : this.allowBlank||true,
blankText : this.blankText||"必须输入!",
triggerAction : 'all',
anchor : '50%',
displayField : 'text',
valueField : 'value',
tpl : '',
selectedClass : '',
grid: null,
/**
* grid的配置参数【可选】
* @type
*/
gridCfg:{},
url: '',
//grid 的 Store
gridStore:null,
paging:false,
fields: [],
columns: [],
gridColumns: [],
initComponent : function() {
var me = this;
Ext.SteelComboGrid.superclass.initComponent.call(this);
this.tpl = "<tpl for='.'><div id='steel-"+this.getId()+"'></div></tpl>";
//如果没有定义fields 按照columns初始化
if(0==this.fields.length && this.columns){
if(0==this.columns.length)console.log("请为"+this.getName()+"定义columns属性");
Ext.each(this.columns,function(c){
me.fields.push(c.dataIndex);
});
}
this.gridStore = new Ext.data.JsonStore({
url:this.url,
/*proxy : new Ext.data.HttpProxy({
url : this.url,
method : 'post'
}),
reader: new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root'},
[
{name: 'functionId'},
{name: 'functionName'},
{name: 'type'}
]) */
root:this.JSONSTORE_ROOT,
totalProperty:this.JSONSTORE_TOTALPROPERTY,
fields:this.fields
});
this.listWidth = 350;
this.maxHeight = 300;
this.gridColumns.push( new Ext.grid.RowNumberer());
Ext.each(this.columns,function(c){
me.gridColumns.push(c);
});
this.grid = new Ext.grid.GridPanel(Ext.apply({
title: ''
,border: false
,height : 200
,paging: this.paging
,searchField:'local'
,store: this.gridStore
,colModel:new Ext.grid.ColumnModel(this.gridColumns)
,bbar:new Ext.PagingToolbar({
pageSize:2,
store:me.gridStore,
displayInfo:true,
displayMsg:'显示第{1}条记录,一共有{2}条',
emptyMsg:'没有记录'
})
},this.gridCfg));
this.grid.on('rowclick', function(grid, rowIndex, e) {
var r = me.gridStore.getAt(rowIndex);
if(me.fireEvent('beforeselect', me, r, rowIndex) !== false){
me.setValue(r.data[me.valueField || me.displayField]);
me.collapse();
me.fireEvent('select', me, r, rowIndex);
}
});
this.onViewClick = function(doFocus){};
}
,getStore : function(){
return this.gridStore;
}
,getGrid : function(){
return this.grid;
}
,setValue : function(v){
var text = v;
if(this.valueField){
var r = this.findRecord(this.valueField, v);
if(r){
text = r.data[this.displayField];
}else if(Ext.isDefined(this.valueNotFoundText)){
text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = Ext.value(v, '');
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
return this;
}
,findRecord : function(prop, value){
var record;
if(this.gridStore.getCount() > 0){
this.gridStore.each(function(r){
if(r.data[prop] == value){
record = r;
return false;
}
});
}
return record;
}
});
Ext.reg('steelcombogird', Ext.SteelComboGrid);
相关推荐
本篇文章主要介绍了easyui combogrid实现本地模糊搜索过滤多列,非常具有实用价值,需要的朋友可以参考下
DEV控件中的ComboBoxEdit控件绑定数据库中的数据,主要的绑定方式下拉框中显示Name,但是在选中使用时,使用的是对应的ID。
10.1.7 锁定列的运行流程:ext.grid.lockable与ext.grid.lockingview / 516 10.2 使用grid / 520 10.2.1 最简单的grid / 520 10.2.2 列的配置项 / 521 10.2.3 自定义单元格的显示格式 / 523 10.2.4 通过列对象...
combo_code.zip 多列组合框(7KB)<END><br>41,multicol_combo_proj.zip 多列组合框演示程序(46KB)<END><br>42,multicol_combo3.src.zip 另一种多列组合框(5KB)<END><br>43,multicol_combo3.demo.zip 另一...
2.4.2. 让grid支持按列排序 2.4.3. 中文排序是个大问题 2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么? 2.6. 更进一步,自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了,请允许...
d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、掌握两种) •语言支持:Java、.Net、PHP、Asp •数据库支持:Oracle、SqlServer、MySQL 强大灵活...
d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、掌握两种) •语言支持:Java、.Net、PHP、Asp •数据库支持:Oracle、SqlServer、MySQL 强大灵活...
d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、掌握两种) •语言支持:Java、.Net、PHP、Asp •数据库支持:Oracle、SqlServer、MySQL 强大...
d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、掌握两种) •语言支持:Java、.Net、PHP、Asp •数据库支持:Oracle、SqlServer、MySQL 强大灵活...
2.4.2. 让grid支持按列排序 2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么? 2.6. 更进一步,自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了,请允许我让2.0先上场。 2.6.3....
2.4.2. 让grid支持按列排序 2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么? 2.6. 更进一步,自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了,请允许我让2.0先上场。 2.6.3. 1.x...
3.4 Grid面板 60 3.4.1 调整行和列 63 3.4.2 布局舍入 64 3.4.3 跨越行和列 65 3.4.4 分割窗口 66 3.4.5 共享尺寸组 69 3.4.6 UniformGrid面板 72 3.5 使用Canvas面板进行基于 坐标的布局 72 3.5.1 Z顺序 73 3.5.2 ...
3.4 Grid面板 60 3.4.1 调整行和列 63 3.4.2 布局舍入 64 3.4.3 跨越行和列 65 3.4.4 分割窗口 66 3.4.5 共享尺寸组 69 3.4.6 UniformGrid面板 72 3.5 使用Canvas面板进行基于 坐标的布局 72 3.5.1 Z顺序 73 3.5.2 ...
4.4 Grid面板 78 4.4.1 调整行和列 80 4.4.2 跨越行和列 82 4.4.3 分割窗口 83 4.4.4 共享尺寸组 86 4.4.5 UniformGrid面板 88 4.5 使用Canvas面板进行 基于坐标的布局 89 4.5.1 Z顺序 90 4.5.2 lnkCanvas...
4.4 Grid面板 78 4.4.1 调整行和列 80 4.4.2 跨越行和列 82 4.4.3 分割窗口 83 4.4.4 共享尺寸组 86 4.4.5 UniformGrid面板 88 4.5 使用Canvas面板进行 基于坐标的布局 89 4.5.1 Z顺序 90 4.5.2 lnkCanvas元素 91 ...
第十六章:更多表单组件 102 一、您能说出哪些表单组件呢? 102 二、表单组件关系图 102 三、组件配置选项介绍 103 四、完整源代码 107 五、小结 112 第十七章:悬停提示与验证 113 一、悬停提示 113 二、悬停提示的...