0

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>
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 に答える