使用ExtJS 4在tabpanel内创建数据视图

时间:2013-06-04 10:08:54

标签: extjs4 dataview

我正在尝试在tapanel中渲染数据视图。

http://jsfiddle.net/fU9De/93/

Ext.define('App.ImageView', {
    extend:'Ext.panel.Panel',
    alias:'widget.imageview',
    id: 'images-view',
    frame: true,
    collapsible: true,
    width: 535,
    renderTo: 'dataview-example',
    title: 'Simple DataView (0 items selected)',
    items: Ext.create('Ext.view.View', {
        store: store,
        tpl: new Ext.XTemplate( 
            '<tpl for=".">',
                '<div class="x-item x-title">{name}</div>',
                '<tpl for="children">',
                    '<div class="x-item x-item-child">{name}</div>',
                '</tpl>',
            '</tpl>'
        ),
        multiSelect: true,
        height: 310,
        trackOver: true,
        overItemCls: 'x-item-over',
        itemSelector: '.x-item',
        emptyText: 'No images to display',

        onItemSelect: function(record) {
            var node = this._selectedNode; //this.getNode(record);

            if (node) {
                Ext.fly(node).addCls(this.selectedItemCls);
            }
        },

        onItemDeselect: function(record) {
            var node = this._deselectedNode; //this.getNode(record);

            if (node) {
                Ext.fly(node).removeCls(this.selectedItemCls);
            }
        },

        processItemEvent: function(record, item, index, e) {
            console.log(e.type);
            if (e.type == "mousedown" && e.button == 0) {
                this._deselectedNode = this._selectedNode;
                this._selectedNode = item;
            }
        },

        updateIndexes : function(startIndex, endIndex) {
            var ns = this.all.elements,
                records = this.store.getRange(),
                i, j;

            startIndex = startIndex || 0;
            endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
            for(i = startIndex, j = startIndex - 1; i <= endIndex; i++){
                if (!Ext.fly(ns[i]).is('.x-item-child')) {
                    j++;
                }

                ns[i].viewIndex = i;

                ns[i].viewRecordId = records[j].internalId;
                if (!ns[i].boundView) {
                    ns[i].boundView = this.id;
                }
            }
        }
    })
});    

`Ext.create('Ext.tab.Panel',{     宽度:400,     身高:400,     renderTo:document.body,     项目:[{         标题:'Foo',xtype:'imageview'     },{         标题栏',         tabConfig:{             标题:'自定义标题',             工具提示:'按钮工具提示'         }     }] });

ImageModel = Ext.define('ImageModel', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'name'},
       {name: 'children'}
    ]
});


var store = Ext.create('Ext.data.Store', {
    model: 'ImageModel',
    data: [
        {
            id: 1,
            name: 'Parent #1',
            children: [ { id: 11, name: 'Child 1.1' }, { id: 12, name: 'Child 1.2' }]
        },
        {
            id: 2,
            name: 'Parent #2',
            children: [ { id: 21, name: 'Child 2.1' }, { id: 22, name: 'Child 2.2' }]
        }
    ]
});`

问题是数据视图未呈现。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

看看你正在做的事情的顺序。您可以在类定义期间将商店分配给面板,然后再分配。你基本上是这样做的:

var x;
var y = x + 1;
x = 3;
// Why isn't y 4?