ExtJS4 ItemSelector 扩张

ExtJS4 ItemSelector 扩展
ImageBoundList.js

Ext.define('Ext.view.ImageBoundList', {
			extend : 'Ext.view.BoundList',
			alias : 'widget.imageboundlist',
			alternateClassName : 'Ext.ImageBoundList',		
				
			initComponent: function() {
				var me = this;
				
				if (!me.tpl) {
					me.tpl = new Ext.XTemplate(
						'<ul><tpl for=".">',
						'<li role="option" class="' + me.itemCls + '">'
								+ '<img src="'
								+ me.getInnerTpl(me.imageField)
								+ '" align="top" />'
								+ me.getInnerTpl(me.displayField) + '</li>',
						'</tpl></ul>');
				} else if (Ext.isString(me.tpl)) {
					me.tpl = Ext.create('Ext.XTemplate', me.tpl);
				}

				me.callParent();
			}
			
		});

MultiSelect.js

 uses: [
        'Ext.view.ImageBoundList',
        'Ext.form.FieldSet',
        'Ext.ux.layout.component.form.MultiSelect',
        'Ext.view.DragZone',
        'Ext.view.DropZone'
    ],

...


/**
     * @cfg {String} displayField Name of the desired display field in the dataset (defaults to 'text').
     */
    displayField: 'text',
	
	/**
     * @cfg {String} imageField Name of the desired display field in the dataset (defaults to 'image').
     */
    imageField: 'image',

...

onRender: function(ct, position) {
        var me = this,
            panel, boundList, selModel;

        me.callParent(arguments);

        boundList = me.boundList = Ext.create('Ext.view.ImageBoundList', {
            deferInitialRefresh: false,
            multiSelect: true,
            store: me.store,
            displayField: me.displayField,
			imageField: me.imageField,
            border: false,
            disabled: me.disabled
        });

ItemSelector.js

onRender: function(ct, position) {
        var me = this,
            baseCSSPrefix = Ext.baseCSSPrefix,
            ddGroup = 'ItemSelectorDD-' + Ext.id(),
            commonConfig = {
                displayField: me.displayField,
                valueField: me.valueField,
		imageField: me.imageField,

multiselect-demo.js

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    'Ext.form.Panel',
    'Ext.ux.form.MultiSelect',
    'Ext.ux.form.ItemSelector'
]);

Ext.onReady(function(){
   
    var ds = Ext.create('Ext.data.ArrayStore', {
        data: [[123,'One Hundred Twenty Three', '../shared/icons/fam/cog.png'],
            ['1', 'One', '../shared/icons/fam/grid.png'], ['2', 'Two', '../shared/icons/fam/grid.png'], ['3', 'Three', '../shared/icons/fam/grid.png'], ['4', 'Four', '../shared/icons/fam/grid.png'], ['5', 'Five', '../shared/icons/fam/grid.png'],
            ['6', 'Six', '../shared/icons/fam/grid.png'], ['7', 'Seven', '../shared/icons/fam/grid.png'], ['8', 'Eight', '../shared/icons/fam/grid.png'], ['9', 'Nine', '../shared/icons/fam/grid.png']],
        fields: ['value','text', 'image'],
        sortInfo: {
            field: 'value',
            direction: 'ASC'
        }
    });

    /*
     * Ext.ux.form.ItemSelector Example Code
     */
    var isForm = Ext.widget('form', {
        title: 'ItemSelector Test',
        width: 700,
        bodyPadding: 10,
        renderTo: 'itemselector',
        items:[{
            xtype: 'itemselector',
            name: 'itemselector',
            id: 'itemselector-field',
            anchor: '100%',
            fieldLabel: 'ItemSelector',
            imagePath: '../ux/images/',
            store: ds,
            displayField: 'text',
            valueField: 'value',
			imageField: 'image',
            value: ['3', '4', '6'],
            allowBlank: false,
            msgTarget: 'side'
        }]
    });

});

效果: