Results 1 to 7 of 7

Thread: preconfigured classes help!!!

  1. #1

    Question preconfigured classes help!!!

    hi there
    can i use a preconfigured and registered class inside another preconfigured and registered class??? this seems and fool (and maybe annoying) question but i have this scenario and if i replace:
    Code:
    new Ext.Panel ({
    		renderTo: Ext.getBody(),
    		items: [myForm]
    	});
    with
    Code:
    new Ext.Panel ({
    		renderTo: Ext.getBody(),
    		items: [{xtype: 'secsform'}]
    	});
    i get an error using the following definition:
    Code:
    ExtApp.Forms.FSections = Ext.extend(Ext.form.FormPanel, {
    		labelWidth: 125, // label settings here cascade unless overridden
    	  frame:true,
    	  title: 'Sections Panel test',
    	  bodyStyle:'padding:5px 5px 0;background-color: white',
    	  width: 350,
    	  defaults: {width: 230},
    /*	
    	  items: [
    	  	{xtype:'combosec', fieldLabel:'Combo Sections', name:'fromComboSecs'}
    	  ],
    */
    		items: [myCombo],
    				
    		initComponent: function () {
    			Ext.apply (this, { });
    			
    			ExtApp.Forms.FSections.superclass.initComponent.apply (this, arguments);
    		},
    		
    		onRender: function () {
    			ExtApp.Forms.FSections.superclass.onRender.apply (this, arguments);
    		}
    });
    Ext.reg('secsform', ExtApp.Forms.FSections);
    im trying to debug but im running out of memory and processing power...

    any suggestion is very welcome!!!
    zanx in advance

    w i l l y

  2. #2

  3. #3

    Default

    Quote Originally Posted by mjlecomte View Post
    "an error" is pretty vague isn't it?
    well, sorry, i didnt wanna paste the call stack because i though my question was clear enough (whether or not i can "nest" preconfigured classes... and i suppossed so...).

    the call stack is as follows
    Code:
    this.items.add is not a function
    add(Object initialConfig=Object editable=false mode=remote)ext-all-debug.js (line 13888)
    initComponent()ext-all-debug.js (line 13820)
    initComponent()ext-all-debug.js (line 15578)
    initComponent()ext-all-debug.js (line 27827)
    initComponent()testpage.js (line 39)
    Component(Object xtype=secsform title=Alternative title)ext-all-debug.js (line 12165)
    constructor()ext-base-debug.js (line 79)
    constructor()ext-base-debug.js (line 79)
    constructor()ext-base-debug.js (line 79)
    constructor()ext-base-debug.js (line 79)
    constructor()ext-base-debug.js (line 79)
    create(Object xtype=secsform title=Alternative title, "panel")ext-all-debug.js (line 12106)
    createComponent(Object xtype=secsform title=Alternative title)ext-all-debug.js (line 13979)
    lookupComponent(Object xtype=secsform title=Alternative title)ext-all-debug.js (line 13973)
    add(Object xtype=secsform title=Alternative title)ext-all-debug.js (line 13885)
    initComponent()ext-all-debug.js (line 13820)
    initComponent()ext-all-debug.js (line 15578)
    Component(Object renderTo=Object items=[1])ext-all-debug.js (line 12165)
    constructor()ext-base-debug.js (line 79)
    constructor()ext-base-debug.js (line 79)
    constructor()ext-base-debug.js (line 79)
    innerInit()testpage.js (line 72)
    fire()ext-all-debug.js (line 1505)
    fireDocReady()ext-all-debug.js (line 1542)
    [Break on this error] this.items.add(c);
    where innerInit() is the only method i wrote from those appearing in the call stack:
    PHP Code:
    theApp = function () {
        var 
    onePanel;
        
        function 
    innerInit () {
            
    Ext.QuickTips.init();
            
            
    onePanel = new Ext.Panel ({
                
    renderToExt.getBody(),
                
    items: [{xtype'secsform'title:'Alternative title'}]
    //                items: [myForm] // it works!!
            
    });
            
            
    onePanel.render();
        };
        
        return {
            
    initinnerInit,
            
    panelonePanel
        
    }
    }

    var 
    test = new theApp ();
    Ext.onReady (test.inittest); 
    it seems it dont recognize the xtype or something (i dont know exactly how lazy rendering works). As i told in the first post, changing the preconfigured class for a instance with the same config options works. I can use the last approach (using objects) but i wanted to use lazy rendering coz is recommended and finer (better application structure).

    i will continue debugging the stuff and changing zings for a while before giving it up, but any hint will be welcome.

    zanx in advance and sorry for inconveniences

    w i l l y

    ps: the code is the same as the first post

  4. #4

    Default [SOLVED] preconfigured classes help!!!

    Well, i found out it is better not to include the items config option as normal config options in preconfigured classes, only simple values seem to work ok. But it is possible to include them in the initComponent() method... so, i imagine that is in that method where the items are added to the containers, arent they?

    cheers people

    w i l l y

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Quote Originally Posted by haleboppp View Post
    Well, i found out it is better not to include the items config option as normal config options in preconfigured classes, only simple values seem to work ok. But it is possible to include them in the initComponent() method... so, i imagine that is in that method where the items are added to the containers, arent they?

    cheers people

    w i l l y
    There are several examples of using xtypes with other configs, unless I missed your point.

    I was going to suggest you compare the stacks to see if you could figure something out:

    Code:
        function innerInit () {
            Ext.QuickTips.init();
            
            onePanel = new Ext.Panel ({
                renderTo: Ext.getBody(),
    //            items: [{xtype: 'secsform', title:'Alternative title'}]
                   items: [myForm] // it works!!
            });
            console.trace();
    
            onePanel2 = new Ext.Panel ({
                renderTo: Ext.getBody(),
                items: [{xtype: 'secsform', title:'Alternative title'}]
    //                items: [myForm] // it works!!
            });
            console.trace();

  6. #6

    Default

    I was going to suggest you compare the stacks to see if you could figure something out:
    Code:
        
            console.trace();
    
            onePanel2 = new Ext.Panel ({
                renderTo: Ext.getBody(),
                items: [{xtype: 'secsform', title:'Alternative title'}]
    //                items: [myForm] // it works!!
            });
            console.trace();
    zanx!!!
    i dont use the console object so much because i don use firebug. now im using firefox 3b5 because of memory leaks problems with firefox 2 and there isnt firebug for this browser and i use a combination of error console and venkman debugger... besides, the javascript stack trace is a bit messy (im used to see java exceptions, which use to be more informative).

    on the other hand, the hint for comparison is welcome for future issues, zanx again... and, talkin' about that, do you know where event listeners has to be in preconfigured classes? i am trying to follow this skeleton:
    PHP Code:
    MyScope Ext.extend(Ext.form.ComboBox, {
        
    // configurables
        // anything what is here can be configured from outside
         
    border:false

        
    // {{{
        
    ,initComponent:function() {
            
    // {{{
            
    Ext.apply(this, {
                
    // anything here, e.g. items, tools or buttons arrays,
                // cannot be changed from outside
            
    }); // e/o apply
            // }}}

            // call parent
            
    MyScope.superclass.initComponent.apply(thisarguments);

            
    // after parent code here, e.g. install event handlers

        
    // e/o function initComponent
        // }}}
        // {{{
        
    ,onRender:function() {

            
    // before parent code

            // call parent
            
    MyScope.superclass.onRender.apply(thisarguments);

            
    // after parent code, e.g. install event handlers on rendered components
            
        
    // e/o function onRender
        // }}}
        
        // any other added/overrided methods

    }); // e/o extend

    // register xtype
    Ext.reg('mycomponentxtype'MyScope); 
    and i trying to use in:
    PHP Code:
    initComponent: function () {
                
    Ext.apply (this, {
                    
    items: [
                        {
    xtype'x-combosec'},
                        {
    xtype'button'text'New...',
                         
    listeners: [
                             {
    click: function (btnev) {
                                            
    Ext.Msg.alert ('button '+btn.text+' clicked');
                                        }            
                     }
                   ]}
                    ],
                    
                    
    buttons: [
                    {
                
    text'New...',
                
    listeners:[
                    {
    click: function (btnev) {
                                        
    Ext.Msg.alert ('button '+btn.text+' clicked');
                                    }            
                    }]
                    }] 
    // end buttons
                
    });
                
                
    ExtApp.Forms.FSections.superclass.initComponent.apply (thisarguments);
            }, 
    but it doesnt work and i dont get any error. this is a kind of clumsiness from my own, but what is wrong?

    zanx again

    w i l l y

  7. #7

    Default

    his is a bug in the Ext JS code. First of all everything declared in the Ext.extend (including items) ends up in the new class

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •