Как создать настраиваемое поле формы, группируя другие поля формы? - PullRequest
Новая
       13

Как создать настраиваемое поле формы, группируя другие поля формы?

6 голосов
/ 13 сентября 2011

Я хочу сгруппировать несколько стандартных полей формы в одно настраиваемое поле формы в ExtJS 4. По сути, мне нужен селектор категорий: при выборе категории из первого комбинированного списка появляется вторичный комбинированный список, отображающий его подкатегории и т. Д. .

Я уже написал логику для этого, и все это инкапсулировано в пользовательский компонент, который расширяет Ext.form.FieldSet. Но , я хочу использовать этот компонент внутри формы с записями, поэтому я предполагаю, что мне нужно превратить его в поле с такими функциями, как setValue, getValue и валидатор. Я нашел Ext.form.field.Base, который предлагает все это, но я не могу найти способ гармонично объединить два компонента (контейнер, такой как Ext.form.FieldSet + поле, подобное Ext.form.field.base) .

Кто-нибудь знает, если и как я могу это сделать?

Заранее спасибо!

Ответы [ 2 ]

7 голосов
/ 13 сентября 2011

Следующее решение может быть не лучшим.Однако это должно работать.

Расширить Ext.form.field.Base.Затем создайте обработчик Ext.form.FieldSet в afterrender и добавьте его в поле inputEl.Затем, конечно, переопределить поля valueToRaw, setRawValue, ...

Вот код: 

Ext.define('Ext.ux.form.field.MyCoolField', {
    extend:'Ext.form.field.Base',
    requires: ['Ext.util.Format', 'Ext.XTemplate'], 
    fieldSubTpl: [  
        '<div id="{id}" class="{fieldCls}"></div>',
        {
            compiled: true,          
            disableFormats: true     
        }           
    ],

    isFormField: true,
    submitValue: true,
    afterRender: function() {
        this.callParent();

        this.fieldSet = Ext.create('Ext.form.FieldSet', {
            items: [{
              // ... config of the first item

              // The following configs should be set to false. It's important.
              // Otherwise form will assume this items as its fields
              isFormField: false,
              submitValue: false
        });
        this.fieldSet.render(this.inputEl);
    },

    // and here overriding valueToRaw and so on
    // ...
});
2 голосов
/ 27 апреля 2012

Я сделал это по-другому, но отказ от ответственности: он перестал работать в extjs 4.1

Я расширил Ext.container.Container, затем добавил Ext.form.field.Field в качестве миксина. Оттуда я реализовал getValue / setValue. Все отлично работало, но внезапно возникло множество проблем в 4.1.

...