1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    26
    Vote Rating
    0
    dme69 is on a distinguished road

      0  

    Default newbie - layout / tabs and extending classes

    newbie - layout / tabs and extending classes


    Hello all,
    Sorry for asking this kind of questions but i have some difficulties to find the solutions(But I work on ! )

    I want to make a general application with a complex layout. I want to extend classes and ad some functions :

    - complex layout :
    Code:
    MyInterface = Ext.extend(Ext.Viewport, {
        id: 'interface',
        initComponent: function(){
            Ext.apply(this, {
                renderTo: 'content',
    			layout:'border',
    		defaults: {
    		    collapsible: true,
    		    split: true,
    		    bodyStyle: 'padding:15px'
    		},
    		items: [{
    		    title: 'Informations',
    		    region: 'south',
    		    height: 50,
    		    minSize: 75,
    		    maxSize: 250,
    		    cmargins: '5 0 0 0'
    		},{
    		    region: 'north',
    		    height: 50,
    		    cmargins: '5 0 0 0'
    		},{
    		    title: 'Navigation',
    		    region:'west',
    		    margins: '5 0 0 0',
    		    cmargins: '5 5 0 0',
    		    width: 175,
    		    minSize: 100,
    		    maxSize: 250
    		},{
    		    title: 'Mon portail',
    			id: 'center_dme',
    		    collapsible: false,
    		    region:'center',
    		    margins: '5 0 0 0'
    		}]
            });
            MyInterface.superclass.initComponent.apply(this, arguments);
    
    //        this.addEvents('custom_event');
        },
    	testfunct: function() {alert("Test message");
    		MyInterface.superclass. testfunct.apply(this, arguments);
    	}
    });
    The layout is working.

    I want to add tabs in the center region and I want to have a button that give the user to add tabs.

    Code:
    MyTabs = Ext.extend(Ext.TabPanel, {
    	initComponent: function(){
    		Ext.apply(this, {
    			renderTo:'center_dme',
    			resizeTabs:true, // turn on tab resizing
    			minTabWidth: 115,
    			tabWidth:135,
    			enableTabScroll:true,
    			defaults: {autoScroll:true}
    		});
    		MyTabs.superclass.initComponent.apply(this, arguments);
    	},
    	addTab: function (){
    		this.add({
    			title: 'New Tab ',
    			iconCls: 'tabs',
    			html: 'Tab Body ',
    			closable:true
    			}).show();
    			MyTabs.superclass.addTab.apply(this, arguments);
    		}
    	});
    This is where i can't make it work.
    Can someone help me ?
    Thanks.
    Dominique.

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    "can't make it work" doesn't describe what your problem is.

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    26
    Vote Rating
    0
    dme69 is on a distinguished road

      0  

    Default


    :-(
    Sorry.

    here is my code in the html file :
    Code:
    	<script type="text/javascript" charset="utf-8">
    		Ext.onReady(function(){
    		    var interface = new MyInterface({});
    			var tabs = new MyTabs({});
    		});
    		
    	</script>
    2 things :
    - No tab in the center region
    - I don't know how to declare and use a function in a class (in my case addTab)

    If I add this code in the html file Some tabs appears in the bottom of the center region :
    Code:
    		    var index = 0;
    		    while(index < 7){
    		        addTab();
    		    }
    			function addTab(){
    		        tabs.add({
    		            title: 'New Tab ' + (++index),
    		            iconCls: 'tabs',
    		            html: 'Tab Body ',
    		            closable:true
    		        }).show();
    		    }
    I know it's because I'm new to object programming but I need help to point me to the good direction. I have other things to do but if someone help me for this part I'm quite sure (I hope so ;-) ) I will be able to do the other things because I want to be a better programmer.
    Thanks for your help.
    Dominique.

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Suggest you post your html file, I'm lost what your question is now.

  5. #5
    Ext User
    Join Date
    Jul 2008
    Posts
    26
    Vote Rating
    0
    dme69 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mjlecomte View Post
    Suggest you post your html file, I'm lost what your question is now.
    One day I will work on my english too ;-)

    There is nothing in my code as I'm lost in how to do the job :
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<title>wymod</title>
    	<script type="text/javascript" src="./adapter/ext/ext-base.js"></script>
    	<script src="./ext-all.js" type="text/javascript" charset="utf-8"></script>
    	<script src="./interface.js" type="text/javascript" charset="utf-8"></script>
    	<script src="./MyTabs.js" type="text/javascript" charset="utf-8"></script>
    	
    	<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css">
    	<script type="text/javascript" charset="utf-8">
    		Ext.onReady(function(){
    		    var interface = new MyInterface({});
    			var tabs = new MyTabs({});
    		    // tab generation code	    
    		});
    		
    	</script>
    </head>
    
    <body>
    	<div id="dme">
    		dme
    		</div>
    <div id="content">
    </div>
    </body>
    </html>
    I want to have something like the portal example but all in javascript with the ability to add some new tabs in the center.
    For me Extjs seems to be very powerfull but it's hard to begin.
    I don't want to take all your time. It's really cool that you try to help me. Thanks.

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Code:
    MyInterface = Ext.extend(Ext.Viewport, {
        id: 'interface',
        initComponent: function(){
            Ext.apply(this, {
                renderTo: 'content',
    			layout:'border',
    		defaults: {
    		    collapsible: true,
    		    split: true,
    		    bodyStyle: 'padding:15px'
    		},
    		items: [{
    		    title: 'Informations',
    		    region: 'south',
    		    height: 50,
    		    minSize: 75,
    		    maxSize: 250,
    		    cmargins: '5 0 0 0'
    		},{
    		    region: 'north',
    		    height: 50,
    		    cmargins: '5 0 0 0'
    		},{
    		    title: 'Navigation',
    		    region:'west',
    		    margins: '5 0 0 0',
    		    cmargins: '5 5 0 0',
    		    width: 175,
    		    minSize: 100,
    		    maxSize: 250
            }, 
                new MyTabs({
                    region: 'center'
    
                })
            ]
            });
            MyInterface.superclass.initComponent.apply(this, arguments);
    
    //        this.addEvents('custom_event');
        },
    	testfunct: function() {alert("Test message");
    		MyInterface.superclass. testfunct.apply(this, arguments);
    	}
    });
    Code:
    MyTabs = Ext.extend(Ext.TabPanel, {
    	initComponent: function(){
    		Ext.apply(this, {
    			// NO! // renderTo:'center_dme',
    			resizeTabs:true, // turn on tab resizing
    			minTabWidth: 115,
    			tabWidth:135,
    			enableTabScroll:true,
    			defaults: {autoScroll:true}
    		});
    		MyTabs.superclass.initComponent.apply(this, arguments);
    	},
    	addTab: function (){
    		this.add({
    			title: 'New Tab ',
    			iconCls: 'tabs',
    			html: 'Tab Body ',
    			closable:true
    			}).show();
    			MyTabs.superclass.addTab.apply(this, arguments);
    		}
    	});

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    I guess you want to then add a button somewhere, perhaps to the toolbar. You'll specify a handler. The handler will get a reference to your tab panel instance, and then call the addTab method.

    Suggest you look at the layout browser demo and learn/understand that you want to add() to containers, NOT render. About the only thing you would need to render is the viewport. EVERYTHING after that you should be using the accessor methods of add() or remove().

  8. #8
    Ext User
    Join Date
    Jul 2008
    Posts
    26
    Vote Rating
    0
    dme69 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mjlecomte View Post
    I guess you want to then add a button somewhere, perhaps to the toolbar. You'll specify a handler. The handler will get a reference to your tab panel instance, and then call the addTab method.

    Suggest you look at the layout browser demo and learn/understand that you want to add() to containers, NOT render. About the only thing you would need to render is the viewport. EVERYTHING after that you should be using the accessor methods of add() or remove().
    Thank you for your help. I'm going to search again. I hate myself when i do not understand what i do ! But I will learn !
    Thanks again.
    Dominique.

Thread Participants: 1