PDA

View Full Version : How to access child items?



msuresh
22 Oct 2010, 6:24 AM
Hi,
I am using ViewPort and have a layout to display notification. This notification needs to be closed on click of a link.
I tried to access the id using Ext.getCmp, however it is returning null.

Please let me know a way how to close this layout onClick of a link.



$(".cancelNfn").click(function(){
Ext.getCmp("notification").setVisible(false);
Ext.getCmp("notification").doLayout(true,true);
});

/*
* Build the main layout of Unified Tools Portal once all the panels are ready.
*/
new Ext.Viewport({
layout: 'border',
id:'mainLayout',
items: [{
region: 'north',
id:'mainHeader',
height:98,
xtype:'box',
items:[{
id:'topheader', //Unable to find this using Ext.getCmp("topheader")
border:false,
applyTo: 'header',
height: 74
},
{
id:'notification',//Unable to find this using Ext.getCmp("notification")
border:false,
hidden:true,
applyTo: 'mainNfn',
height: 24
}
]
},
{
layout: 'border',
id: 'layout-browser',
region:'east',
border: false,
split:true,
margins: '2 2 2 0',
width: 200,
minSize: 100,
maxSize: 500,
animCollapse:false,
animate: false,
collapseMode:'mini',
collapseFirst:false,
items: [toolChestPanel, toolChestDetailsPanel]
},
mainPanel
],
afterlayout:showNfn(),
renderTo: Ext.getBody()
});
};

Condor
22 Oct 2010, 6:34 AM
Lots of things wrong here.

1. Why are you using jQuery? Ext.select('.cancelNfn').on('click', function(){...}) does the same.
2. Your mainHeader should be an xtype:'container', otherwise it doesn't support 'items'.
3. Do NOT use applyTo in a layout. Replace it with 'el'. You probably also want to make those xtype:'box' components instead of panels.
4. "afterlayout:showNfn()" does nothing. Shouldn't it be:

listeners: {
afterlayout: {
fn: showNfn,
single: true
}
}
5. Is the .cancelNfn an <a> tag? In that case you should stop the event.

msuresh
22 Oct 2010, 6:55 AM
Thanks Condor. I implemented your suggestions.

Gave xtype:'container' in the header section instead of 'box', and able to access the items below it. However the HTML is not displaying and a white colored background is displayed. However i will look into the API to figure out the problem.

msuresh
22 Oct 2010, 8:06 AM
I am unable to remove the item. I tried all of this following.

Ext.getCmp("notification").hide();
Ext.getCmp("notification").setVisible(true);
Ext.getCmp("notification").remove();
Ext.getCmp("notification").removeAll();
Ext.getCmp("notification").disable();

Even hidden:true is not taking.

But none of the above are working. Can any one point me where I am doing mistake?

Code for reference:


new Ext.Viewport({
layout: 'border',
id:'mainLayout',
items: [{
region: 'north',
xtype:'container',
layout: {
type: 'vbox'
},
id:'mainHeader',
height:98,
items:[{
xtype: 'container',
defaultType:'box',
id:'topheader',
border:false,
autoEl: 'header',
height: 74
},
{
xtype: 'container',
defaultType:'box',
id:'notification',
hidden:true,
border:false,
autoEl: 'mainNfn',
height: 24
}
]
},
{
layout: 'border',
id: 'layout-browser',
region:'east',
border: false,
split:true,
margins: '2 2 2 0',
width: 200,
minSize: 100,
maxSize: 500,
animCollapse:false,
animate: false,
collapseMode:'mini',
collapseFirst:false,
items: [toolChestPanel, toolChestDetailsPanel]
},
mainPanel
],
listeners: {
afterlayout: {
fn: showNfn,
single: true
}
},
renderTo: Ext.getBody()
});
};

var showNfn = function(){
Ext.Ajax.request({
url: 'data/msg.json',
success: function(response,opts){
var obj = Ext.decode(response.responseText);
if(obj.success){
Ext.getCmp("notification").show();
Ext.getCmp("mainLayout").doLayout(true,true);
Ext.select('.cancelNfn').on('click', function(){
Ext.getCmp("notification").remove();
Ext.getCmp("mainLayout").doLayout(true,true);
})
}
}
});

msuresh
25 Oct 2010, 2:08 AM
I am unable to find relevant resources which can solve my issue.
Can any one point me to right thread or tutorials where we can manipulate ViewPort layouts? Mainly I am looking at adding and removing.

Animal
25 Oct 2010, 2:13 AM
Container class.

remove method.

That's it.

Condor
25 Oct 2010, 2:18 AM
No, 'topheader' and 'notification' are not containers (no items). They should be box components.

Also, 'autoEl' is meant to be a DomHelper config object. Shouldn't you be using 'el' instead?

msuresh
25 Oct 2010, 4:16 AM
Hi Condor,

I made changes as per your suggestion. Still few things are not working.

1. view:'fit' is not working, i tried autoHeight:true, which is also not working. I am giving height manually for the header portion. I need to reset the size whenever I hide the notification.
2. Ext.getCmp("notification").remove() is not working however Ext.getCmp("notification").hide() works fine.


new Ext.Viewport({
layout: 'border',
id:'mainLayout',
items: [{
region: 'north',
id:'mainHeader',
xtype:'container',
layout: {
type: 'vbox',
view:'fit'
},
height:98, //I would like to avoid this
items:[{
id:'topHeader',
border:true,
El: 'header',
height:74
},
{
id:'notification',
border:true,
hidden:true,
margins:'3 3 3 3',
html: 'Notification: Please upgrade to the latest version',
height:24
}
]
},
{
layout: 'border',
id: 'layout-browser',
region:'east',
border: false,
split:true,
margins: '2 2 2 0',
width: 200,
minSize: 100,
maxSize: 500,
animCollapse:false,
animate: false,
collapseMode:'mini',
collapseFirst:false,
items: [toolChestPanel, toolChestDetailsPanel]
},
mainPanel
],
listeners: {
afterlayout: {
fn: showNfn,
single: true
}
},
renderTo: Ext.getBody()
});
};


/*
* This function displays the notification message near the header.
* Also there is an option to close this notification. The layout
* adjusts automatically.
*/
var showNfn = function(){
Ext.Ajax.request({
url: 'data/msg.json',
success: function(response,opts){
var obj = Ext.decode(response.responseText);
if(obj.success){
Ext.getCmp("notification").show(); //Works
Ext.getCmp("mainHeader").setHeight(98); //Increase the height
Ext.getCmp("mainLayout").doLayout(true,true);
Ext.select('.cancelNfn').on('click', function(){
Ext.getCmp("notification").remove(); //Not working
Ext.getCmp("mainHeader").setHeight(74);
Ext.getCmp("mainLayout").doLayout(true,true);
})
}
}
});

Condor
25 Oct 2010, 4:39 AM
"view:'fit'" isn't a valid config option for a VBoxLayout.

You want:

layout: 'anchor',
autoHeight: true,
defaults: {
anchor: '0',
autoHeight: true
}
(although autoHeight:true could fail to work on hidden components)

msuresh
25 Oct 2010, 5:08 AM
Almost working, However the Anchor layout is going behind the center layout. I can see the header and notification behind this main center layout. How can I bring it to front?

Condor
25 Oct 2010, 5:22 AM
The problem is that border layout expects the north panel to have a fixed height (autoHeight is officially not supported, but does work as long as the container doesn't change size).

After showing the notification you have to set the correct height of the north container yourself.