PDA

View Full Version : open panel in 'center' position in Layout Example



Stripeman
3 Jun 2009, 5:55 AM
hi...
I am trying to open a panel in the center position in a Viewport.. most of this is from teh complext example. The below code does work... but not like I think its meant to... when someone click on a icon on the left of the layout.. it shoudl open up the "textfunction" formpanel in the 'center' of the layout, as well as destroy the content currently in it. see before and after images attached. I am not sure if thsi is the right way to do it:
Ext.getCmp('MyColumnLayout3').setVisible(false);
then calling the function to display the desired panel.

I have looked and looked through examples and webpages.. but literally i can find no examples that show opening links into the desired regions.

I hope someone can assist... thanks..



Ext.onReady(function(){
//This is a MUST for ALL Ext scripts. It is the basis on which everything within Ext is aligned
Ext.BLANK_IMAGE_URL = '../images/s.gif';
// This allows you to have mouseover tooltips. Be sure to include this at all times as well
Ext.QuickTips.init();
PageInit();

}, this, true);

function PageInit(){
document.body.focus();
pageLayout = new pageLayout();
pageLayout.init();
pageLayout.createLayout();


}

// Get the params from the URL. This allows you to GET any param using this manner:
// var UrlArg = Ext.getUrlParam('int');
Ext.getUrlParam = function(param){
var params = Ext.urlDecode(location.search.substring(1));
return param ? params[param] : params;
}

Ext.namespace('pageLayout');

var pageLayout = function(){

//var nav = Ext.getUrlParam('nav');
var page = Ext.getUrlParam('page');
var start = Ext.getUrlParam('start');
var limit = Ext.getUrlParam('limit');
var sortOn;
var sortDir;
var metadataForm;
var viewport;


return {
init: function(){

var createPageLayout = function(){

if (!page) page = 'no content';

if (!limit) limit = 100; else limit = limit;
if (!start) start = 0; else start = start;
if (!sortOn) sortOn = "post_date"; else sortOn = sortOn;
if (!sortDir) sortDir = "DESC"; else sortDir = sortDir;


switch (page)
{
case ("new_requests"):
//New request function
break;
case ("approved_requests"):
//Approved Requests function
break;
case ("onhold_requests"):
//On Hold requests function
break;
case ("denied_requests"):
//Denied requests
break;
case ("user_admin"):
//user/group admin

break;
default:
p_panelsMainPage.init();

}

}();

},
MyCallback : function(error){
Ext.MessageBox.alert("Error", error, null, this); //title, msg, fn, scope
},
defaultFailedCallback : function(error, userContext, methodName){

Ext.MessageBox.alert("Error", error.get_message(), null, this); //title, msg, fn, scope

},
testfunction : function(){
Ext.msg.msg('Action', '<div style="color:#6B7952;">You clicked on the New List.</div>');
//Ext.getCmp('navPanels').innerHTML= '';
metadataForm = new Ext.form.FormPanel({
renderTo: 'navPanels',
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: 'Pending Records',
bodyStyle:'padding:5px 5px 0',
width: 350,
autoHeight: true,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Category',
name: 'categoryType',
allowBlank:false
},{
fieldLabel: 'Type Id',
name: 'typeId'
},{
fieldLabel: 'Description',
name: 'description'
}
],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}],
bbar: [{ text: 'Button'}],
listeners: {
render: function(p) {
p.footer.dom.appendChild(p.getBottomToolbar().el.dom);
}
}
});

Ext.getCmp('MyColumnLayout3').setVisible(false);

},
createLayout : function(){

viewport = new Ext.Viewport({
layout:'border',
autoDestroy: true,
id: 'mainViewPort',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:32
}),{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
},{
region:'west',
id:'west-panel',
title:'Navigation',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Main',
border:false,
iconCls:'nav'
},{
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}]
},
new Ext.TabPanel({
region:'center',
id: 'center',
deferredRender:false,
activeTab:1,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
}]
})
]
});

Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});

}
}

};

Animal
3 Jun 2009, 6:09 AM
What's with renderTo?

Why are yuo rendering stuff yourself, whe you know full well that that is the job of the Container's layout manager?

Stripeman
3 Jun 2009, 1:21 PM
Animal,
I dont know "full well".

A while back i was posting quite often here.. and had taken a long, involuntary break from PHP/intoductory Ext developement and never once before even touched a viewport.

I tried NOT using the renderTo.. but the grid would not display at all. In essence my post is saying something isnt right.

This is my first stab at using a viewport and just need a bit of guidence. Thanks for any help.

Animal
3 Jun 2009, 1:28 PM
The info is absolutely there in the docs. It has been repeated here by me probably 10 or more times per week since Ext 2.0 was released.

You absolutely MUST become familiar with the Container class

http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Container

http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Container&member=items

http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Container&member=layout

http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Container&member=add

http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Component&member=renderTo

So, how is this information obscured?

Stripeman
3 Jun 2009, 1:32 PM
I will hit these links hard Animal and if i still have questions i will bump this thread agian.. thanks.

Stripeman
4 Jun 2009, 12:38 AM
ok... after doing some reading, i see that if its a child of the container then yes it will open in a new tab with this:


Ext.getCmp('center').add(addRecord);
Ext.getCmp('center').setActiveTab(addRecord);

The result is attached. This is good stuff and thank you.

However, if i want the content to show in the middle of the page so that the grid or form is sized appropirately and isnt the WHOLE tab, I assume that i build the desired grid in another container in that tab(?).

also... REF http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Container&member=add

When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

I dont understand how this statement relates to this the example:

new Ext.Window({
width:300, height: 300,
layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
items: [{
title: 'Panel inside a Window'
}]
}).show();

how is the layout manager specified? 'FIT' is a layout manager ? I would expect a name, ID or something.

Stripeman
4 Jun 2009, 1:03 AM
also... why is it that when i click on the link a second time to open that tab the content is blank... but when i click on a different tab and back .. i see my form... .. did i miss something?

Animal
4 Jun 2009, 1:21 AM
layout: 'fit' uses an instace of Ext.layout.FitLayout to size a single child item exactly to fit the Container's available space.

Click a second time?

Show code.

Two things to remember. Container.remove destroys the removed Component by default. As described here (and you must follow links when you peruse docs): http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Container&member=remove

Component IDs must (of course) be unique.

Stripeman
4 Jun 2009, 5:05 AM
Should i use container.remove when i switch back and forth on tabs ?

about the click on second time please see result (attached images). Iam not sure if am supposed to do a "doLayout" somehow on an element or what...

code below:


Ext.namespace('pageLayout');

var pageLayout = function(){

//var nav = Ext.getUrlParam('nav');
var page = Ext.getUrlParam('page');
var start = Ext.getUrlParam('start');
var limit = Ext.getUrlParam('limit');
var sortOn;
var sortDir;
var addRecord;
var viewRecord;
var viewportMain;


return {
init: function(){

var createPageLayout = function(){

if (!page) page = 'no content';

if (!limit) limit = 100; else limit = limit;
if (!start) start = 0; else start = start;
if (!sortOn) sortOn = "post_date"; else sortOn = sortOn;
if (!sortDir) sortDir = "DESC"; else sortDir = sortDir;


switch (page)
{
case ("new_requests"):
//New request function
break;
case ("approved_requests"):
//Approved Requests function
break;
case ("onhold_requests"):
//On Hold requests function
break;
case ("denied_requests"):
//Denied requests
break;
case ("user_admin"):
//user/group admin

break;
default:
p_panelsMainPage.init();

}

}();

},
MyCallback : function(error){
Ext.MessageBox.alert("Error", error, null, this); //title, msg, fn, scope
},
defaultFailedCallback : function(error, userContext, methodName){

Ext.MessageBox.alert("Error", error.get_message(), null, this); //title, msg, fn, scope

},
fn_addRecord : function(){
Ext.msg.msg('Action', '<div style="color:#6B7952;">You clicked on the New List.</div>');
//Ext.getCmp('navPanels').innerHTML= '';
addRecord = new Ext.form.FormPanel({
//renderTo: 'navPanels',
///autoEl: 'div',
id: 'id_pendingRecords',
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: 'Pending Records',
bodyStyle:'padding:5px 5px 0',
width: 350,
closable: true,
autoHeight: true,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Category',
name: 'categoryType',
allowBlank:false
},{
fieldLabel: 'Type Id',
name: 'typeId'
},{
fieldLabel: 'Description',
name: 'description'
}
],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}],
bbar: [{ text: 'Button'}],
listeners: {
render: function(p) {
p.footer.dom.appendChild(p.getBottomToolbar().el.dom);
}
}
});
//viewport.getComponent('MyColumnLayout3').setVisible(false);
//Ext.getCmp('MyColumnLayout3').setVisible(false);
//var region = pageLayout.viewport.center.metadataForm;
Ext.getCmp('center').add(addRecord);
Ext.getCmp('center').setActiveTab(addRecord);
//Ext.getCmp('center').render();

},
fn_viewRecord: function (){

viewRecord = new Ext.TabPanel({
labelWidth: 75, // label settings here cascade unless overridden
id: 'id_viewRecord',
border:true,
frame:true,
closable: true,
title: 'Record Details',
bodyStyle:'padding:5px 5px 0',
activeTab:1,
tabPosition:'top',
height:400,
width:600,
items:[{
html:'<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll:true
},
new Ext.Panel({
id: 'id_viewRecord2',
border:true,
title: 'Viewing Record',
iconCls: 'icon-pkg',
frame:true,
closable: true,
items: [
new Ext.grid.PropertyGrid({
width:500,
height: 550,
title: 'Property Grid',
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
}
})
]
})
]
});

Ext.getCmp('center').add(viewRecord);
Ext.getCmp('center').setActiveTab(viewRecord);
},
createLayout : function(){

viewportMain = new Ext.Viewport({
layout:'border',
autoDestroy: true,
id: 'mainViewPort',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:32
}),{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
},{
region:'west',
id:'west-panel',
title:'Navigation',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Main',
border:false,
iconCls:'nav'
},{
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}]
},
new Ext.TabPanel({
region:'center',
id: 'center',
deferredRender:false,
activeTab:1,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
}]
})
]
});

this.viewportMain = viewportMain;

Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});

}
}

};

Animal
4 Jun 2009, 5:39 AM
Component IDs must (of course) be unique.

What is this contentEl? Why did you decide to use it?

http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Panel&member=contentEl.

STOP NOW.

Go back.

Start learning again.

Build slowly.

THE PRINCIPLE: CONTAINERS CONTAIN COMPONENTS. RENDERING AND SIZING THOSE COMPONENTS IS DONE BY THE CONTAINER'S LAYOUT.

That's it. When you get that, everything works. If you don't, nothing will. Nobody will write that app for yo. You have to learn the principle and then apply it.

Stripeman
11 Jun 2009, 11:37 AM
update...
I made a post http://extjs.com/forum/showthread.php?p=342209#post342209 showing my updated code (and a probably not a bug) post. I think i am getting the hang of it.. but I still am having problems opening alink from the left.. to pen in the Center panel.. sigh... i just dont know what I am doing wrong..

so a way around it i started using a switch statement to call the appropirate class/function based on a url param.

But i would still like to know how to do it the other way...

Stripeman
11 Jun 2009, 11:41 PM
From what I am understanding ... I should not have to specify what region my links are to open in.. it should default for 'center'.

I have specified my regions, but it just wont render properly without using:



new Ext.TabPanel({
region:'center',
id: 'center',
deferredRender:true,
defaults:{
bodyStyle: 'vertical-align:middle;'
},
activeTab:0,
items:[{
//id:'center2',
contentEl:'center2',
title: 'Center Panel',
bodyStyle: 'background-color: #f0f4f9;',
autoScroll:true
},{
//id:'center3',
contentEl: 'center3',
title: 'Center Panel2',
bodyStyle: 'background-color: #DEDEDE;',
autoScroll:true
}]
})



Then using


var panelsPkgEmail = new Ext.Panel({
layout:"table",
id:'MyColumnLayout3',
border:false,
renderTo: 'navPanels',
width:650,
hidden:false,
items: grid
});


Then I have to use the renderTo as well.. I just dont get what I am missing... I want to do this properly.

I hope someone can provide me some guidance... Thanks for any consideration...

btw... "navPanels" is an existing HTML "<div>" in the HTML of the page. i dont want to render stuff into static divs.. i want to render my stuff into a targeted tab in the 'center' region.
.
.
.

Stripeman
12 Jun 2009, 1:30 AM
ok.... I saw part of my problem was mixing el and id arguements with the HTML tag along with using the renderTo. I made sure every panel and accordion part had a unique id and removed the renderTo for that (each) panel.

However ... but it is till not clear to me how I would render a panel to a second tab (an then make it the active tab) when i click on my links from teh accordion on the left)

May i please have help with that? Im at my wits end!

Stripeman
12 Jun 2009, 6:26 AM
ok.. i am talking to myself....

But i have some updated code... I have changed the items in the container to be an xtype for each tab and panel that I am trying to add and I think i have everything cleaned up... however.. same damned problem.. i cant seem to get my panel display in the "center_tab1" tab... grrrrrr

I think my viewport is fine.. its just am missing something in my panel I am tring to get inserted into that tab...

its nothing complex I am sure .. and all pieces seem to be working fine..

For clarity... I have attached all the files. not that I am expecting someone to sift through all of it..

My main question is how do i get the class "p_panelsMainPage" located in the mainPage.js file to view in the "center_tab1" tab located in the layout.js file ?

I would appreciate any assistance.

Stripeman
15 Jun 2009, 4:23 AM
wow...i reckon its good to take your eyes away and revisit issues!

I did mor searching and found what i wasnt doing it...


p_panelsMainPage.init();
this.viewportMain.doLayout();

So now it works without specifing the tab.. except.. it IS normal isnt it when i want a tab to be prefilled with a panel to use a "applyTo"? Else the link opens in a new tab and i want it to open in the first tab (already existing). This would infact be expected behavior right?