在hbox佈局中放置單個項目extjs

是否可以將我的一些項目放置在我的面板中左側，最後一個項目位於右側？這樣中間就有一個空的空間。現在我使用的hbox佈局，並把一個空的容器在中間，彎曲像這樣：在hbox佈局中放置單個項目extjs

 items: [{ 
     xtype: 'container', 
     layout: 'hbox', 
     items: [{ 
      xtype: 'label', 
      text: 'Filter on vehicle' 
     },{ 
      xtype:'textfield' 
     },{ 
      xtype: 'button', 
      text: '...' 
     },{ 
      xtype: 'container', 
      flex:1 
     },{ 
      xtype: 'button', 
      text: 'New' 

     },{ 
      xtype:'button', 
      text: 'Edit' 

     },{ 
      xtype: 'button', 
      text: 'Delete' 
     }] 
    }]

什麼更好的辦法來做到這一點？

來源

2016-04-28 user3799968

不，這是最好的辦法。唯一的辦法是將容器做成一個組件，但這很小。 –

不知道這是不是一個更好的解決方案或不是。但DOM明智它會更輕。

我們可以使用tbfillxtype而不是插入container。

{ 
      xtype: 'container', 
      layout: 'border', 
      items: [{ 
       xtype: 'label', 
       text: 'Filter on vehicle', 
      },{ 
       xtype:'textfield', 
      },{ 
       xtype: 'button', 
       text: '...',  
      }, 
      { 
       xtype:'tbfill' 
      },{ 
       xtype: 'button', 
       text: 'New', 
      },{ 
       xtype:'button', 
       text: 'Edit', 
      },{ 
       xtype: 'button', 
       text: 'Delete', 
      }], 
}

Working Example

來源

2016-04-28 09:12:35

如果你要使用像按鈕，文本框，標籤，組合框元素...您可以使用Ext.toolbar.Toolbar的xtype：工具欄。所以如果你需要把項目放到正確的位置，你可以用' - >'來簡單地做到這一點，你也可以使用'|'將垂直分隔符放到收費欄中。

Ext.create('Ext.container.Container', { 
    renderTo: Ext.getBody(), 
    items: [ 
     { 
      xtype: 'toolbar', 
      layout: 'hbox', 
      items: [ 
       { 
        xtype: 'label', 
        text: 'Filter on vehicle' 
       }, 
       { 
        xtype: 'textfield' 
       }, 
       { 
        xtype: 'button', 
        text: '...' 
       }, 
       { 
        xtype: 'button', 
        text: 'New' 
       }, 
       '->', 
       { 
        xtype: 'button', 
        text: 'Edit' 
       }, 
       { 
        xtype: 'button', 
        text: 'Delete' 
       }      
      ] 
     } 
    ]   
});

來源

2016-04-28 16:21:22 Kirrosh

你在做什麼很好，可以說是最好的解決方案與1小建議。使用「組件」而不是「容器」，因爲它會稍微輕一些。

以前的'tbfill'和' - >'的答案實際上與你正在做的事情是一樣的。 ' - >'是'tbfill'的縮寫，'tbfill'實際上是一個flex：1組件。

所有3解決方案應該可以正常工作，但我喜歡用柔性：1層的組件，因爲使用tbfill取決於瞭解工具欄的實現細節，即是採用橫向盒。 Sencha可以自由更改工具欄和工具在未來版本中的工作方式，此時您的代碼（如果使用tbfill）已損壞。

來源

2016-04-28 19:43:06 lagnat

在hbox佈局中放置單個項目extjs

回答

相關問題