Hybrid View

  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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi