3

id以下のアプリケーションでは、生成されたアイテムに動的にを追加しようとしています。私のコードは正常に動作しますが、以下の2つのコメント行を追加すると。エラーをスローします

Uncaught Ext.AbstractManager.register（）：このマネージャーに重複ID「73」を登録しています

エラーの原因を突き止めようとしたところ、81id（console.log(_idGen)）が実行されるまでコードは正常に機能していることがわかりました。このことから、エラーが範囲外の例外に関連していることは明らかです。（9 * 9 = 81）また、Fiddleでのみ、子パネルにHTMLテキストを追加すると、それらが73 to 81（ではなく）??の間にあることがわかり、1 to 81混乱します。

フィドル

Ext.onReady(function(){
  var _idGen = 1;
  var childItems = [], items = [];

  for (var i = 0; i < 9; i++) {
    childItems.length = 0;
    for (var j = 0; j < 9; j++) {
       childItems.push({
           xtype: 'panel',
 /****************************/
           id: _idGen,
           html: _idGen + "",
 /****************************/
           width: 50,
           height: 50,
           style: {borderWidth: '1px'}
       });
       console.log(_idGen);
/*****************************/
       _idGen++;
/*****************************/
    }
    items.push({
        xtype: 'panel',
        layout: {
            type: 'table',
            columns: 3
        },

        items: childItems
    });
  }
  Ext.create('Ext.container.Container', {
     layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
     },
     renderTo: Ext.getBody(),    
     style: {width: '455px',marginLeft: 'auto',marginRight: 'auto', marginTop: '30px'},
     items: items
  });

});
4

1 に答える 1

4

厳密に要求されない限り、あなたの勝ちでIDを作成しないでください！

これは常にエラーの原因となるため、フレームワークがすでに処理しているのに、なぜそれを気にする必要があるのでしょうか。

フレームワークですでにサポートされているカスタム識別子プロパティ以上を使用しますitemId。このプロパティは、各コンポーネントレベル内で一意である必要があります。このメソッドを使用getComponent('your-item-id')して、呼び出し元のコンポーネントにネストされているコンポーネントを受け取ることもできます。

使用するように例を変更itemId'sし、下部にデモクエリを提供しました

JSFiddleを参照してください 

var _idGen = 1,
      _outerIdGen = 1;
  var childItems = [], items = [];

  for (var i = 0; i < 9; i++) {
  // You will keep the same array with and just alter all instances each time. 
  // This is what causes all your problems and the duplicates!      
  // childItems.length = 0; 
  // But you need a new array each time
    childItems = [];
    for (var j = 0; j < 9; j++) {
       childItems.push({
           xtype: 'panel',
           itemId: 'inner-'+_idGen++,
           html: _idGen + "",
           width: 50,
           height: 50,
           style: {margin: '1px',borderColor: 'white',backgroundColor:'cornflowerblue'}
       });
    }
    items.push({
        xtype: 'panel',
        layout: {
            type: 'table',
            columns: 3
        },
        itemId: 'outer-'+_outerIdGen++,
        items: childItems
    });
  }
  Ext.create('Ext.container.Container', {
     layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
     },
     renderTo: Ext.getBody(),    
     style: {width: '455px',marginLeft: 'auto',marginRight: 'auto', marginTop: '30px'},
     items: items
  });
  console.log(Ext.ComponentQuery.query('container > panel[itemId=outer-1] > panel[itemId=inner-73]')[0]);
于 2013-02-05T07:44:10.960 に答える