Sencha Touch: Comment faire pour aligner les boutons horizontalement dans un Poste.Panneau?

Je vais essayer d'obtenir deux boutons pour afficher les unes à côté des autres dans un Poste.Le panneau.

L' .code 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() {
                //...
            }
        }

    ]
});

Le SCSS code:

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

Ce yeilds boutons qui ressemblent à ceci:

Sencha Touch: Comment faire pour aligner les boutons horizontalement dans un Poste.Panneau?

J'ai pensé que ce pourrait avoir été un dimensionnement de problème, mais en ajoutant la width: '40%', attribut pour chaque bouton que les rendements:

Sencha Touch: Comment faire pour aligner les boutons horizontalement dans un Poste.Panneau?

Cependant, je suis désireux que les boutons s'asseoir les uns à côté des autres au lieu d'être empilés les uns sur les autres. Des suggestions?

Mise à JOUR:
J'ai essayé de prendre avantage de la align: bien, mais cela n'a rien fait:

    {
        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() {
            //...
        }
    }

OriginalL'auteur Old McStopher | 2011-07-08

extjs sencha-touch

6

Vous pouvez rassembler les boutons du panneau et de l'ensemble du groupe est mise à hbox. C'est essentiellement ce que vous avez fait avec la barre d'outils, mais il n'aura pas la barre d'outils de style si vous ne voulez pas que. aussi, pour info avec la hbox mise en page, vous pouvez spécifier 'flex' options de configuration de composants qui déterminent la façon dont ils sont à la taille les uns par rapport aux autres

Merci. Je vais donner à ceci un essai. Je ne sais pas si ça va le fumier avec les autres objets que j'ai de vivre là.
Si vous avez d'autres éléments, vous pouvez envelopper les boutons du panneau et de l'ensemble du groupe est mise à hbox. C'est essentiellement ce que vous avez fait avec la barre d'outils, mais il n'aura pas la barre d'outils de style si vous ne voulez pas que. aussi, pour info avec la hbox mise en page, vous pouvez spécifier 'flex' options de configuration de composants qui déterminent la façon dont ils sont à la taille les uns par rapport aux autres.
J'ai remplacé la barre d'outils mise en forme, mais j'ai pu lui donner un essai, si elle en avait envie plus tard. Présenter cela comme une réponse et je vais l'attribution de points pour l'emporter sur ma piraté solution. 😉
thx. juste édité le post suite à une certaine persistance de contrainte à éviter la double-poster :/

OriginalL'auteur Jonathan Packer

Ok, donc la réponse a été jusqu'ici pour envelopper le tout dans une barre d'outils. (A l'origine, je n'avais pas le faire, que ces boutons ne sont pas à être connecté. Ils sont à se montrer sous un défilement DataView.) J'ai dû presser les boutons un peu, car ils étaient à plus d'extension au-delà du bord de la barre d'outils et coupé. J'ai également eu à modifier la hauteur de la barre d'outils pour accueillir les grands boutons et de faire son fond transparent.

Le bouton partie de l' .code js ressemble maintenant à:

    {
        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() {
                        //...
                    }
                }
                ]
    }

OriginalL'auteur Old McStopher

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

Vous pouvez utiliser hbox mise en page pour rendre les boutons horizontalement à l'aide de Sencha.

C'est l'exemple de code qui fonctionne très bien,

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

OriginalL'auteur Gangadhar

Vous devez vous connecter pour publier un commentaire.