1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    82
    Answers
    7
    Vote Rating
    1
    dr-dan is on a distinguished road

      0  

    Default Unanswered: Best layout for centered buttons with padding?

    Unanswered: Best layout for centered buttons with padding?


    Hi

    I'm like 2 days into Ext JS...

    I have created a panel with a column layout, with 4 buttons in it, each taking up .25 columnWidth (have also tried with a fixed width instead).

    I'm guessing this is why neither the properties: padding, style, or defaults: bodystyle is taking effect, but basically I want to ensure buttons have some space/border/padding between them. currently they are buffed up against each other.

    Whats the way round it?

    Code:
    Ext.define('MyApp.view.SurveyButtonsPanel', {
      extend: 'Ext.panel.Panel',
      alias: 'widget.surveyButtonsPanel',
    
    
      id: 'survey-buttons-panel',
      layout: {
        type: 'column'
      },
      defaults: {
        bodyStyle: 'padding:10px;'
      },
      title: '',
    
    
      initComponent: function() {
        var me = this;
    
    
        Ext.applyIf(me, {
          items: [
            {
              xtype: 'button',
              height: 65,
              id: 'ResetButton',
              padding: 10,
              style: 'padding:20px;',
              text: 'Reset',
              width: 172
            },
            {
              xtype: 'button',
              height: 65,
              id: 'PreviousButton',
              text: 'Previous',
              width: 172
            },
            {
              xtype: 'button',
              height: 65,
              id: 'SkipButton',
              text: 'Skip',
              width: 172
            },
            {
              xtype: 'button',
              height: 65,
              id: 'NextButton',
              text: 'Next',
              width: 172
            }
          ]
        });
    
    
        me.callParent(arguments);
      }
    
    
    });

  2. #2
    Sencha User
    Join Date
    Jun 2012
    Posts
    82
    Answers
    7
    Vote Rating
    1
    dr-dan is on a distinguished road

      0  

    Default


    using marginRight on the item ended up doing the trick

    Code:
    style: { marginRight: '10px' }
    for the spacing above and below, i used padding on the container:

    Code:
    style: { padding: '10px' }

  3. #3
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi!
    Below is working fine for me:-
    Code:
    var form = Ext.create('Ext.form.Panel', {
        title: 'Simple Display',
        autoHeight:true,
        renderTo: Ext.getBody(),
        layout:"column",
        items:[{
            xtype:"htmleditor",
            columnWidth:1,
            name:"a"
        }],
        buttons:[{
            text:"Print DisplayField",
            style:'margin-right:40px;padding:15px;'        
        }]   
    });
    Output:-

    buttonStyle.png
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar