2

Sencha ExtJs プロジェクトをバージョン4.1.1から新しくリリースされたバージョン5.0.1にアップグレードしたところ、webdev コンソールに「[E] Layout run failed」というエラーが表示されました。
古いバージョンでは、すべてが期待どおりに機能します。

エラー メッセージは、2 つのフィルセットにネストされたコンテナーで使用される列レイアウトから来ています。レイアウトを vbox などに交換すると、エラーは発生しません。

レイアウトの実行が失敗する次のコードの問題点とその修正方法。
すべてのヒント、ヒント、または解決策に感謝します。

フィドルはhttps://fiddle.sencha.com/#fiddle/8ovにあります。

Ext.onReady(function() {

  Ext.create('Ext.form.FieldSet', {
      title: 'Grouping Fieldset',
      layout: 'anchor',
      renderTo: Ext.getBody(),
      items: [
          {
              xtype: 'fieldset',
              title: 'Fieldset - 1',
              layout: 'anchor',
              width: '100%',
              items: [
                  {
                      xtype: 'textfield'   
                  },
                  /*...more input fields...*/
                  {
                      xtype: 'container',
                      layout: 'column',
                      width: '100%',
                      items: [
                          {
                              xtype: 'textfield',
                              width: 25
                          },
                          {
                              xtype: 'textfield',
                              width: 50
                          },
                          {
                              xtype: 'textfield'
                          }
                      ]
                  }
              ]
          },
          {
              xtype: 'fieldset',
              title: 'Fieldset - 2',
              layout: 'anchor',
              items: [
                  {
                      xtype: 'textfield'
                  }
                  /*...more input fields...*/
              ]  
          }
       ]
    });
});

Ext.Loader を使用したスタック トレース:

log Util.js:704
logx Util.js:744
Ext.apply.log.log.error Util.js:748
Ext.define.handleFailure Context.js:597
Ext.define.runComplete Context.js:1129
callOverrideParent Ext.js:58
Ext.Base.Base.addMembers.callParent Base.js:1256
Ext.override.runComplete Component.js:174
Ext.define.run Context.js:1120
Ext.define.statics.flushLayouts Component.js:182
Ext.define.statics.resumeLayouts Component.js:198
Ext.resumeLayouts Component.js:5948
Ext.define.render Renderable.js:685
Ext.define.constructor Component.js:1743
constructor Class.js:29
(anonymous function) VM1725:3
Ext.ClassManager.Ext.apply.create ClassManager.js:1413
Ext.define.launch Application.js:10
Ext.define.onBeforeLaunch Application.js:407
Ext.define.constructor Application.js:325
constructor Class.js:29
(anonymous function) Application.js:23
Ext.env.Ready.invoke Ready.js:271
Ext.env.Ready.invokeAll Ready.js:313
Ext.env.Ready.unblock Ready.js:445
Ext.apply.triggerReady Loader.js:761
Ext.apply.checkReady Loader.js:906
Ext.apply.load Loader.js:592
Ext.apply.require Loader.js:477
Ext.apply.triggerReady Loader.js:733
Ext.apply.checkReady Loader.js:906
Ext.apply.onLoadSuccess Loader.js:649
Ext.Boot.Request.notify bootstrap.js:904
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Request.loadEntries bootstrap.js:856
Ext.Boot.Boot.processRequest bootstrap.js:451
Ext.Boot.Boot.load bootstrap.js:472
Ext.Boot.Boot.requestComplete bootstrap.js:507
Ext.Boot.Request.notify bootstrap.js:908
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Entry.notifyRequests bootstrap.js:1328
me.fetch.complete bootstrap.js:1242
readyStateChange

アップデート

すべてのテキストフィールドを独自のコンテナに配置すると、レイアウトエラーがなくなり、GUI が期待どおりに動作します。しかし、これは回避策にすぎません...

フィドルはhttps://fiddle.sencha.com/#fiddle/8reにあります。

//...items of secound fieldset
{
  xtype: 'container',
  layout: 'column',
  items: [
    {
      xtype: 'container',
      items: [
        {
          xtype: 'textfield',
          width: 50
        }
      ]
    },
    {
       xtype: 'container',
       items: [
       // ...nesting next textfield in container
4

2 に答える 2

3

レイアウト実行の失敗は、幅が拡張された親コンテナー (「アンカー」レイアウトなど) の内側に幅が拡張された内部コンテナー (「列」レイアウトなど) がある場合によく発生します。

要するに、フレームワークはすべて引き伸ばされているため、適切にサイズを調整できません。それは、アンカー レイアウト、列レイアウト、またはそこにある他の引き伸ばされたものの 1 つです。これは一般に「過剰なネスティング」として知られています。

コードの最上位のコンテナは、フィールドセットのように見えます。その中に別のフィールドセット (など) があり、両方にアンカー レイアウトがあります。おそらく、「hbox」または「vbox」レイアウトを使用したいと思うでしょう。

于 2014-08-13T12:39:28.783 に答える
3

列のレイアウトでも同じ問題に直面しました。数時間の検索の後、列レイアウトを持つコンテナーに配置される各コンポーネントのcolumnWidthを定義する必要があることがわかりました。それは私のために働いた。列レイアウトのドキュメントを再確認したところ、次のように書かれています。

ColumnLayout には (継承されたものを除いて) 直接の構成オプションはありませんが、追加された任意のパネルの構成に含めることができる columnWidth の特定の構成プロパティをサポートしています。レイアウトは、レイアウト中に各パネルの columnWidth (存在する場合) または幅を使用して、各パネルのサイズを決定する方法を決定します。特定のパネルに width または columnWidth が指定されていない場合、その幅はデフォルトでパネルの幅 (または auto) になります。

私にとっては、columnWidth 構成でのみ機能します。(列コンテナーのパネルの代わりにボタンを使用しています)

于 2014-12-15T11:43:41.570 に答える