Question

我正在尝试从store获取数据。我想在extjs面板中的表格布局中使用它，但总是得到一个空字符串，尽管数据是在控制台中打印的。任何指针都会非常感激。

<code>
        Ext.onReady(function(){ 
        Ext.define('Account', {
        extend: 'Ext.data.Model',
        fields: [
                    'id',
                    'name',
                    'nooflicenses'
                ]
                        });
                var store = Ext.create('Ext.data.Store', {
                    model: 'Account',
                    autoSync: true,
                    proxy: {
                            type: 'ajax',
                            api: {
                                   read: "accounts"
                                 },
                         reader: {
                                   type: 'json', 
                                   root: 'Account',
                                   successProperty: 'success',
                                   messageProperty: 'message',
                                   totalProperty: 'results',
                                   idProperty: 'id'
                                 },
                      listeners: {
                                  exception: function(proxy, type, action, o, result, records) {
                                 if (type = 'remote') {
                                    Ext.Msg.alert("Could not ");
                                      } else if (type = 'response') {
                                        Ext.Msg.alert("Could not " + action, "Server's response could not be decoded");
                                        } else {
                                        Ext.Msg.alert("Store sync failed", "Unknown error");}
                                                }
                                 }//end of listeners
                             }//end of proxy
                        }); 
                            store.load();
                                               store.on('load', function(store, records) {
                                for (var i = 0; i < records.length; i++) {
                                 console.log(store.data.items[0].data['name']); //data printed successfully here
                                 console.log(store.getProxy().getReader().rawData);
                                 console.log(store);
                                };
                            });


            function syncStore(rowEditing, changes, r, rowIndex) {
                store.save();
            }

            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            autoCancel: false,
            saveText: 'Save',
            listeners: {
                        afteredit: syncStore
                       }
            });

            var grid = Ext.create('Ext.panel.Panel', {
            title: 'Table Layout',
            width: 500,
            height:'30%',
            store: store,
            layout: {
                type: 'table',
                // The total column count must be specified here
                columns: 2,
                tableAttrs: {
                style: {
                    width: '100%',
                    height:'100%'
                }
                },
                tdAttrs: {
                style: {
                     height:'10%'
                }
                }

            },
            defaults: {
                // applied to each contained panel
                bodyStyle:'border:0px;',
                xtype:'displayfield',
                labelWidth: 120
            },
            items: [{
                fieldLabel: 'My Field1',
                name :'nooflicenses',
                value: store //How to get the data here
                //bodyStyle:'background-color:red;'
            },{
                fieldLabel: 'My Field',
                name:'name',
                value:'name'
            }],
            renderTo: document.getElementById("grid1")
        });
    });

</code>

Answer 1

Ext.grid.Panel控件是完全可配置的，因此它允许隐藏网格的不同部分。在我们的例子中，隐藏标题的方法是添加属性：hideHeaders：

Ext.create（“Ext.grid.Panel”，{ hideHeaders：是的，列： [ ... ]， ......其他选择...... }）;

如果您仍想采用其他解决方案，我想到的更复杂的解决方案是使用XTemplate动态构建表。（http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate）。在这种方法中，您编写了描述如何构建表的模板。

否则，我仍然建议你处理前一个解决方案而不是后一个解决方案。后一种方法反对Sencha ExtJS的基本思想：使用ExtJS库的小部件，以最灵活的方式定制它们，然后通过创建商店和模型来自动化它们。

Answer 2

显示数据的最“本地”方式是使用Ext.grid.Panel。

示例：

Ext.application（{ 名称：'LearnExample'，

launch: function() {
    //Create Store
    Ext.create ('Ext.data.Store', {
        storeId: 'example1',
        fields: ['name','email'],
        autoLoad: true,
        data: [
            {name: 'Ed',    email: 'ed@sencha.com'},
            {name: 'Tommy', email: 'tommy@sencha.com'}
        ]
    });

    Ext.create ('Ext.grid.Panel', {
        title: 'example1', 
        store: Ext.data.StoreManager.lookup('example1'),
        columns: [
            {header: 'Name', dataIndex: 'name', flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ],
        renderTo: Ext.getBody()
    });
}

}）;

可以按照主要根据用户需求定制的方式配置网格。

如果您有特定的理由将Ext.panel.Panel与表格布局一起使用，则可以使用XTemplate，但绑定数据会更复杂。

无法从extjs 4中的表布局中获取存储数据

2 个答案: