Sencha Touch 1.x, как создать контейнер с двумя компонентами, используя hbox - PullRequest
Новая
       41

Sencha Touch 1.x, как создать контейнер с двумя компонентами, используя hbox

0 голосов
/ 20 марта 2012

У меня есть набор данных в моем хранилище данных, и я вывожу свои данные, используя текстовые поля в контейнерах в виде .js. Я также отключил поля только для показа данных и быть недоступным для редактирования. Мне было интересно, есть ли какие-либо альтернативы использованию «xtype: textfield» и «xtype: textareafield»?

Учитывая этот вопрос, я пытаюсь создать контейнер с двумя компонентами, используя hbox в качестве такой альтернативы, и у меня есть следующий код: 

    var formContainer1 = new Ext.Container({
        width: '100%',
        height: '65%',            
        layout: {
            type: 'vbox',
        //    type: 'hbox',
            align: 'stretch',
        },
        defaults: {
            labelAlign:'left',            
        //    labelWidth:'30%',
            labelWidth:'25%',
        },
        items: [
            { 
                bodyStyle: "background-color: #52ABD5;", //Color = Light Blue
                html: '<font face="Helvetica" size="4" color="white" ><p>Information</p>'
            },
            {
                xtype: 'textfield',
            //    xtype: 'component',
                name: 'Description',
                disabled: true,
                label: 'Desc',                    
            },{
                xtype: 'textfield',
            //    xtype: 'component',
                name: 'Number',
                disabled: true,
                label: 'ANumber',
                id: 'ANumber',
            },{
                xtype: 'textareafield',
            //    xtype: 'component',
                name: 'directions',
                disabled: true,
                label: 'Directions',
                height: 'auto',
            //    defaults: {
                    //required: true,
            //        labelAlign: 'left',
            //        labelWidth: '100%'
            //    },                        
            },
        ],
    /*    dockedItems: [
            {
                layout: 'hbox',
                xtype: 'toolbar',
                dock: 'top',
                title: 'Information',
            //    scroll: 'horizontal',
            }
        ]*/
    });

Теперь этот код работает просто отлично, за исключением того, что я не хочу использовать 'textfield' или 'textareafield'. Я все еще использую их, потому что я пытался использовать компонент xtype:, но он не работал. Кроме того, когда я попробовал это в макете hbox, он не появился так, как я хотел (строка за строкой). Я почти уверен, что просто не понимаю часть "компоненты, использующие hbox", потому что да, я хочу, чтобы этот контейнер выглядел очень близко к этому:

Img url: http://farm3.staticflickr.com/2683/5852914556_b2886e3363.jpg

(примечание: ссылка на самую правую картинку iphone с контейнерами)

Пожалуйста, уточните мне часть "w / 2 components usnig hbox". Спасибо!

Кстати: http://www.sencha.com/forum/showthread.php?186243-Alternatives-to-textfield&p=759843#post759843

Мое имя пользователя в этом сообщении: kevinjset. Это был оригинальный пост, который я разместил на сенсорных форумах Sencha с тем же вопросом, я просто хотел посмотреть, ребята, вы на Stack Overflow! может помочь мне тоже! Спасибо, уточнил.

1 Ответ

0 голосов
/ 21 марта 2012

Это довольно утомительно, но может помочь вам 

{
            xtype:'fieldset',
            title:'fieldset1',
            items:[{
                xtype:'container',
                layout:'hbox',
                items:[{
                    xtype:'container',
                    flex:1,
                    html:'1'
                },{
                    xtype:'container',
                    flex:1,
                    html:'2'
                },{
                    xtype:'container',
                    flex:1,
                    html:'3'
                }]
            },{
                xtype:'container',
                layout:'hbox',
                items:[{
                    xtype:'container',
                    flex:1,
                    html:'4'
                },{
                    xtype:'container',
                    flex:1,
                    html:'4'
                },{
                    xtype:'container',
                    flex:1,
                    html:'6'
                }]
            }]
        }
...