扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示

  本示例通过配置tpl参数,增加ext4.1的Ext.ux.form.ItemSelector要显示的内容。默认Ext.ux.form.ItemSelector只能显示一个配置的值,通过对Ext.ux.form.ItemSelector和Ext.ux.form.MultiSelect的修改,传递tpl参数实现自定义显示。效果如下,增加了value的显示。

扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示

  扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示步骤如下

1)在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) {
            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();
    }
}); 
/**
 * A control that allows selection of multiple items in a list
 */
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', 'Ext.view.MultiSelectDisplayValue'],//注意这里增加新组件的引用
    
    uses: ['Ext.view.DragZone', 'Ext.view.DropZone'],
    
    layout: 'fit',
/*....原来的其他代码*/);

2)修改MultiSelect.js同文件中Ext.ux.form.MultiSelect对象的setupItems方法,创建对象为新定义的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));*/
//原来的代码使用Ext.view.BoundList显示,改为新定义的对象
        me.boundList = Ext.create('Ext.view.MultiSelectDisplayValue',{
            deferInitialRefresh: false,
            multiSelect: true,
            store: me.store,
            displayField: me.displayField,
            valueField: me.valueField,
            tpl:me.tpl,//注意传递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
        };
    }

3)修改Ext.ux.form.ItemSelector,传递tpl参数给Ext.view.MultiSelectDisplayValue

    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,/////////
            disabled: me.disabled,
            listeners: {
                boundList: {
                    scope: me,
                    itemdblclick: me.onItemDblClick,
                    drop: me.syncValue
                }
            }
        });
    }

4)下面的使用方法

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cell Editing Grid Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    <link rel="stylesheet" type="text/css" href="../ux/css/ItemSelector.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>
    <script>
        Ext.Loader.setConfig({ enabled: true });
        Ext.Loader.setPath('Ext.ux', '../ux');
        Ext.require(['Ext.selection.CellModel', 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*', 'Ext.form.*', 'Ext.ux.form.ItemSelector']);
        Ext.onReady(function () {
            itemselector = Ext.create("Ext.ux.form.ItemSelector", {
                id: "test",
                height: 300,
                width: 400,
                displayField: 'name',
                valueField: 'id',
//特别说明:在传递tpl的时候,直接调用this,this其实为window,并不是实例对象本身,所以获取对象默认的样式比较麻烦,除非知道默认的ext样式,就可以直接tpl: Ext.create("Ext.XTemplate", "模板内容包含样式的")
//所以传递字符的模板,样式用特殊内容代替,在创建的时候动态替换掉样式的特殊内容为ext默认的样式
                tpl: '<ul><tpl for="."><li role="option" class="<class>">{name}[{id}]</li></tpl></ul>',
                renderTo: document.body,
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [{ id: "showbo", name: "web开发网" }, { id: "1", name: "name1" }, { id: "2", name: "name2"}]
                })
            });
        });
</script>
</head>
<body>
</body>
</html>

 


原创文章,转载请注明出处:扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示

评论(0)Web开发网
阅读(771)喜欢(0)extjs开发技巧