1. #1
    Ext User
    Join Date
    Dec 2007
    Location
    italy
    Posts
    120
    Vote Rating
    0
    tarini is on a distinguished road

      0  

    Default difference between xtype and custom class... why??

    difference between xtype and custom class... why??


    Hi guys,
    I've got some problem about collapsible and margins property for BorderLayout.region..

    If I add some JSON (using xtype) to items in this way i've got no problems:

    Code:
    initComponent = function() {
    this.items = [{
    			region: 'west',
    			title: "Menu",
    			width: 180,
    			split: true,
    			rootVisible: true,
    			xtype:'treepanel',
    			collapsible: true,
    			margins: {
    				top:3, bottom:3, left: 3, right: 3
    			},
    			root: new Ext.tree.TreeNode({
    				text: "GExt",
    				expanded: true,
    				expandable: true,
    				leaf: true
    			})
    		}, {....}];
    //call superclass initComponent
    }
    but if i create a custom version of TreePanel in this way

    Code:
    myTreePanel = Ext.extend(Ext.tree.TreePanel, {
    region: 'west',
    			title: "Menu",
    			width: 180,
    			split: true,
    			rootVisible: true,
    			xtype:'treepanel',
    			collapsible: true,
    			margins: {
    				top:3, bottom:3, left: 3, right: 3
    			},
    			root: new Ext.tree.TreeNode({
    				text: "GExt",
    				expanded: true,
    				expandable: true,
    				leaf: true
    			})
    });
    
    
    [....]
    
    
    initComponent: function() {
    this.items = [
    new myTreePanel(), 
    [...]
    ];
    //superclass
    }

    margins won't exists and collapsible doesn't work very well (titlebar remains visible)...

    My problem is that I NEED custom classes because my application is very large and i use custom methods inside my widget classes

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    This:
    Code:
    myTreePanel = Ext.extend(Ext.tree.TreePanel, {
    	...
    	root: new Ext.tree.TreeNode({
    		...
    	})
    });
    will add 'root' to the myTreePanel prototype.

    This means that for all instances of myTreePanel there would be only one root instance. Which obviously would never work!

    Do NOT put config options in the prototype. Assign them to the instance in the initComponent method (or even better: the constructor).

    ps. Since you're not adding any functionality to the treepanel a simple factory method would be even better.

  3. #3
    Ext User
    Join Date
    Dec 2007
    Location
    italy
    Posts
    120
    Vote Rating
    0
    tarini is on a distinguished road

      0  

    Default


    creating root panel in this way it's wrong, i agree with you

    but this was just an example to introduce my problem about some "static" configuration like margins and collapsible that should be used like other "static" configuration like width or split but that don't work...

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I depends on the Ext JS code which config options can be used in the prototype and which not.

    My advise is to never put a config option in the prototype, since you can't predict if it will work.

  5. #5
    Ext User
    Join Date
    Dec 2007
    Location
    italy
    Posts
    120
    Vote Rating
    0
    tarini is on a distinguished road

      0  

    Default


    the problem is not the "prototype or not prototype" properties... (i tried setting props in constructor but the results is the same)

    The problem is about xtype and his difference with custom classes


    in my situation I can't use xtype and I have to instantiate classes...


    this 2 object behaves different when added to an items array of a container:
    Code:
    var tree = {
    			region: 'west',
    			title: "Menu",
    			width: 180,
    			split: true,
    			rootVisible: true,
    			xtype:'treepanel',
    			collapsible: true,
    			margins: {
    				top:3, bottom:3, left: 3, right: 3
    			},
    			root: new Ext.tree.TreeNode({
    				text: "GExt",
    				expanded: true,
    				expandable: true,
    				leaf: true
    			})
    		}
    Code:
    var tree = new Ext.tree.TreePanel({
    region: 'west',
    			title: "Menu",
    			width: 180,
    			split: true,
    			rootVisible: true,
    			collapsible: true,
    			margins: {
    				top:3, bottom:3, left: 3, right: 3
    			},
    			root: new Ext.tree.TreeNode({
    				text: "GExt",
    				expanded: true,
    				expandable: true,
    				leaf: true
    			})
    });
    Last edited by tarini; 21 Jan 2009 at 4:11 AM. Reason: errors in code

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The properties used by the border layout (margins and collapsible) are read from the Component's initialConfig property which is set by the constructor.

    So setting on the prorotype or in initComponent won't work.

    I think Jack made a rod for his own (or any support volunteers) back when encouraging use of initComponent.

    The safe way to extend is

    Code:
    MyClass = Ext.extend(BaseClass, {
        constructor: function(config) {
    
    //     Create a new config object by overriding an object containing our default settings
    //     with those passed in by the caller
            config = Ext.apply({
                defaultConfig: defaultConfigValue,
                ... etc. Your defaults
             }, config);
    
    //      Pass the config to the constructor to construct this object as usual
            MyClass.superclass.constructor.call(this, config);
        }
    });

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The only difference I can think of is handling of the defaults config option of the container.

    Applying defaults to an xtype config object works correctly, but applying defaults to a component only works if the defaults are writable properties.

  8. #8
    Ext User
    Join Date
    Dec 2007
    Location
    italy
    Posts
    120
    Vote Rating
    0
    tarini is on a distinguished road

      0  

    Default


    animal your approach was right

    I've tried and it works... I think I will keep "generic" properties as prototype and will set "border-layout" properties in the constructor

    thanks

    PS emphasis this behaviuor in api docs?

Thread Participants: 2