2013-07-09 45 views
2

我正在尋找在Extjs窗體中有動態數量的字段列的方式。extjs動態列數

基本上形成應該是這樣的(2列): enter image description here

但當用戶縮小瀏覽器寬度,應該改變這種(1列): enter image description here

是否有任何方式來做這個?

+0

我想這是不可能的。表單將被渲染後 - 將顯示帶有字段的表格,此時不能更改列表列表。兒子只有一種我看到的方式 - 是在特定事件中重新生成具有正確列的表單。 – Andron

回答

0

你可能試着玩不同的佈局。首先我想嘗試的是將表單佈局設置爲錨點併爲所有元素指定固定寬度。

1

這絕對有可能。你只需要使用一點CSS就可以實現。我直接在我的表單配置中應用了我的CSS,但您可以輕鬆地將它放入自己的CSS文件中。

Ext.create('Ext.form.Panel', { 
     renderTo: Ext.getBody(), 
     layout: 'auto', 
     defaults: { 
      xtype: 'textfield', 
      style: { 
       float: 'left', 
       width: 200 
      } 
     }, 
     items: [ 
      { fieldLabel: 'Field 1' }, 
      { fieldLabel: 'Field 2' }, 
      { fieldLabel: 'Field 3' }, 
      { fieldLabel: 'Field 4' }, 
      { fieldLabel: 'Field 5' }, 
      { fieldLabel: 'Field 6' } 
     ] 
    });

當您將瀏覽器調整到兩列不適合的位置時,應該會看到兩列自動換行到一列。

我做了一個例子供您參考這裏:http://jsfiddle.net/Asuza/n7Zsj/

當你打開它,你應該看到領域的兩列。將CSS主體寬度更改爲300px,然後重新運行小提琴,現在列數應該爲1。這應該等同於您手動調整瀏覽器的大小。

0

請使用列布局。

{ 
    xtype:'container' 
    layout:'fit', 
    items:{ 
     xtype:'form', 
     title:'test', 
     layout:'column', 
     items:[...] 
    } 
} 

文本字段沒有設置寬度