ListItem 的 items 属性上的 XTemplate 定义

Posted 2023-02-25

【中文标题】ListItem 的 items 属性上的 XTemplate 定义

【英文标题】：XTemplate definition on items property of a ListItem

【发布时间】：2015-09-30 08:56:59

【问题描述】：

我正在使用 Sencha 2.3.0，我希望 XTemplate 与 ListItem 上的组件（文本字段）并排放置。上面的代码适用于 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'
             
        ]
    
);

提前致谢！

【参考方案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

【讨论】：

感谢您的代码-那里没有太多解释；）尝试像您的示例中那样做-有点困难。它适用于文本字段组件，但不会呈现 ListItem 上的 XTemplate。