ext4中的插件itemselector实现自定义显示

先看看下面的一些主要代码，显示的结果和我原本想要的结果是不一样的，想要知道该如何来修改，如下面的代码是实现的效果：
{
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'],

此文由Web开发之答疑解惑源www.znjcx.com整理，若需转载，请注明原文出处：http://www.znjcx.com/html/y2012/3564_itemselector-ext4-plug-in-implements-a-custom-show.html，谢谢！