PDA

View Full Version : question about what to learn and where to look for knowladge



lormitto
27 Jan 2010, 3:40 AM
Hi,

I am newbie here. I try to build one relatively simple application.
I face some difficulties.
Could you please point me to where I can find information how to resolve issue I've got at the moment?
I've got two panels, left and center. I placed some buttons on left one and would build reaction on clicking these buttons to change what is presented in centered panel. Right now there is an editor grid in center panel but I would like it to appear on clicking particular buttons as well as I would like to add more "centered panels" appearing after clicking buttons.
It is like kind of skeleton for application where menu is vertical on the left part and all data is in centered panel.

Thank you for any help in advance.

Kind Regards

jsemmanuel
27 Jan 2010, 5:18 AM
One way would be this. a bit complicated through.
http://www.extjs.com/deploy/dev/examples/grouptabs/grouptabs.html

Or you could check out
http://www.extjs.com/deploy/dev/examples/layout/complex.html#
have a look at the center panel in the center region and the link in it. it performs an action on the west region. Similar to what you want.

lormitto
27 Jan 2010, 5:23 AM
I noticed group tabs before however it seems to be complicated for me. I could not find any documatenion or easier example. I will try to take advantage of it.

Thank you for answering.

jsemmanuel
27 Jan 2010, 5:24 AM
make the panels and post the code here. someone will help with your queries then.

lormitto
27 Jan 2010, 5:39 AM
I try with code here if anyone could help:




sPanel = {
title: 'sout Panel',
region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
collapsed: true
}

wPanel = {
title: 'Menu',
region: 'west',
width: 175,
minSize: 100,
maxSize: 250,
margins: '0 0 0 0',
cmargins: '0 5 0 0',
items: [

new Ext.Toolbar({
items: [{
xtype: 'tbbutton',
text: '1'
}]}),
new Ext.Toolbar({
items: [{
xtype: 'tbbutton',
text: '2'
}]}),
new Ext.Toolbar({
items: [{
xtype: 'tbbutton',
text: '3'
}]}),
new Ext.Toolbar({
items: [{
xtype: 'tbbutton',
text: '4'
}]}),
new Ext.Toolbar({
items: [{
xtype: 'tbbutton',
text: '5'
}]}),
new Ext.Toolbar({
items: [{
xtype: 'tbbutton',
text: '6'
}]})

]
}


cPanel = {
title: '',
collapsible: false,
region: 'center',
margins: '0 0 0 0',
layout:'fit',
items:
[ListingEditorGrid]
}

var container = new Ext.Viewport({
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding: 0px'
},
items: [sPanel, wPanel, cPanel]
});



The best idea would be to use gruped tabs to eliminate buttons and connect links to cenetered panel(cPanel) to present data depending on button clicked.

Thank you in advance

lormitto
27 Jan 2010, 6:23 AM
maybe there is a way to change panel's items after clicking on a button?

Mike Robinson
27 Jan 2010, 7:43 AM
Perhaps you should consider another approach ... something else that you could do besides "adding another panel on the fly" ... which requires another call to doLayout but which also is probably going to be visually-disruptive to your users. There is only so-much "screen real-estate," and when your users run out of that, "what do you intend for them to do?" If their eyesight is not-so-good and they're using 1024x768 or lower resolution, or maybe a portable phone ... "what are they to do?"