1. #1
    Sencha User
    Join Date
    Apr 2009
    Posts
    11
    Vote Rating
    0
    dahrens is on a distinguished road

      0  

    Default TabPanel including a Container with GridPanel and FormPanel - "this.body is null"

    TabPanel including a Container with GridPanel and FormPanel - "this.body is null"


    hi everybody,

    got a TabPanel with two Tabs - both including a Container with different Panel-Setups.
    The Problem is the 2nd Tab, which container includes one GridPanel and one FormPanel.
    The FormPanel will be rendered into/over the GridPanel instead next to it and there are just the buttons from the Form visibile.

    I suggest that there is something wrong with the layout-management of the Containers/Panels but i have no idea where exactly. my debug console says, that "this.el is null" - if i interpret it right, it crashs in the initEl-function of FormPanel.

    if i remove the FormPanel from its Container everything seems to be ok.

    Code:
    PNEAVGUI.AttributeGrid = Ext.extend(Ext.grid.GridPanel, {
        // override 
        initComponent : function() {
            Ext.apply(this, {
                columns: [
                    {header: "Attribute Name", dataIndex: 'name', sortable: true},
                    {header: "Attribute Type", width: 30, dataIndex: 'attr_render_type', sortable: true},
                    //{header: "Used by Groups", dataIndex: 'Title', sortable: true},
                ],
                sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
                store: new Ext.data.JsonStore({
                    storeId: 'attributeGridStore',
                    baseParams: {entitytypeid:'1'},
                    url: 'ajax.php?ajaxID=tx_pneav::getAttributes',
                    root: 'rows',
                    fields: ['uid', 'name', 'attr_render_type'],
                }),
                /*listeners: {
                    rowselect: function(sm, row, rec) {
                        Ext.getCmp("company-form").getForm().loadRecord(rec);
                    }
                },*/
                // force the grid to fit the space which is available
                viewConfig: {
                    forceFit: true
                }
            });
            // finally call the superclasses implementation
            PNEAVGUI.AttributeGrid.superclass.initComponent.call(this);        
        }
    });
    Ext.reg('attributegrid', PNEAVGUI.AttributeGrid);
    
    PNEAVGUI.AttributeForm = Ext.extend(Ext.FormPanel, {
        // override 
        initComponent : function() {
            Ext.apply(this, {
                labelWidth: 75, // label settings here cascade unless overridden
                url:'save-form.php',
                frame:true,
                autoEl: {},
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last'
                    },{
                        fieldLabel: 'Company',
                        name: 'company'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }, new Ext.form.TimeField({
                        fieldLabel: 'Time',
                        name: 'time',
                        minValue: '8:00am',
                        maxValue: '6:00pm'
                    })
                ],
    
                buttons: [{
                    text: 'Save'
                },{
                    text: 'Cancel'
                }]
    
            });
            PNEAVGUI.AttributeForm.superclass.initComponent.call(this);
        },
        
        updateDetail: function(data) {
            //this.tpl.overwrite(this.body, data);
            Ext.Msg.alert('detailPanel','update Details! data: '+data);
            // TODO: Data to Form glue
        }    
    });
    Ext.reg('attributeform', PNEAVGUI.AttributeForm);
    
    PNEAVGUI.ManageAttributePanel = Ext.extend(Ext.Container, {
        // override initComponent
        initComponent: function() {
                Ext.applyIf(this, {
                        autoEl: {},
                        layout: 'border',
                        items: [{
                            xtype: 'attributegrid',
                            width: 400,
                            height: 450,
                            region: 'center',
                            id: 'gridPanel',
                        }, {
                            xtype: 'attributeform',
                            width: 250,
                            height: 450,
                            region: 'east',
                            id: 'detailPanel',
                        }]
                })
                // call the superclass's initComponent implementation
                PNEAVGUI.ManageAttributePanel.superclass.initComponent.call(this);
        },
    });
    //register an xtype with this class
    Ext.reg('manageattributepanel', PNEAVGUI.ManageAttributePanel);
    
    PNEAVGUI.MyTabPanel = Ext.extend(Ext.TabPanel, {
        // override initComponent
        initComponent: function() {
            // used applyIf rather than apply so user could
            // override the defaults
            Ext.applyIf(this, {
                width:650,
                height:450,
                frame:true,
                layoutOnTabChange: true,
                //defaults:{autoHeight: true},
                items:[
                    {title: 'Manage Attribute Sets', xtype: 'treecontainer', id: 'managesets'},
                    {title: 'Manage Attributes', xtype: 'manageattributepanel', id: 'manageattributes'}
                ],
            });
            // call the superclass's initComponent implementation        
            PNEAVGUI.MyTabPanel.superclass.initComponent.call(this);
        },
        
    });
    Ext.reg('mytabpanel', PNEAVGUI.MyTabPanel);
    any suggestions or solutions for this problem?

    thanks,
    dennis

  2. #2
    Ext User shibubh's Avatar
    Join Date
    Jul 2007
    Location
    Lamahi,Dang Nepal
    Posts
    449
    Vote Rating
    0
    shibubh is on a distinguished road

      0  

    Default


    ok its been long time i got a same problem. at that time i just render the form in document's body and it works.
    try this

    Code:
     Ext.applyIf(this, {
                        autoEl: {},
                        layout: 'border',
                        items: [{
                            xtype: 'attributegrid',
                            width: 400,
                            height: 450,
                            region: 'center',
                            id: 'gridPanel',
                        }, {
                            xtype: 'attributeform',
                            width: 250,
                            height: 450,
                            renderTo:document.body,
                            region: 'east',
                            id: 'detailPanel',
                        }]
                })
    Shibu Bhattarai

    Use JavaScript beautifier to beautify you code http://jsbeautifier.org/

    Code Conventions http://javascript.crockford.com/code.html

    ExtJS Core Manual http://extjs.com/products/extcore/manual/

  3. #3
    Sencha User
    Join Date
    Apr 2009
    Posts
    11
    Vote Rating
    0
    dahrens is on a distinguished road

      0  

    Default


    the form completely disappers with renderTo: document.body

    Code:
    Ext.onReady(function() {
        // create an instance of the app
        var pneavGUI = new PNEAVGUI.MyTabPanel({
            renderTo: 'tabs'
        });
        pneavGUI.activate('managesets');
        Ext.StoreMgr.get('attributeGridStore').load();
        Ext.StoreMgr.get('attributeSetComboStore').load();
    });
    the div with id "tabs" is inside of a TYPO3 Module. i'd like to render the whole extjs-gui into this div.

Thread Participants: 1