0

我正在尝试从存储中获取数据。我想在 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>
4

2 回答 2

2

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

Ext.create("Ext.grid.Panel", { hideHeaders: true, columns: [ ... ], ... 其他选项 ... });

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

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

于 2012-10-15T20:24:36.410 回答
1

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

例子：

Ext.application({ name: '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，但绑定数据更复杂。

于 2012-10-14T09:02:17.613 回答