{
xtype: "itemselector",
name: "itemselectorList",
id: "itemselectorList",
height: 400,
store: Ext.create('Ext.data.Store',{
fields: ['id', 'name'],
data: [{id: "1", name: "name1"}, {id: "2", name: "name2"}]
}),
displayField: "name",
valueField: "id",
// listConfig:
// {
// getInnerTpl: function()
// {
// return "<div data-qtip='{id}'>{name}{id}</div>";
// }
// },
fromTitle: "fromTitle",
toTitle: "toTitle"
}
这样会显示的列表是:name1
name2
我想要把id也显示出来,即:
name1(1)
name2(2)
我要怎么写呢?
我改成了下面的这个样子,也还是没有任何效果,想要知道如何来写。
// listConfig:
// {
// getInnerTpl: function()
// {
// return “<div data-qtip=’{id}’>{name}({id})</div>”;
// }
// },
要解决这个问题,需要通过修改源代码来实现,新建一个Ext.view.BoundList的扩展Ext.view.MultiSelectDisplayValue,通过tpl来实现带value的显示即可。在ext的examples\ux\form中找到MultiSelect.js,主要修改这个文件,再顶部定义Ext.view.MultiSelectDisplayValue
JScript code:
Ext.define('Ext.view.MultiSelectDisplayValue', {
extend : 'Ext.view.BoundList',
// alias : 'widget.multiselectdisplayvalue',
// alternateClassName : 'Ext.MultiSelectDisplayValue',
initComponent: function() {
var me = this;
if (!me.tpl) {
alert(me.displayField+'-'+me.valueField)
me.tpl = new Ext.XTemplate(
'<ul><tpl for=".">',
'<li role="option" class="' + me.itemCls + '">'
+ me.getInnerTpl(me.displayField)
+'('+me.getInnerTpl(me.valueField)+')'
+ '</li>',
'</tpl></ul>');
} else if (Ext.isString(me.tpl)) {
me.tpl = Ext.create('Ext.XTemplate', me.tpl);
}
me.callParent();
}
});
然后找到setupItems配置方法,修改创建Ext.view.BoundList为Ext.view.MultiSelectDisplayValue就好了
JScript code:
setupItems: function() {
var me = this;
/* me.boundList = Ext.create('Ext.view.BoundList', Ext.apply({
deferInitialRefresh: false,
border: false,
multiSelect: true,
store: me.store,
displayField: me.displayField,
disabled: me.disabled
}, me.listConfig));*/
me.boundList = Ext.create('Ext.view.MultiSelectDisplayValue', {
deferInitialRefresh: false,
multiSelect: true,
store: me.store,
displayField: me.displayField,
valueField: me.valueField,
border: false,
disabled: me.disabled
});
me.boundList.getSelectionModel().on('selectionchange', me.onSelectChange, me);
return {
border: true,
layout: 'fit',
title: me.title,
tbar: me.tbar,
items: me.boundList
};
}
此外,还有一个地方要修改,增加的Ext.view.MultiSelectDisplayValue引用,如下:
Ext.define('Ext.ux.form.MultiSelect', {
extend: 'Ext.form.FieldContainer',
mixins: {
bindable: 'Ext.util.Bindable',
field: 'Ext.form.field.Field'
},
alternateClassName: 'Ext.ux.Multiselect',
alias: ['widget.multiselectfield', 'widget.multiselect'],
requires: ['Ext.panel.Panel', 'Ext.view.BoundList', 'Ext.layout.container.Fit'],
uses: ['Ext.view.DragZone', 'Ext.view.DropZone','Ext.view.MultiSelectDisplayValue'],