简体   繁体   中英

Putting radio button next to flexible text(sencha touch)

I am currently building a Sencha Touch 2 application and I am trying to do the following: Link to what I want to do

I have tried alot of things including the following

  • Using the radio button label property and aligned it to the right, doing this results in a non-flexible text
  • Giving the radio button a static width(30px to be exact) and having the text next to it in a hbox, but I am having problems vertically aligning the text

Actually, if I understood your question correctly, you can quite easily produce such a view with the labelWidth, labelWrap and labelAlign-properties. See the example below:

var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
defaults: {
    labelWidth: '85%',
    labelWrap: true,
    labelAlign: 'right'
},
items: [
    {
        xtype: 'radiofield',
        name : 'field',
        value: '1',
        label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate arcu non nunc congue, a malesuada purus volutpat. Nunc id.',
        checked: true,
        labelWrap: true
    },
    {
        xtype: 'radiofield',
        name : 'field',
        value: '2',
        label: 'Hello World this is a small text.'
    },
    {
        xtype: 'radiofield',
        name : 'field',
        value: '3',
        label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate arcu non nunc congue, a malesuada purus volutpat. Nunc id.'
    }
]

});

You can define your label width according to your environment, 85% was a good value to view it in the simulator in the Sencha Touch Docs Of course there is Sencha Touch-specific styling applied, so it does not look exactly like your example.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM