welcome to my space
Jan
5
Problem generating complex FormPanel.
admin in xn--fjqr0i.com edit
  • Hi all,

    I have a "render" problem, but I don't know why these problems happens, the idea is to build a complex Form Panel dinamically.

    For example:
    - First build the main FormPanel X0 (without border and title)
    - In the X0 panel I nested 3 Form Panel: X1, X2 and X3 (with border and title)
    - Then in each of these X1, X2 and X3 panels, insert some TextFields.

    The problem is that only renders the Fields of panel X1, showing the 3 panels X1, X2 and X3.

    The retrieved JSON data from server is like:
    form: {
    items: [{
    title: 'Panel 1',
    fields: [
    {name: 'field1', title: 'Title of Field 1'},
    {name: 'field2', title: 'Title of Field 2'}
    ]
    }, {
    title: 'Panel 2',
    fields: [
    {name: 'field3', title: 'Title of Field 3'},
    {name: 'field4', title: 'Title of Field 4'}
    ]
    }, {
    title: 'Panel 3',
    fields: [
    {name: 'field5', title: 'Title of Field 5'},
    {name: 'field6', title: 'Title of Field 6'}
    ]
    }]
    }

    And in the initComponent to build the components is like (extends form Ext.form.FormPanel with the call to the superclass):
    initComponent: function() {
    <.. Superclass invocation to Ext.form.FormPanel init component...>

    for(var i=0, i var _currentItem = form.items[i];
    var _fields = _currentItem.fields;

    var _currentForm = new Ext.form.FormPanel({
    layout: 'form'
    ...
    });

    for(var j=0, j<_fields.length; j++) {
    var _currentField = _fields[j];
    var _field = new Ext.form.TextField({
    fieldLabel: _currentField.title,
    name: _currentField.name,
    anchor: '90%',
    ...
    });
    _currentForm.add(_field);
    }

    this.add(_currentForm);
    }

    }

    Note: In Safari no degug log show and in Firefox Mac too.

    And idea? Any best practice to build dinamically FormPanel? Is there a variable scope problem?

    Thanks in advance.


  • Hi Condor,

    Thx for your response, I have tried with FieldSet as you said, but the problem persists. Here is the complete source code of the "Detail generator" mentioned before.


    Ext.namespace('Ext.ux.test');
    Ext.ux.test.Detail = Ext.extend(Ext.FormPanel, {
    region: 'center',
    detail: null,
    layout: 'fit',
    bodyStyle: 'padding: 6px',
    labelAlign: 'top',

    initComponent: function() {
    var _detail = this;
    var _currentItems = this.detail.items;

    Ext.ux.test.Detail.superclass.initComponent.call(t his);

    for(var i=0; i<_currentItems.length; i++) {
    var _currentItem = _currentItems[i];
    var _fields = _currentItem.fields;
    var _arrFields = new Array(_fields.length);

    for(var j=0; j<_fields.length; j++) {
    _arrFields[j] = _detail.buildField(_fields[j]);
    }

    var _fs = new Ext.form.FieldSet({
    id: Ext.id(),
    height: 100,
    labelAlign: 'top',
    title: _currentItem.title,
    autoHeight: true,
    items: _arrFields
    });

    _detail.add(_fs);
    }
    },

    buildField: function(field){
    return new Ext.form.TextField({
    labelSeparator: '',
    fieldLabel: field.title,
    name: field.name,
    anchor:'90%',
    allowBlank: false
    });
    }
    });


    With this code, only shows the fields of the first FieldSet, not the second nor third.

    Is very, very simple, but it seems that adding fields "dinamically" doesn't works.

    Any idea?


  • It is a bit strange to add Panels to a FormPanel (with layout:'form'). Wouldn't it be better to use FieldSets instead or use a different layout, like accordion or row-fit (http://extjs.com/forum/showthread.php?t=17116)?

    ps. If you are adding these components after the container was rendered you need to call container.doLayout().







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Problem generating complex FormPanel. , Please add it free.