0

ExtJS を使用して、各セルにリンクを持つタブ パネルにグリッドを作成しています。複数のリンクがある場合は、必要なときに行が広くなるように、行を拡張する必要があります。

4.1.1例 ( )の「可変高さの行を使用したバッファー スクロール」の例に取り組んでいますvar-height-row.js。私のデータで動作させることができないようです。グリッドは表示されていますが、どの行も表示されていません。誰かが私が間違っていることを教えてくれたら、大歓迎です!

私が得ているエラーメッセージrecordsはundefined、コードの終わり近くで呼び出されます。

コードスニペット

 var detailStore;
 var detailGrid;
 var MON = 'Monday';
 var TUE = 'Tuesday';
 var WED = 'Wednesday';
 var THU = 'Thursday';
 var FRI = 'Friday';
 var SHIFT = 'shift';

 Ext.define('Location', {
     extend: 'Ext.data.Model',
     fields: [{
             name: SHIFT
         }, {
             name: MON
         }, {
             name: TUE
         }, {
             name: WED
         }, {
             name: THU
         }, {
             name: FRI
         },
         'rowHeight'
     ]
 });

 function LoadDetailsGrid() {
     // create the Data Store
     detailStore = Ext.create('Ext.data.Store', {
         id: 'detailStore',
         pageSize: 50000,
         // allow the grid to interact with the paging scroller by buffering
         buffered: true,
         // never purge any data, we prefetch all up front
         purgePageCount: 0,
         model: 'Location',
         proxy: {
             type: 'memory'
         }
     });

     detailGrid = Ext.create('Ext.grid.Panel', {
         width: 700,
         height: 500,
         title: 'Weekly Detail',
         store: detailStore,
         verticalScroller: {
             variableRowHeight: true
         },
         loadMask: true,
         selModel: {
             pruneRemoved: false,
             selectionMode: 'MULTI'
         },
         viewConfig: {
             trackOver: false
         },
         // grid columns
         columns: [{
             flex: 1,
             sortable: true,
             width: 300,
             dataIndex: SHIFT
         }, {
             text: MON,
             width: 125,
             sortable: false,
             dataIndex: MON
         }, {
             text: TUE,
             width: 125,
             sortable: false,
             dataIndex: TUE
         }, {
             text: WED,
             width: 125,
             sortable: false,
             dataIndex: WED
         }, {
             text: THU,
             width: 125,
             sortable: false,
             dataIndex: THU
         }, {
             text: FRI,
             width: 125,
             sortable: false,
             dataIndex: FRI
         }],
         renderTo: detailGridDiv
     });

     var data = createData(),
         ln = data.length,
         records = [],
         i = 0;

     for (; i < ln; i++) {
         records.push(Ext.create('Location', data[i]));
     }
 }


 Ext.onReady(function() {

     LoadDetailsGrid();

     var tabControl = new Ext.TabPanel({
         renderTo: 'tabs',
         activeItem: 0,
         width: 600,
         height: 250,
         plain: true,
         defaults: {
             autoScroll: true,
             bodyPadding: 10
         },
         items: [
             detailGrid
         ] // THIS IS WHERE THE ERROR HITS
     });

     detailStore.cachePage(records, 1);
     detailStore.guaranteeRange(0, 5);
 });
4

1 に答える 1

0

コード例が正確であれば、レコードをストアにロードすることさえありません。あなたが持っているものに基づいて、これを試してください：

var data = createData();
detailStore.add(data);

このExt.data.Store#addメソッドは、データを表すオブジェクトを使用してモデル インスタンスを作成します。各レコードを手動でインスタンス化する必要はありません。renderTo補足として、コンポーネントがコンテナの子アイテムになる場合は、コンポーネントで構成を使用しないでください。

于 2012-08-24T00:43:41.913 に答える