当前位置: 代码迷 >> Web前端 >> NestedList的item样式定做
  详细解决方案

NestedList的item样式定做

热度:890   发布时间:2014-03-01 00:36:59.0
NestedList的item样式定制
NestedList没有提供itemTpl属性,但实际上可以通过设置listConfig对元素的显示样式进行定制。如下:
Ext.define('Portal.view.Production', {
    extend: 'Ext.dataview.NestedList',

    requires: [
        'Ext.data.TreeStore'
    ],

    config: {
        id: 'production',
        hideOnMaskTap: true,
        backText: '返回',
        displayField: 'name',
        emptyText: '更多产品敬请期待……',
        store: 'Production',
        useSimpleItems: false,
        listConfig: {
            itemTpl: new Ext.XTemplate(
            '<table style="margin:0px;padding:0px" border=0><tr><td align="center"><tpl if="leaf == false"><div class="x-unsized x-list-disclosure" id="{id}" style="margin:0px 5px 10px 0px;float:left"></div><tpl elseif="images"><img style="margin:0px 10px 0px 0px" src="{[values.images.split(",")[0]]}" width="100px"></tpl></td><td align="left">{name}</td></tr></table>')
        },
        listeners: [
            {
                fn: 'onProductionListItemTap',
                event: 'itemtap'
            }
        ]
    },
  相关解决方案