PDA

View Full Version : Update panel on the fly



nonred
31 Aug 2009, 7:30 PM
Hi,

I am trying to update a panel on the fly, the idea is to have all the links in one panel and show the content in the other panel.

Wonder if anyone can help the code doesn't update the panel in the center.




Ext.onReady(function() {
var header = new Ext.Panel({
region:'north',
title: 'Patient Demographics',
preventBodyReset: true,
collapsible:true,
//renderTo: 'patient_header',
width: 1200,
html: html.join('')
});

var item1 = new Ext.Panel({
title: 'Accordion Item 1',
html: '<a href="http://www.google.com">click</a>' (http://www.google.com&quot;>click</a>'),
cls:'empty'
});

var item2 = new Ext.Panel({
id:'c',
title: 'Accordion Item 2',
html: '&lt;empty panel&gt;',
cls:'empty'
});

var item3 = new Ext.Panel({
title: 'Accordion Item 3',
html: '&lt;empty panel&gt;',
cls:'empty'
});

var item4 = new Ext.Panel({
title: 'Accordion Item 4',
html: '&lt;empty panel&gt;',
cls:'empty'
});

var item5 = new Ext.Panel({
title: 'Accordion Item 5',
html: '&lt;empty panel&gt;',
cls:'empty'
});

var accordion = new Ext.Panel({
id:'west-panel',
region:'west',
collapsible:true,
collapseMode:'mini',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3, item4, item5]
});



var viewport = new Ext.Viewport({
id:'vp',
layout:'border',
renderTo: 'items_menu',
items:[
header,
accordion, {
id: 'center-result1',
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
autoCreate: {
tag: 'iframe',
id: 'center-result',
frameborder: 0
}
}]
});

Ext.getCmp('west-panel').body.on('click', function(e, target) {
e.stopEvent();

var center = Ext.get('center-result1');
center = new Ext.Panel({html:'hello'});
center.doLayout();
});
});



Thanks.

1 Sep 2009, 1:55 AM
var center = Ext.getCmp('center-result1');
center.update('some new html');

nonred
1 Sep 2009, 2:54 AM
For some reason I get this error on this line,

center.update('test.html')

Object doesn't support this property or method.

1 Sep 2009, 2:55 AM
For some reason I get this error on this line,

center.update('test.html')

Object doesn't support this property or method.

sorry dude. center.body.update('some html');

are you trying to load an html fragment?

nonred
1 Sep 2009, 3:44 AM
Thanks that worked brilliantly,

Say, if I add multiple links on a panel p1 and would want different html to appear on my center panel 'center-result1', any ideas how may I achieve that?

As of now I have been using
Ext.getCmp('p1').body.on('click', function(e, target) to catch the click event, wonder how can I catch the event related to clicking a link rather than the actual body of the panel.




var item1 = new Ext.Panel({
id:'p1',
title: 'Accordion Item 1',
html: '<a href="http://www.google.com">click1</a><br><a href="http://www.yahoo.com">click2</a>' (http://www.yahoo.com&quot;>click2</a>'),
cls:'empty'

//xtype: 'box',
//autoEl: {tag: 'a', href: 'http://www.google.com', target:'_blank', html: 'Google'}

});
var item2 = new Ext.Panel({
id:'c',
title: 'Accordion Item 2',
html: '&lt;empty panel&gt;',
cls:'empty'
});
var item3 = new Ext.Panel({
title: 'Accordion Item 3',
html: '&lt;empty panel&gt;',
cls:'empty'
});
var item4 = new Ext.Panel({
title: 'Accordion Item 4',
html: '&lt;empty panel&gt;',
cls:'empty'
});
var item5 = new Ext.Panel({
title: 'Accordion Item 5',
html: '&lt;empty panel&gt;',
cls:'empty'
});
var accordion = new Ext.Panel({
id:'west-panel',
region:'west',
collapsible:true,
collapseMode:'mini',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3, item4, item5]
});



var viewport = new Ext.Viewport({
id:'vp',
layout:'border',
renderTo: 'items_menu',
items:[
header,
accordion, {
id: 'center-result1',
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
autoCreate: {
tag: 'iframe',
id: 'center-result',
frameborder: 0
}
//html:'<br/><br/>&lt;empty center panel&gt;'
}]
});
Ext.getCmp('p1').body.on('click', function(e, target) {
e.stopEvent();
var center = Ext.getCmp('center-result1');
center.body.update('<h1>hello</h1>');
center.doLayout();



});

Ext.getCmp('c').body.on('click', function(e, target) {
e.stopEvent();
var center = Ext.getCmp('center-result1');
center.body.update('<h1>world</h1>');
center.doLayout();

nonred
1 Sep 2009, 4:31 AM
Is this the preferred way?



Ext.getCmp('p1').body.on('click', function(e, target) {
e.stopEvent();
var center = Ext.getCmp('center-result1');
center.body.update('<h1>hello</h1>');
//center.doLayout();
alert(target);

if (target=="http://www.google.com/")
{
alert('1');
}
if (target=="http://www.yahoo.com/")
{
alert('2');
}


});

Jack9
1 Sep 2009, 1:01 PM
Ext.getCmp('...') is using the DOM to pull an element, AFAIK. This is a slow and potentially problematic way to reference elements (see GoogleTalk on speeding up Javascript). The Ext way is to create everything through Ext which means you'll have a chance to bind (assign) a created html element to a variable. The preferred way is to use a variable rather than the DOM. Otherwise, using the target == string is fine, although most people would hash dynamic urls to some extent (maybe with monetization).

nonred
2 Sep 2009, 2:12 AM
i am getting Access is denied error while trying to load a url in a panel?



Ext.getCmp('item0').body.on('click', function(e, target) {
e.stopEvent();
var center = Ext.getCmp('center-result1');
if (target=='http://www.google.com'){
center.load({url:'http://www.google.com'});
}


Any ideas?

2 Sep 2009, 2:45 AM
Ext.getCmp('...') is using the DOM to pull an element, AFAIK. This is a slow and potentially problematic way to reference elements (see GoogleTalk on speeding up Javascript). The Ext way is to create everything through Ext which means you'll have a chance to bind (assign) a created html element to a variable. The preferred way is to use a variable rather than the DOM. Otherwise, using the target == string is fine, although most people would hash dynamic urls to some extent (maybe with monetization).

??? Ext.getCmp??

2 Sep 2009, 2:46 AM
i am getting Access is denied error while trying to load a url in a panel?



Ext.getCmp('item0').body.on('click', function(e, target) {
e.stopEvent();
var center = Ext.getCmp('center-result1');
if (target=='http://www.google.com'){
center.load({url:'http://www.google.com'});
}


Any ideas?

Yeah, this has to do with security rules revolving around XHRs. If you want to load another page you will need to use an iframe. Never use AJAX to load a complete web page, only html fragments