1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Answers
    3
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default Unanswered: Why does this panel not render?

    Unanswered: Why does this panel not render?


    Can anyone telling me why this component isn't rendering properly when i run this method? The goal is to replace the center part of a border layout with a new object, a container with 2 panels inside.

    I'm pretty sure the code is finding each of the right sections, because I put a test method on only those components and they all report back, but when I try the replace I get an empty patch broken into two. My guess was the container is rendering but the inner components aren't, but since AfterRender and AfterLayout don't run when i do it, maybe it's the container.

    Here's the code for the method I'm calling:
    Code:
    openJob: function(jobno) {         
    
    jobPanel = Ext.create('MyApp.view.jobcontainer');
    jobPanel.test();
    //Build the new panel object we will be using
    
    
    viewport = Ext.getCmp('mainwindow');
    viewport.test();
    centerRegion = viewport.getComponent(1);
    centerRegion.test();
    //Locate the region we wish to replace
    
    centerRegion.removeAll();
    
    /*jobPanel.add(Ext.create('MyApp.view.MyForm'));
    jobPanel.add(Ext.create('MyApp.view.MyTabPanel'));
    jobPanel.eachChild(function(child) { child.doLayout(); });*/
    jobPanel.doLayout();
    
    centerRegion.add(jobPanel);
    centerRegion.doLayout();
    //Replace the panel and refresh that region
    
    alert("Done");
    //Load the job details
    
    }
    And here's the code for the container i'm trying to add:
    Code:
    Ext.define('MyApp.view.jobcontainer', {
        extend: 'Ext.container.Container',
        alias: 'widget.newjob',
    
        requires: [
            'MyApp.view.MyForm',
            'MyApp.view.MyTabPanel'
        ],
    
        height: 250,
        width: 400,
        layout: {
            type: 'border'
        },
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'myform',
                        title: 'Job',
                        region: 'north'
                    },
                    {
                        xtype: 'mytabpanel',
                        region: 'center'
                    }
                ],
                listeners: {
                    afterlayout: {
                        fn: me.onContainerAfterLayout,
                        scope: me
                    },
                    afterrender: {
                        fn: me.onContainerAfterRender,
                        scope: me
                    }
                }
            });
    
            me.callParent(arguments);
        },
    
        onContainerAfterLayout: function(abstractcontainer, layout, options) {
            alert("I am HERE!");
        },
    
        onContainerAfterRender: function(abstractcomponent, options) {
            alert("I am HERE!");
        },
    
        test: function() {
            alert('Jobcontainer, reporting!');
        }
    
    });

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    you can try following code:

    Code:
    var view=Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            border: false,
            title:'North',
            margins: '0 0 5 0'
       		, items:[{
          		xtype:'button'
                , text:'getRegion'
                , handler:function(){
                	view.remove('panel');
                    view.add(new Ext.container.Container({ 
                        region:'center',
                        layout:'hbox',
                        items:[
                        	{
                            	xtype:'panel'
                                , title:'panelOne'
                                , html:'Hi'
                                , height:100
                                , width:200
                            },
                            {
                            	xtype:'panel'
                                , title:'panelTwo'
                                , html:'Hello'
                                , height:150
                                , width:200
                            }
                        ]
                    }));
                    view.doLayout();
                }
            }]
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 150
        }, {
            region: 'south',
            title: 'South Panel',
            collapsible: true,
            html: 'Information goes here',
            split: true,
            height: 100,
            minHeight: 100
        }, {
            region: 'east',
            title: 'East Panel',
            collapsible: true,
            split: true,
            width: 150
        }, {
            region:'center',
            id:'panel',
            title:'center'
        }]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Answers
    3
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default


    Thanks Sword-IT, i think you were on the right track

    The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added**. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.panel.Panel) is added to the west region:
    I think this may have been where i was going wrong. I was trying to directly replace a component and that wasn't allowed... so instead of making the panel i wanted to replace a direct member of the border layout, i put a container in the center region, and then replace the content of THAT instead of touching the content of the layout directly.

    The AfterLayout method not triggering was what gave it away eventually... Turns out the divided section is empty and divided because i removedAll first, but then couldn't add (the section i was replacing happened to be divided the same way)

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar