PDA

View Full Version : newbie question



nickweavers
10 Oct 2009, 5:27 PM
I am new to extJs and just finding my feet. I have got a viewport and in the west region i have a tree menu that looks like this:


region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({
method: 'Get',
dataUrl : 'json_tree.php',
}),
root: new Ext.tree.AsyncTreeNode(),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Ajax.request({
url: 'dummy_content.php' + n.attributes.qry_str,
success: function(response, options) {
content = response.responseText;
},
failure: function(response, options) {
alert('ajax call failed');
},
});
}
}
},

The json loaded from the server for the menu looks something like this:

[
{
text: 'Clients',
leaf: true,
}, {
text: 'Venues',
leaf: true
}, {
text: 'Employees',
leaf: false,
children: [{
text: 'List',
leaf: true,
qry_str: '?task=show_list_of_employees'
}, {
text: 'Worksheets',
leaf: true,
qry_str: '?task=show_employee_worksheets'
}]
}, {
text: 'Events',
leaf: true
}
I would like the data returned as a response from the "click" listener to be placed in tab 'center1' of the tabPanel in the centre region of the viewport. How do do i do that?

The centre region is currently code like this:


new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
id: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
id: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})
Many thanks,
Nick

nickweavers
10 Oct 2009, 5:40 PM
I am new to extJs and just finding my feet. I have got a viewport and in the west region i have a tree menu that looks like this:


region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({
method: 'Get',
dataUrl : 'json_tree.php',
}),
root: new Ext.tree.AsyncTreeNode(),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Ajax.request({
url: 'dummy_content.php' + n.attributes.qry_str,
success: function(response, options) {
content = response.responseText;
},
failure: function(response, options) {
alert('ajax call failed');
},
});
}
}
},

The json loaded from the server for the menu looks something like this:


{
text: 'Clients',
leaf: true,
}, {
text: 'Venues',
leaf: true
}, {
text: 'Employees',
leaf: false,
children: [{
text: 'List',
leaf: true,
qry_str: '?task=show_list_of_employees'
}, {
text: 'Worksheets',
leaf: true,
qry_str: '?task=show_employee_worksheets'
}]
}, {
text: 'Events',
leaf: true
}


I would like the data returned as a response from the "click" listener to be placed in tab 'center1' of the tabPanel in the centre region of the viewport. How do do i do that?

The centre region is currently coded like this:


new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
id: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
id: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})


It could be that the response is html, or json to create a grid, or a form, so I know about the render that could handle the html. I am really after how to dynamically create different types of objects in a viewport region, depending on menu choices made by users.

Many thanks,
Nick

nickweavers
10 Oct 2009, 5:54 PM
Apologies if more that one post appear for this same entry... I waited 10 minutes in between each attempt but nothing appeared on the forum... if this fails I'll try again tomorrow...

I am new to extJs and just finding my feet. I have got a viewport and in the west region i have a tree menu that looks like this:


region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({
method: 'Get',
dataUrl : 'json_tree.php',
}),
root: new Ext.tree.AsyncTreeNode(),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Ajax.request({
url: 'dummy_content.php' + n.attributes.qry_str,
success: function(response, options) {
content = response.responseText;
},
failure: function(response, options) {
alert('ajax call failed');
},
});
}
}
},

The json loaded from the server for the menu looks something like this:


{
text: 'Clients',
leaf: true,
}, {
text: 'Venues',
leaf: true
}, {
text: 'Employees',
leaf: false,
children: [{
text: 'List',
leaf: true,
qry_str: '?task=show_list_of_employees'
}, {
text: 'Worksheets',
leaf: true,
qry_str: '?task=show_employee_worksheets'
}]
}, {
text: 'Events',
leaf: true
}


I would like the data returned as a response from the "click" listener to be placed in tab 'center1' of the tabPanel in the centre region of the viewport. How do do i do that?

The centre region is currently coded like this:


new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
id: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
id: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})


It could be that the response is html, or json to create a grid, or a form, so I know about the render that could handle the html. I am really after how to dynamically create different types of objects in a viewport region, depending on menu choices made by users.

Many thanks,
Nick

nickweavers
11 Oct 2009, 5:13 AM
Hi, I have a tree menu whose leaf nodes I would like to be used to choose from a number of server side sources of data to populate a grid.
I looked at using a listener on the leaf nodes and I see that I can get information from the leaf attributes that could provide my server query string:


{
Json for tree:

text: 'Employees',
leaf: false,
children: [{
text: 'List',
leaf: true,
qry_str: '?task=show_list_of_employees'
}, {
text: 'Worksheets',
leaf: true,
qry_str: '?task=show_employee_worksheets'
}]
}



tree code:

root: new Ext.tree.AsyncTreeNode(),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Ajax.request({
url: 'dummy_content.php' + n.attributes.qry_str,
success: function(response, options) {
content = response.responseText;
//alert('got back: ' + content);
},
failure: function(response, options) {
alert('ajax call failed');
},
});
}
}


So at the moment I am just putting the result of the server query into a variable. I just can't seem to figure out how to hook up a grid object so that it would use the results of the server query for it's column/row data. Can anyone get me going in the right direction please? I see in the API definition for the Ext.grid.gridPanel class there is a listener, and there is also a store: attribute that can be used to hook up a data source, but I can't work out how to use either to achieve my hook up.

TIA,
Nick.

nickweavers
11 Oct 2009, 11:58 AM
I am new to extJs and just finding my feet. I have got a viewport and in the west region i have created a tree menu using json passed from my server:


region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({
method: 'Get',
dataUrl : 'json_tree.php',
}),
root: new Ext.tree.AsyncTreeNode(),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Ajax.request({
url: 'dummy_content.php' + n.attributes.qry_str,
success: function(response, options) {
content = response.responseText;
},
failure: function(response, options) {
alert('ajax call failed');
},
});
}
}
},

The json loaded from the server for the menu looks something like this:


{
text: 'Clients',
leaf: true,
}, {
text: 'Venues',
leaf: true
}, {
text: 'Employees',
leaf: false,
children: [{
text: 'List',
leaf: true,
qry_str: '?task=show_list_of_employees'
}, {
text: 'Worksheets',
leaf: true,
qry_str: '?task=show_employee_worksheets'
}]
}, {
text: 'Events',
leaf: true
}


I would like the data returned as a response to the "click" listener to be placed in tab 'center1' of the tabPanel in the centre region of the viewport. How do i do that?

The centre region is currently coded like this:


new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
id: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
id: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})

Many thanks,
Nick

hendricd
11 Oct 2009, 4:19 PM
@nickweavers -- As you've noticed, I've merged your duplicate threads together into a single jumbling mess because, patience is a virtue here on the Forums (especially with newbies who impatiently post every 20 14 minutes) !

You want instant support? Buy a support contract! (otherwise welcome to the world of open-source-development). ;)

You will find that there is widely-available 'public' support here on the Forums, but it's a weekend (a long one for some ) -- lighten up!

That said, I would recommend using the Google/Forum search for the string:


tabpanel addand see what you get for research material.

nickweavers
12 Oct 2009, 12:00 AM
Thanks @hendricd.

I have never been accused of being short on patience before so that's a first :). It honestly wasn't a lack of it that lead to me multi posting, but genuine confusion. I saw posts appear after my attempt to post and thought there must be a technical problem with mine (too long, contains chars that break it or something). Also, I replied to another post and that reply appeared although my post did not, just reinforcing my confusion.

Anyway, thanks for the explanation and the google search tip.

Jack9
12 Oct 2009, 8:55 AM
Either name your objects with var myObjName, like

var westPanel = new Ext.Panel();
var centerPanel = new Ext.Panel();

then do centerPanel.body.update(content)

or give components IDs like
{
id: 'northPanel',
...
}

and do Ext.getCmp('northPanel').body.update(content)

nickweavers
13 Oct 2009, 1:55 PM
Always looks so obvious when you're shown how 8-|

Many thanks @Jack9.