ExtJS序列布局

首先，讓我說，我對ExtJS相當陌生，因此可能會有一個非常簡單的答案來解決這個問題。ExtJS序列布局

我想把兩個物品放在一個容器中，基本上沒有佈局，只是按順序顯示物品。舉例來說，如果我有這樣的事情：

{ 
    xtype: 'container', 
    width: 30, 
    items: [{ 
      xtype: 'component', 
      html: 'This should look ' 
     }, 
     { 
      xtype: 'component', 
      html: 'like a single sentence. 
     }] 
}

然後，我想是這樣產生的：

This should look like a single sentence.

我發現每一個佈局似乎對待不同的項目，如他們應該分開表格中的列或更復雜的東西。什麼是正確的方式去做這件事？如果我沒有提供足夠的信息，請讓我知道，我會更新問題。

謝謝！

來源

2015-05-31 Jake

對不起，只是好奇，你有沒有發現你要找的東西？ – Yellen

@Yellen是的，有很多很好的答案，但基本上我誤解了這些項目呈現的方式。 – Jake

如果您有興趣 - 請檢查這個，如果你還沒有這樣做http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-renderTpl – Yellen

提高對埃文的回答，你可以做這樣的事情 -

Ext.widget({ 
      renderTo: document.body, 
      xtype: 'container', 
      width: 300, 
      items: [{ 
       xtype: 'component', 
       autoEl: 'p', // use paragraph instead of span 
       html: 'This should look ' 
      }, { 
       xtype: 'component', 
       autoEl: 'p', 
       html: 'like a single sentence.' 
      }] 
     });

設置autoEl：「P」將呈現內段落標記和同一div內的組件。 enter image description here 這裏有一個fiddle

來源

2015-06-01 06:23:35 Yellen

試試這個：

Ext.create('Ext.container.Container',{ 
    renderTo: document.body, 
    layout : 'column', 
     items: [{ 
     xtype: 'component', 
     html: 'This should look ' 
    },{ 
     xtype: 'component', 
     html: 'like a single sentence.' 
    }] 
});

來源

2015-05-31 06:37:33

這不適合我。這兩個組件被放入單獨的div中，第二個組件在第一個之後的行中開始。 – Jake

是的，他們將並排在兩個不同的div中，因爲它們是兩個不同的組件。他們將在同一個父組件內。 –

你可以做這樣的事情：https://fiddle.sencha.com/#fiddle/npa

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     Ext.widget({ 
      renderTo: document.body, 
      xtype: 'container', 
      width: 300, 
      items: [{ 
       xtype: 'component', 
       autoEl: 'span', 
       html: 'This should look ' 
      }, { 
       xtype: 'component', 
       autoEl: 'span', 
       html: 'like a single sentence.' 
      }] 
     }); 
    } 
});

每個組件包裝自己的DOM結構，所以在你最初的例子中，每個組件是一個div。請記住，創建組件意味着開銷，因此如果要創建大量這些組件，最好使用模板。

來源

2015-05-31 07:28:37

回答

相關問題