-----------------------------------------------------------------------------------------------------------------------
声明一下下:
由于这些东西是我刚写好就贴上来的,没怎么详细的测试过,有BUG那是必须的,这里仅起到抛砖引玉的作用
如果有什么问题,大家可以联系我 wjm_0729@yahoo.cn 或直接评论, 谢谢!!
文章中后端技术是用的 Nutz http://nutzam.com/ --- 除SSH之外的另一种选择 (打个小广告,哈哈!!)
------------------------------------------------------------------------------------------------------------------------
Combobox Grid 多列显示
和上一个是一样的,照搬
配置如下:
{
xtype:'steelfield'
,type:'combogrid'
,fieldLabel:'下拉列表'
,name:'steelcombo1111'
,displayField : 'functionName'
,valueField : 'functionId'
//这个不是必须的-当要用到影藏列时,可以单独定义
,fields:[
'functionId', 'functionName', 'parent', 'type', 'sort', 'status'
]
,columns:[
{dataIndex:'functionId', header:'ID' ,sortable:true }
,{dataIndex:'functionName', header:'功能名称',sortable:true }
,{dataIndex:'parent', header:'父节点' ,sortable:true }
,{dataIndex:'type', header:'类型' ,sortable:true}
,{dataIndex:'status', header:'状态' ,sortable:true }
,{dataIndex:'sort', header:'排序' ,sortable:true}
]
,paging:true
,url:'Function/list'
},
源码如下:
/**
*
* 部分特定配置方法如下(其他的和ComboBox一样):
* ------------------------------------------
* 如果需要对grid有特殊的配置,请使用 gridCfg 配置项
* url: [必须] 数据源url
* columns:[必须] grid的cm
* displayField : [必须] 显示对应的列 默认为 text
* valueField : [必须] 值对应的列 默认为 value
* paging: [可选] 是否分页 默认false不分页
* fields: [可选] store的数据列、默认是根据columns的dataIndex构造出了的
* ------------------------------------------
* @class Ext.SteelComboGrid
* 依赖:Ext.SteelGridPanel 、 Ext.SteelGridSearchField
* @extends Ext.form.ComboBox
*/
Ext.SteelComboGrid = Ext.extend(Ext.form.ComboBox, {
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 : '95%',
displayField : 'text',
valueField : 'value',
tpl : '',
selectedClass : '',
onSelect : Ext.emptyFn,
loadingText: Steel.LOADINGTEXT,
grid: null,
/**
* grid的配置参数【可选】
* @type
*/
gridCfg:{},
url: '',
//grid 的 Store
store1:null,
paging:false,
fields: [],
columns: [],
initComponent : function() {
Ext.SteelComboGrid.superclass.initComponent.call(this);
var me = 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.store1 = new Ext.data.JsonStore({
url:this.url,
root:Steel.JSONSTORE_ROOT,
totalProperty:Steel.JSONSTORE_TOTALPROPERTY,
fields:this.fields
});
this.listWidth = 500;
this.maxHeight = 300;
/* this.grid = new Ext.grid.GridPanel({
border: false,
ds : this.store1,
columns : this.columns,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
title : '',
height : 300,
bbar : this.paging ?
new Ext.PagingToolbar({
pageSize : Steel.PAGESIZE,
store : this.store1,
displayInfo : true
})
:null
});*/
this.grid = new Ext.SteelGridPanel(Ext.apply({
title: ''
,border: false
,height : 300
,paging: this.paging
,searchField:'local'
,store: this.store1
,colModel:new Ext.grid.ColumnModel(this.columns)
},this.gridCfg));
this.grid.on('rowclick', function(grid, rowIndex, e) {
var r = me.store1.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.on('expand', function() {
me.grid.render('steel-'+me.getId());
if(me.store1.getCount() == 0){
me.grid.doLoad();
}
});
this.onViewClick = function(doFocus){};
/* this.itemSelector = 'tr.item';
var t ='<table border=0 class="">'+
'<tpl for=".">'+
'<tr class="item">';
Ext.each(this.fields, function(f){
t += '<td>{'+(f.name ? f.name : f)+'}</td>';
});
t += '</tr>' +
'</tpl>'+
'</table>';
this.tpl = new Ext.XTemplate(t);*/
}
,getStore : function(){
return this.store1;
}
,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.store1.getCount() > 0){
this.store1.each(function(r){
if(r.data[prop] == value){
record = r;
return false;
}
});
}
return record;
}
});
Ext.reg('steelcombogird', Ext.SteelComboGrid);
- 大小: 110.2 KB
分享到:
相关推荐
自封装ESXi-6.7.0-20201004001-standard-customized.iso
pads layout LQFP-48 封装尺寸图ST-48,详细,数据齐全,是LQFP-48 封装尺寸图ST-48好资料
vue之封装自己的日历组件-高级篇视频 封装自己的组件
ASP-134486-01 AD封装ASP-134486-01 AD封装ASP-134486-01 AD封装ASP-134486-01 AD封装ASP-134486-01 AD封装ASP-134486-01 AD封装ASP-134486-01 AD封装ASP-134486-01 AD封装ASP-134486-01 AD封装ASP-134486-01 AD封装...
AltiumDesigner超级PCB封装库-----三D元件库
中兴PCB元件封装库命名规范-IPC7351
PCB设计 SCN-2-19 AD封装PCB设计 SCN-2-19 AD封装PCB设计 SCN-2-19 AD封装PCB设计 SCN-2-19 AD封装PCB设计 SCN-2-19 AD封装PCB设计 SCN-2-19 AD封装PCB设计 SCN-2-19 AD封装PCB设计 SCN-2-19 AD封装PCB设计 SCN-2-19...
struts封装jar包-----实现验证码
1、后台管理系统用到的表格、分页很多,所以不能每个页面都写一次,通过组件通讯方式封装 2、项目选型:vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧,了解 核心原理。全文极简备注...
ESXI7.0.2,已封装Intel I219-V 1225 网卡驱动
微信小程序海报组件封装,实用的小程序组件mini-poster-master.zip
MINI MICRO A型B型D型USB封装库USB type-c母座 AD元件库PCB封装库USB封装大全,PcbLib后缀文件,共计 45个封装文件,可以直接应用到你的项目设计中。 封装型号列表如下: TE_TYPE-C _CUI_UJ31-CH-G2-SMT-TR_UJ31-CH-...
18-7 TDBLookupListBox与TDBLookupComboBox组件 18-8 TDBNavigator组件 18-9 TDBGrid组件 第19章 设计Delphi数据库报表 19-1 设计报表的基本观念 19-1-1 报表的组成 19-1-2 报表的主体组件——TquickRep 19...
tapestry4.02中封装ext的GridPanel组件
受最大上传文件大小限制,这套封装库分为5部分下载 2.00-SOP、SOIC封装.PcbLib 2.01-SO封装.PcbLib 2.02-SSOP封装.PcbLib 2.03-TSSOP封装.PcbLib 2.04-MSOP-0.65mm封装.PcbLib 2.05-ESOP贴片封装.PcbLib 2.06...
LQFP-64 封装尺寸图 ST-64-2 很全很详细
vue与element-ui和iview-ui结合grid布局封装万能的表单grid布局,含i18n和国际化
TYPE-C-31-M-02 USB Type-c allegro封装 韩荣HRo TYPE-C-31-M-02 规格:10mm*9.65mm 插拔力:5-20N 类型:TYPE-C母座 品名:TYPE-C母座 TYPE-C母座技术参数: 1.额定负荷: DC 40V 2.5A 2.接触电阻: ≤40mΩ 3.绝缘阻抗:...
HCPL-0630封装(AD封装/Altium Designer封装),Small-Outline SO-8 封装