Results 1 to 2 of 2

Thread: checkboxfield with a centered layout

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    111
    Answers
    5

    Default checkboxfield with a centered layout

    I have 2 checkboxfields side by side like this,
    http://screencast.com/t/ilp2YO0U5eD

    What is the best way to center the text and check? I'm thinking about adding a class to the container that overrides some of Sencha's CSS, but if there is a configuration that would be cleaner.

    Thanks!

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default


    What is the best way to center the text and check?
    Hi!,
    you want to center text and check in horizontal view or vertical view?

    For your Horizontal view:-
    Code:
    var form = Ext.create('Ext.form.Panel', {
        fullscreen: true,
        layout:'hbox',
        items: [
            {
                xtype: 'checkboxfield',
                labelWidth:80,
                label: 'Tomato',
                checked: true
            },
            {
                xtype: 'checkboxfield',
                name : 'salami',
                labelWidth:80,
                label: 'Salami'
            }
        ]
    });
    For Vertical view:-
    .myLabelCls{padding-left:30px !important;}

    Code:
    var form = Ext.create('Ext.form.Panel', {
        fullscreen: true,
        layout:'hbox',
        items: [
            {
                xtype: 'checkboxfield',
                label: 'Tomato',
                labelAlign:'top',
                flex:1,
                labelCls:'myLabelCls'
            },
            {
                xtype: 'checkboxfield',
                label: 'Salami',
                labelAlign:'top',
                flex:1,
                labelCls:'myLabelCls'
            }
        ]
    });
    Outputs:-

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •