Question

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

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' }]
        }
    ]
});`

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

Answer 1

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

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

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

1 个答案: