-----------------------------------------------------------------------------------------------------------------------
声明一下下:
由于这些东西是我刚写好就贴上来的,没怎么详细的测试过,有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
分享到:
相关推荐
在给定的标题"封装ElementUI组件el-tree"中,我们聚焦于`el-tree`组件的封装,这通常是为了提高代码复用性、简化使用过程以及统一项目中的样式和行为。 `el-tree`是ElementUI中的树形控件,用于展示层次结构的数据...
- **组件模型**:EXT JS的核心是组件化,它将页面元素抽象为组件,每个组件都有自己的属性、事件和方法,可以灵活组合和扩展。 - **布局管理器**:EXT JS提供了多种布局方式,如Fit、Border、Form、Table等,适应...
- 其他尺寸细节:比如封装的倾斜角度(7°, 3.5°, 0°)和引脚共面性要求(0.10mm max); - 坐标和尺寸单位:尺寸均以毫米(mm)为单位。 由于给出的文件内容是通过OCR技术扫描得到,可能会有文字识别上的错误。...
基于naive-ui封装的一些组件navie-ui-formnaive-ui-uploadnaive-ui-table
### 中兴PCB元件封装库命名规范-IPC7351 #### 一、概述 本文档详述了中兴通讯股份有限公司发布的《印制电路板设计规范》中关于SMD(Surface Mount Devices,表面贴装元件)元器件封装库的尺寸要求与命名规范。该...
vue之封装自己的日历组件-高级篇视频 封装自己的组件
这个资源的全名揭示了它的主要功能和版本信息,即djorm-ext-pgfulltext库的0.4.0版本,封装在tar.gz压缩格式中。 djorm-ext-pgfulltext是一个专门为Python Django框架设计的扩展库,其核心目标是为Django应用程序...
Ext 框架的核心组件包括adapter、build、docs、examples、resources、source 等。adapter 负责将里面提供第三方底层库(包括 Ext 自带的底层库)映射为 Ext 所支持的底层库。build 是压缩后的 ext 全部源码。docs 是...
7. **封装组件**:在Vue中,组件是可复用的代码块,封装grid布局和表单意味着将这些通用功能抽象为独立的组件,可以提高代码的复用性和维护性。 通过这个项目,开发者不仅可以学习到如何利用Vue.js进行组件封装,还...
在给定的文件中,展示了如何利用Element UI库来封装`el-table`和`el-form`组件,这两个组件在管理系统的界面中非常常见,特别是用于数据展示和表单提交。 首先,我们关注`el-form`组件的封装。`el-form`用于创建...
TapingSOP封装是指通过带状包装的SOP封装组件,这种封装方式便于自动化装配线上的拾取和放置操作,提高了生产效率。 #### TO-92封装: **TO-92、TO-92L、TO-92M、TO-92NL、TO-92SP:** TO-92封装是一种常用的晶体...
例如,当用户通过前端提交代码更改时,后端可以利用`git_ext`来处理这些更改并更新远程仓库。 ### 总结 `git_ext-0.6.0-py2-none-any.whl`是一个面向Python 2的Git操作库,为开发者提供了一种更便捷的方式来处理...
总结来说,封装`el-pagination`为公用组件涉及的主要步骤有:创建新组件,引入并配置el-pagination,定义并接收props,处理事件,以及设置和使用语言包。通过这种方式,我们可以实现分页组件的复用,同时支持多语言...
"基于element组件库封装的动态表单组件"就是这样一个解决方案,它针对Vue3进行了优化,旨在帮助开发者更方便地创建和管理动态表单。 动态表单是一种能够根据数据结构自动生成表单的组件,通常用于处理复杂的表单...
今天,我们要探讨的是一个名为"abjad-ext-tonality"的Python库,它在PyPI(Python Package Index)官网上可以下载到的最新版本为3.0.0a0,封装在一个名为"abjad-ext-tonality-3.0.0a0.tar.gz"的压缩包中。...
ESXI7.0.2,已封装Intel I219-V 1225 网卡驱动
标题中的“h264封装flv-----flv-muxer”指的是将H.264编码的视频流封装到FLV(Flash Video)容器格式的过程。这个过程由一个名为“flv-muxer”的工具或程序来完成。在本文中,我们将深入探讨H.264编码、FLV容器格式...
在电子设备领域,接口是设备之间传输数据的关键部分。...因此,熟悉这两种接口的封装和3D模型对于硬件工程师来说是非常必要的。通过掌握这些知识,你可以更好地理解和设计符合现代需求的电子产品。