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>";
//             }
//         },

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我用模板tpl也不行，
        tpl: new Ext.XTemplate(
                                  '<tpl for=".">',
    '<div>',
'{name}{id}',
    '</div>',
  '</tpl>'
)理论上来说，应该可以实现自定义显示的，这问题到底出在哪里呢？有兴趣的同学一起来思考下啊，不大会也没关系，也可以发表些自己的想法，共同进步
这篇博文：
http://w26.iteye.com/blog/1441248
实例了itemselector的扩展功能，感觉应该从里边，能找到答案，限于水平，我只想到用模板，但居然没效果，思想暂时没有了，各位高人有兴趣也可以看下这篇扩展的博文，希望能给点好的建议或实现方法
通过修改源代码来实现，按照那篇文章新建一个Ext.view.BoundList的扩展Ext.view.MultiSelectDisplayValue，通过tpl来实现带value的显示即可。。在ext的examples\ux\form中找到MultiSelect.js，主要修改这个文件再顶部定义Ext.view.MultiSelectDisplayValue
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就好了
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'],
灰常感谢，ext不知道什么时候能有你这样的水准啊
好好努力了，结了。
你要学好js基础，看代码就快了。。没js基础直接上手框架还是比较麻烦的
说的有道理
本题中，今天我发现一个小问题啊，不知道怎么解决，就是，你给我的代码有误导性，默认把我想要的格式给定死了，即name(id)
我于是在前面使用模板，居然没效果，（还以为有效果，之前没在注意）
比如，我现在想改写为：name[id]格式的，我不能再在源代码中改啊，这样通用性太差了
于是我在前边这样用：
{
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",
         tpl: Ext.create("Ext.XTemplate",
            '<ul><tpl for=".">',
            '<li role="option" class="' + this.itemCls + '">'
                    + me.getInnerTpl(me.displayField)
                    +'['+me.getInnerTpl(me.valueField)+']'
                    + '</li>',
            '</tpl></ul>'),
fromTitle: "fromTitle",
toTitle: "toTitle"
}相当于：
         tpl: Ext.create("Ext.XTemplate",
            '<ul><tpl for=".">',
            '<li role="option" class="' + this.itemCls + '">'
                    + me.getInnerTpl(me.displayField)
                    +'['+me.getInnerTpl(me.valueField)+']'
                    + '</li>',
            '</tpl></ul>'),
这个配置写在前边还是没效果，有空再帮忙解决下啊，谢了
上面的那个tpl放在前边有语法错误，只是示例，
放在前面的正确写法应该是： tpl: Ext.create("Ext.XTemplate",
'<ul><tpl for=".">',
'<li role="option" class="' + this.itemCls + '">'
+'{text}[{value}] +
+ '</li>',
'</tpl></ul>'),可是依然无效果，我看了下源码，发现里边没有tpl配置项，
于是我加了：tpl: '',进去，
但是，依然无效
我在MultiSelectDisplayValue中的initComponent，alert(me.tpl),发现，此值为‘’，即为空，如果我没加tpl:'',进去，则此值为undefind,即，怎么都取不到初始化中的tpl值，因此，模板不起效果。
这怎么解决呢？
自己解决了，不认真啊，原来加错了地方了，应该在ItemSelector.js中，加入：tpl属性才行的，而不是加在Multiselect.js中
这个问题算是完美解决了，再次感谢showbo大侠的热心帮忙
ItemSelector.js没有传递tpl参数，MultiSelect.js也没有，所以需要改2个地方。。
ItemSelector.js
createList: function(title){
        var me = this;        return Ext.create('Ext.ux.form.MultiSelect', {
            submitValue: false,
            flex: 1,
            dragGroup: me.ddGroup,
            dropGroup: me.ddGroup,
            title: title,
            store: {
                model: me.store.model,
                data: []
            },
            displayField: me.displayField,
            tpl:me.tpl,//////////传递tpl
            disabled: me.disabled,
            listeners: {
                boundList: {
                    scope: me,
                    itemdblclick: me.onItemDblClick,
                    drop: me.syncValue
                }
            }
        });
    },MultiSelect.js
    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,
            tpl:me.tpl,/////////
            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
        };
    },
不过模板的样式比较难确定，在创建的时候直接调用this时this其实为window，并不是实例对象本身，所以获取对象默认的样式比较麻烦，除非你做得到默认的样式，就可以直接tpl: Ext.create("Ext.XTemplate", "模板内容包含样式的")折中的办法就是传递字符的模板，样式用特殊内容代替，在创建的时候动态替换掉样式的特殊内容，如下
Ext.define('Ext.view.MultiSelectDisplayValue', {
    extend: 'Ext.view.BoundList',
    // alias : 'widget.multiselectdisplayvalue',
    // alternateClassName : 'Ext.MultiSelectDisplayValue',            initComponent: function () {
        var me = this;
        if (!me.tpl) {
            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.replace(/<class>/gi,me.itemCls));//替换其中的特殊样式内容为默认样式
        }        me.callParent();
    }传递的模板可以为：tpl: '<ul><tpl for="."><li role="option" class="<class>">{name}[{id}]</li></tpl></ul>'或者其他的显示样式});