Sencha Touch: Как выровнять кнопки по горизонтали в Ext.Panel? - PullRequest
Новая
       0

Sencha Touch: Как выровнять кнопки по горизонтали в Ext.Panel?

3 голосов
/ 08 июля 2011

Я пытаюсь заставить две кнопки отображаться рядом друг с другом в 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);

Это приводит к появлению кнопок, которые выглядят следующим образом:

Vertically-aligned buttons

Я думал, что это может быть проблема с размером, но добавление атрибута width: '40%', для каждой кнопкитолько выход:

Smaller buttons

Тем не менее, я хочу, чтобы кнопки сидели рядом друг с другом, а не были сложены друг на друга.Есть предложения?

ОБНОВЛЕНИЕ: Я пытался воспользоваться свойством 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() {
            // ...
        }
    }

Ответы [ 3 ]

6 голосов
/ 09 июля 2011

Вы можете обернуть кнопки на панели и установить макет этой панели на hbox. Это в основном то, что вы сделали с панелью инструментов, но у нее не будет стиля панели инструментов, если вы этого не хотите. Кроме того, для макета hbox вы можете указать параметры конфигурации 'flex' для компонентов, которые определяют их размеры относительно друг друга

1 голос
/ 08 июля 2011

Хорошо, поэтому до сих пор ответ заключался в том, чтобы обернуть все это в панель инструментов.(Первоначально я этого не делал, так как эти кнопки не должны быть пристыкованы. Они должны отображаться при прокрутке 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() {
                        // ...
                    }
                }
                ]
    }
0 голосов
/ 15 марта 2013 
   { 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, }, ], },

Вы можете использовать макет hbox для горизонтальной визуализации кнопок с помощью Sencha.

Это пример кода, который отлично работает, 

   { 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, }, ], },
...