Sencha Touch：如何在Ext.Panel中水平對齊按鈕？

我試圖讓兩個按鈕在Ext.Panel中彼此相鄰顯示。Sencha Touch：如何在Ext.Panel中水平對齊按鈕？

的.js文件代碼：

ProductView = new Ext.Panel({ 
    styleHtmlContent: true, 
    scroll: 'vertical', 
    items: [ 
     new Ext.DataView({ 
     scroll: false, 
     store: productStore, 
     tpl: productTpl, 
     itemSelector: 'div.productView', 
     }), 
     { 
      xtype: 'button', 
      ui: 'blue-round', 
      height: '60', 
      text: 'Buy', 
      handler: function() { 
       // ... 
      } 
     },{ 
      xtype: 'button', 
      ui: 'green-round', 
      height: '60', 
      text: 'Share', 
      handler: function() { 
       // ... 
      } 
     } 

    ] 
});

的SCSS代碼：

@include sencha-button-ui('green', $branded-green); 
@include sencha-button-ui('blue', $branded-blue);

這yeilds看起來像這樣的按鈕：

Vertically-aligned buttons

我想這可能是大小問題，但將width: '40%',屬性添加到每個bu tton只收益率：

Smaller buttons

不過，我想要的按鈕相鄰坐，而不是對彼此頂部堆疊。有什麼建議麼？

UPDATE： 我試圖採取align:屬性的優勢，但這並沒有什麼：

{ 
     xtype: 'button', 
     ui: 'blue-round', 
     height: '60', 
     width: '40%', 
     align: 'left', 
     text: 'Buy', 
     handler: function() { 
      // ... 
     } 
    },{ 
     xtype: 'button', 
     ui: 'green-round', 
     height: '60', 
     width: '40%', 
     align: 'right', 
     text: 'Share', 
     handler: function() { 
      // ... 
     } 
    }

來源

2011-07-08 Old McStopher

你可以換的按鈕面板，並設置面板的佈局，以橫向盒。這基本上就是你對工具欄所做的工作，但如果你不需要它，它將不會有工具欄樣式。同時，供參考用的hbox佈局，你可以指定「柔性」的配置選項，其中的組件確定它們是如何相互

來源

2011-07-09 03:00:15

感謝。我會試試這個。不知道它是否會與我在那裏生活的其他物品混在一起。 –

如果您有其他項目，那麼您可以將按鈕包裹在面板中，並將該面板的佈局設置爲hbox。這基本上是你用工具欄做的，但如果你不想要的話，它不會有工具欄的樣式。也可以使用hbox佈局指定'flex'配置選項，以確定組件的相對大小。 –

我覆蓋了工具欄樣式，但如果稍後傾斜，我可以嘗試一下。提交這個答案作爲答案，我將獎勵點數以突破我的黑客攻擊的解決方案。 ;） –

好了，這樣的答案迄今已包裝一個工具欄上的整個事情。（我原本並沒有這樣做，因爲這些按鈕不會被停靠，它們會在一個滾動的DataView下顯示出來）。當它們超過工具欄邊緣時，我不得不擠壓按鈕，被切斷。我還必須更改工具欄的高度以容納更大的按鈕並使其背景透明。

的.js文件代碼的按鈕部分現在看起來像：

{ 
     xtype: 'toolbar', 
     height: '62', 
     items: [ 
       { 
        xtype: 'button', 
        ui: 'blue-round', 
        height: '60', 
        width: '48%', 
        text: 'Buy', 
        handler: function() { 
         // ... 
        } 
       }, {xtype: 'spacer'}, { 
        xtype: 'button', 
        ui: 'green-round', 
        height: '60', 
        width: '48%', 
        text: 'Share', 
        handler: function() { 
         // ... 
        } 
       } 
       ] 
    }

來源

2011-07-08 19:52:39

{ xtype : 'panel', 

    layout: { type: 'hbox', }, 

    items:[ 

    { xtype: "button", text: "Login", iconCls: 'action', 
    ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, }, 

    {xtype: 'spacer'}, { 
    {xtype: "button", 

text: "Reset", iconCls: 'action', ui:"decline", 
      itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },

您可以使用橫向盒佈局呈現橫向使用煎茶的按鈕大小。

這是示例代碼工作正常，

{ xtype :'panel', 

    layout: { type: 'hbox', }, 

    items:[ 

    { xtype: "button", text: "Login", iconCls: 'action', 
    ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, }, 

    {xtype: 'spacer'}, 
    {xtype: "button", text: "Reset", iconCls: 'action', ui:"decline", 
      itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },

來源

2013-03-15 08:46:31 Gangadhar

Sencha Touch：如何在Ext.Panel中水平對齊按鈕？

回答

相關問題