javascript - ListItem 的 items 属性的 XTemplate 定义

Question

我正在使用 Sencha 2.3.0，并且我希望在 ListItem 上的组件(文本字段)上有一个并排的 XTemplate。上面的代码适用于 DataView/DataItem，但我想使用仅在 List/ListItem 上可用的分组属性。

嵌套的 Xtemplate 可以很好地呈现为 DataItem。我怎样才能让它适用于 ListItem？我也接受删除此嵌套结构并直接在 ListItem 上使用 xtemplate 作为 tpl 属性的解决方案(当然，还必须实现带有监听器的文本字段)。

列表

Ext.define( 'app.view.myList', {
    //extend: 'Ext.dataview.DataView',
    extend: 'Ext.dataview.List',

    xtype: 'mylist',

    requires: [
        'app.view.MyItem'
    ],

    config: {
        title: "myTitle",
        cls: 'mylist',
        defaultType: 'myitem',
        grouped: true,
        store: 'myStore',
        useComponents: true,
        itemCls: 'myitem',

        items: [
            {
                // some components
            }
        ]
    }
});

列表项

Ext.define( 'app.view.myItem', {

    //extend: 'Ext.dataview.component.DataItem',
    extend: 'Ext.dataview.component.ListItem',
    xtype: 'myitem',

    config: {
        cls: 'myitem',

        items: [
            {
                xtype: 'component',
                tpl: new Ext.XTemplate([
                        '<table cellpadding="0" cellspacing="0" class="myitemXTemplate">',
                            //some xtemplate content
                        '</table>'
                    ].join( "" ),
                    {
                        compiled: true
                    })
            },

            {
                label: 'some label',
                cls : 'myitemtextfield',
                xtype: 'textfield',
                name: 'myitemtextfield'
             }
        ]
    }
});

提前致谢!

Answer 1

修改/touch-2.4.2/examples/list/index.html

模型:

Ext.define('model1', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'firstName', type: 'string'},
            {name: 'lastName', type: 'string'}
        ]
    }
});

自定义列表项

Ext.define('DataItem', {
extend: 'Ext.dataview.component.ListItem',
        xtype: 'basic-dataitem',
        requires: [
                'Ext.Button',
                'Ext.Component',
                'Ext.layout.HBox',
                'Ext.field.Checkbox'
        ],
        config: {
        dataMap : {
       /* getFirstname : {
         setData : 'firstName'

         },*/
        getLastname : {
        setValue : 'lastName'
        }
        },
                layout: {
                type: 'hbox',
                        height:'200px',
                },
                firstname: {
                cls: 'firstname',
                        xtype:'component',
                        data:{data:'hej'},
                        tpl: new Ext.XTemplate([
                                '<H1>',
                                '{data}',
                                '</H1>'
                        ].join(""),
                        {
                        compiled: true
                        })

                },
                lastname: {
                xtype:'textfield',
                css:'lastname'



                }

        },
        applyFirstname : function (config) {
            return Ext.factory(config, Ext.Component, this.getFirstname());
        },
        updateFirstname : function (newName) {
            if (newName) {
                this.add(newName);
            }
        },
        applyLastname : function (config) {
            return Ext.factory(config, Ext.Component, this.getLastname());
        },
        updateLastname : function (newAge) {
            if (newAge) {
                this.add(newAge);
            }
        },
        applyFirstName: function (config) {
            return Ext.factory(config, 'Ext.Component', this.getLastname());
        },
        updateRecord: function(record) {     
        if (!record) {
            return;
        }


        this.getFirstname().setData({data:record.get("firstName")});
        this.callParent(arguments);

    }
        });

商店

var store = Ext.create('Ext.data.Store', {
        //give the store some fields
        model: 'model1',
        //filter the data using the firstName field
        sorters: 'firstName',
        //autoload the data from the server
        autoLoad: true,
        //setup the grouping functionality to group by the first letter of the firstName field
        grouper: {
            groupFn: function (record) {
                return record.get('firstName')[0];
            }
        },
        //setup the proxy for the store to use an ajax proxy and give it a url to load
        //the local contacts.json file
        proxy: {
            type: 'ajax',
            url: 'contacts.json'
        }
    });

列表

 xtype: 'list',
            useSimpleItems: false,
            defaultType: 'basic-dataitem',
            id: 'list',
            ui: 'round',     
            //bind the store to this list
            store: store