Как установить автоматическую высоту для макета extjs hbox? - PullRequest
Новая
       7

Как установить автоматическую высоту для макета extjs hbox?

10 голосов
/ 29 июля 2011

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

issue

это код, который я использую 

win = Ext.create('widget.window', {
      title: 'Layout Window',
      closable: true,
      closeAction: 'hide',
      width: 750,
      height: 500,
      layout: 'fit',
      animCollapse: true,
      bodyPadding: 5,

      items: [{
                xtype: 'container',
                layout: 'hbox',
                align: 'stretch',
                items: [{
                          xtype: 'fieldset',
                          flex:1,
                          title: 'Details',
                          margins:'0 5 0 0',
                          layout: 'anchor',                          
                          autoHeight: true,
                          items: [{
                                    xtype: 'displayfield',
                                    fieldLabel: 'Name',
                                    name: 'customer_name',
                                    id: 'customer_name',
                                    width: 300
                                },{
                                    xtype: 'displayfield',
                                    fieldLabel: 'ID Card',
                                    id: 'customer_id',
                                    name: 'customer_id',
                                    width: 300
                                },{
                                    xtype: 'displayfield',
                                    fieldLabel: 'Address',
                                    name: 'address',
                                    id: 'address',
                                    width: 300
                                }]                        
                      },{
                          xtype: 'fieldset',
                          title: 'Details',
                          margins:'0 0 5 0',
                          flex:1,
                          layout: 'anchor',
                          autoHeight: true,
                          items: [{
                                    xtype: 'textfield',
                                    labelWidth: 120,
                                    fieldLabel: 'invoice',
                                    anchor: '98%',
                                    name: 'invoice_number',
                                    id: 'invoice_number',
                                    allowBlank: false,
                                    readOnly: true
                                },{
                                    xtype: 'textfield',
                                    labelWidth: 120,
                                    fieldLabel: 'Payment Amount',
                                    anchor: '98%',
                                    name: 'payment_amount',
                                    id: 'payment_amount',
                                    allowBlank: false
                                },{
                                    xtype: 'button',
                                    id: 'test'

                                    }]                        
                      }]                        
             }]


}).show();

это, я просто использовал для установки данных для отображения полей в качестве теста 

Ext.getCmp('test').on('click', function(){
    Ext.getCmp('customer_name').setValue('customer name customer_name customer_name customer_name');
    Ext.getCmp('customer_id').setValue('855');
    Ext.getCmp('address').setValue('some text, some text, some text, some text');
});

есть идеи, как это исправить?

С уважением

1 Ответ

10 голосов
/ 29 июля 2011

Прежде всего, это быстрый хак, который заставит ваш набор полей слева автоматически расширяться по длине содержимого:

Сразу после установки содержимого набора полей отображения сделайте следующее:

win.query('fieldset')[0].setHeight('auto');

Без особых изменений, это пример: jsfiddle

(query - метод, доступный глобально длявсе компоненты, которые наследуют Ext.Component, для запроса элементов внизу, например селекторов css)

Дополнительное примечание

Несколько замечаний:

  1. Чтобы использовать align:'stretch', вы не можете предоставить его в качестве прямой конфигурации для компонента, вам нужно будет сделать это: 

    Ext.create('Ext.panel.Panel', {
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [...]
});

    Вы захотите проверить это тестовое демо .Первое окно будет работать как положено, в то время как второе и третье окно не будет растягивать панели.

  2. Во-вторых, autoHeight было удалено с ExtJS 4 и поэтому игнорируется в вашей конфигурации.Возможно, вам придется использовать setHeight('auto'), чтобы сделать его автоматически высотой вручную.

РЕДАКТИРОВАТЬ

Похоже, использование макета column позволяет добиться того жеэффект без использования setHeight('auto'). Проверьте скрипку здесь .

Ура!

...