Extjs GridPanel 中放入 Combox显示问题
http://weijun8611-126-com.iteye.com/blog/566201
在项目中使用了extjs的editorgridpanel,但是其中的combobox在选择了相应的选项后,grid中显示的是值域(valueField)的值,而非意愿中的显示域(displayField)的值,经过一些搜索和尝试后找到了一个比较好的解决方法——在定义带combobox的列时配置其renderer的属性。
var assistItemStore = new Ext.data.JsonStore({
url:'assist.do',
baseParams:{
m : 'listAllLike',
shopid: shopid ,
subid: subid
},
root:'items',
fields:[{
name:'aux_name',
mapping:'assistName'
},{
name:'aux_id',
mapping:'assistid'
}]
});
header :'项目名称',
width :100,
dataIndex :'aux_id',
editor : new Ext.form.ComboBox({
autoLoad:true,
triggerAction : 'all',
selectOnFocus : true,
allowBlank : true,
editable: true,
displayField:'aux_name',
valueField:'aux_id',
minChars:1,
queryParam:'subname',
typeAhead: true,
store: assistItemStore
}),
renderer: function(value,metadata,record){
var index = assistItemStore.find('aux_id',value);
if(index!=-1){
return assistItemStore.getAt(index).data.aux_name;
}
return value;
}
这样写之后,选择之后grid中显示了displayField的值,但最初从数据库提取的值仍然显示valueField的值,原因是store的数据是远程取得的,在grid最初的render中还无法从store中查到相对应的displayField的值,于是打算用ajax异步取得displayField的值,但是异步的线程不造成阻塞,无法保证返回值之前能取得相应的数据.后来想出另一个方法,为grid增加一个隐藏列,存放对应的值,在最初提取数据时能够从中获取要显示的值.
header:'',
width:10,
dataIndex:'aux_name',
hidden:true
}, {
header :'项目名称',
width :100,
dataIndex :'aux_id',
editor : new Ext.form.ComboBox({
autoLoad:true,
triggerAction : 'all',
selectOnFocus : true,
allowBlank : true,
editable: true,
displayField:'aux_name',
valueField:'aux_id',
minChars:1,
queryParam:'subname',
typeAhead: true,
store: assistItemStore
}),
renderer: function(value,metadata,record){
var index = assistItemStore.find('aux_id',value);
if(index!=-1){
return assistItemStore.getAt(index).data.aux_name;
}
return record.get('aux_name');
}
下面记录一个树结构的表格处理方式
sortable: false,
text : '部位',
dataIndex : 'buweiid',
width: 150,
editor : combo,
renderer: function(value,metadata,record) {
if(combo.store.data.indexOfKey(value) != -1) {
return combo.store.data.get(value).raw.text;
}
return record.raw.buweitext;
}
Ext.define('APP.view.Trainbom.TreeGridList', {
extend : 'Ext.tree.Panel',
xtype : 'Trainbom_TreeGridList', columnLines : true, initComponent : function() {
var me = this; me.plugins = [ me.cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing') ];
var combo = Ext.create('APP.lib.DictionaryCombo', {
name: 'buweiid',
code: 'CODE_BUWEI'
}); Ext.apply(me, {
store : 'TrainbomStore',
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
containerScroll: true
}
},
columns : [ {
xtype : 'treecolumn',
sortable: false,
text : '机车类型',
dataIndex : 'traintype',
width: 150,
editor : {
xtype: 'NormalCombo',
name: 'traintype',
url: 'SysDictionaryController.do?method=selectListTrain',
selectOnFocus : true,
allowOnlyWhitespace : false
}
},{
sortable: false,
text : '12位编码',
dataIndex : 'materialcode',
width: 150,
editor : 'textfield'
},{
sortable: false,
text : '父编码',
dataIndex : 'parentmaterialcode',
width: 150,
editor : 'textfield'
},{
sortable: false,
text : '部件数量',
dataIndex : 'fullcount',
width: 100,
editor : 'numberfield'
},{
sortable: false,
text : '安装数量',
dataIndex : 'installcount',
width: 100,
editor : 'numberfield'
},{
sortable: false,
text : '部位',
dataIndex : 'buweiid',
width: 150,
editor : combo,
renderer: function(value,metadata,record) {
if(combo.store.data.indexOfKey(value) != -1) {
return combo.store.data.get(value).raw.text;
}
return record.raw.buweitext;
}
}]
}); me.callParent(arguments);
me.relayEvents(me.getStore(), ['load'], 'store');
me.on('beforeedit', me.handleBeforeEdit, me);
}, getSelecedRecordId : function() {
var record = this.getSelectionModel().getSelection()[0];
return record ? record.getId() : '';
}, getSelecedRecord : function() {
var record = this.getSelectionModel().getSelection()[0];
return record;
}, handleBeforeEdit : function(editingPlugin, e) {
if(e.record.get('id') == 'root') {
Ext.popup.Msg('提示信息', '字典跟节点不允许编辑');
return false;
}
return true;
}, refreshView: function() {
//this.getView().refresh(); //本地刷新
var tree = this;
//tree.setLoading(true, tree.body); //服务器端刷新
this.getStore().reload({mask:true});
}
});
Extjs GridPanel 中放入 Combox显示问题的更多相关文章
- Javascript - ExtJs - GridPanel组件
GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...
- Extjs GridPanel用法详解
Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPa ...
- Server:www121 Server:www120 Server:NWS_SP 内容被散列,并在响应中放入Etag When to Use Entity-Tags and Last-Modified Dates
1 Request URL:http://www.biyao.com/minisite/bzzx 2 Request Method:GET 3 Status Code:200 OK 4 Remote ...
- 在li元素中放入img图片时li的高度问题
在li元素中放入img图片时li的高度会比img图片的高度多出几个像素,解决这个问题只需要将img元素的css设置成vertical-align: middle;就可以解决.
- extjs gridpanel 操作行 得到选中行
extjs gridpanel 操作行 得到选中行的列 在Extjs 3.2.0上适合 var model = grid.getSelectionModel(); model.selectAll(); ...
- Eclipse的workspace中放入Ext JS卡死或OOM的解决方案
Eclipse的workspace中放入Ext JS卡死或OOM的解决方案 原因:是由于Ext JS 的所有的文件js验证 方法一:关于Eclipse解决Ext JS卡死方案: 打开Eclipse的w ...
- 基本操作——word中怎样同一页中放入多张图片
可能很多人在放图片时候,碰见这种情况,习惯性的把图片拖进word,发现不能在一页上很工整的排列.很多人包括我刚开始也纳闷,怎么不能一页中放入几张图片呢,缩放也不想.下面分享一个小技巧给有缘人 以我的w ...
- C语言:根据形参c中指定的英文字母,按顺序打印出若干后继相邻字母,-主函数中放入一个带头节点的链表结构中,h指向链表的头节点。fun函数找出学生的最高分-使用插入排序法对字符串中的字符进行升序排序。-从文件中找到指定学号的学生数据,读入次学生数据,
//根据形参c中指定的英文字母,按顺序打印出若干后继相邻字母,输出字母的大小与形参c一致,数量由形参d指定.例如:输入c为Y,d为4,则输出ZABC. #include <stdio.h> ...
- G4Studio+extjs+highcharts 下在ext4j的panel中放入hightCharts图表
在G4Studio+extjs下.创建一个panel,然后将highCharts图表放入panel中.实现方法例如以下: 首先简单给出的部分代码: Ext.onReady(function() { v ...
随机推荐
- (顺序表应用5.1.1)POJ 3750 小孩报数问题(基本的约瑟夫环问题:给出人数n,出发位置w,间隔数s)
/* * POJ_3750.cpp * * Created on: 2013年10月30日 * Author: Administrator */ #include <iostream> # ...
- CAS lock-free
转:http://www.cnblogs.com/lucifer1982/archive/2009/04/08/1431992.html http://en.wikipedia.org/wiki/Co ...
- xcode 调试程序 lldb 使用
xcode 调试程序 lldb 使用 一:lldb是什么 https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/g ...
- ajax local.href不跳转的原因之一
ajax local.href不跳转的原因之一 打开F12发现一直报 next.html is not a function…… 后来发现next少了(),看得我尴尬症都犯了
- JUnit 3.8 演示递归删除文件目录的 测试类程序 .
用递归方式来实现删除硬盘的文件或目录(空文件夹) 首先要找到递归的入口及出口,这点很重要,成败在此,呵呵! 代码实现: import java.io.File ; class RecursionDel ...
- Learning English From Android Source Code:1
英语在软件行业的重要作用不言自明,尤其是做国际项目和写国际软件,好的英语表达是项目顺利进行的必要条件.纵观眼下的IT行业.可以流利的与国外客户英文口语交流的程序猿占比并非非常高.要想去国际接轨,语言这 ...
- 有关索引的DMV(转)
转自:http://www.cnblogs.com/CareySon/archive/2012/05/17/2505981.html 1.查看那些被大量更新,却很少被使用的索引 SET TRANSAC ...
- 【BIRT】01_在win10上安装BIRT
环境:windows 10 64位 安装文件:链接:https://pan.baidu.com/s/1vYGbB0D1QeQ923oIIdoI9Q 密码:qcde 说明:安装文件也可以自己去官网下载, ...
- iOS开发-代码片段(Code Snippets)提高开发效率
简介 在 XCode4 引入了一个新特性,那就是“代码片段(Code Snippets)”.对于一些经常用到的代码,抽象成模板放到 Code Snippets 中,使用的时候就只需要键入快捷键就可以了 ...
- ubuntu安装五笔输入法(ibus-table-wubi)
IBus-Table是为基于码表的输入法即所谓的形码开发的输入法框架,常见的形码有郑码.五笔.仓颉.二笔等. 安装如下: # apt-get install ibus-table-wubi 开 ...