newbie - layout / tabs and extending classes

**dme69** · 31 Jan 2009 4:14 AM

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.

**mjlecomte** · 31 Jan 2009 5:08 AM

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

**dme69** · 31 Jan 2009 5:18 AM

:-(
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.

**mjlecomte** · 31 Jan 2009 5:45 AM

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

**dme69** · 31 Jan 2009 5:54 AM

Originally Posted by mjlecomte

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.

**mjlecomte** · 31 Jan 2009 6:04 AM

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);
		}
	});

**mjlecomte** · 31 Jan 2009 6:08 AM

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().

**dme69** · 31 Jan 2009 6:18 AM

Originally Posted by mjlecomte

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.

newbie - layout / tabs and extending classes

Thread Tools

Search Thread

Display

newbie - layout / tabs and extending classes

newbie - layout / tabs and extending classes