PDA

View Full Version : Dynamically adding a component, problem with rendering.



taekdar
14 Aug 2009, 8:02 AM
Hi, i have something like this :



var newsPanelStore = new Ext.data.JsonStore({
url: 'media/servlets/FrontNewsProvider.php',
autoLoad: {params: {s:'mainnews'}},
root: 'records',
id:'FRONT_NEWS_ID',
fields:[
'FRONT_NEWS_ID', 'NEWS_DESCRIPTION' , 'NEWS_IMAGE_PATH'
]
});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'<table><tbody><tr>',
'<td"><img height=200" width="140" src="{NEWS_IMAGE_PATH}"/></td>',
'<td><font size="2" > {NEWS_DESCRIPTION}<br>',
'<a href="javascript:openNews()">Citeste in continuare</a>',
'</font></td>',
'</tr></tbody></table>',
'</div>',
//'<span>{shortName}</span></div>',
'</tpl>'
);

var newsDataView = new Ext.DataView({
itemSelector: 'div.thumb-wrap',
id:'newsDataView',
store: newsPanelStore,
border:true,
tpl: tpl
});

var newsPanel = new Ext.Panel({
id:'frontNewsPanel',
border: false,
autoScroll : true,
items: newsDataView
});

var exNewsPanelStore = new Ext.data.JsonStore({
url: 'media/servlets/FrontNewsProvider.php',
autoLoad: {params: {s:'exnews'}},
root: 'records',
//id:'exNewsPanelStore',
fields:[
'FRONT_NEWS_ID', 'NEWS_DESCRIPTION' , 'NEWS_IMAGE_PATH'
]
});

exNewsPanelStore.on('load',function(){
var exNewsDataView = ({
itemSelector: 'div.thumb-wrap',
id:'exNewsDataView',
store: exNewsPanelStore,
border:true,
emptyText : "ing empty",
tpl: tpl
});

var exPanel = Ext.getCmp('exFrontNewsPanel');
exPanel.add(exNewsDataView);
exPanel.doLayout();

});



var exNewsPanel = new Ext.Panel({
id:'exFrontNewsPanel',
border: false,
autoScroll : true
//items: exNewsDataView
//html: 'wooooooooo'
});

var mainTabPanel = new Ext.TabPanel({

activeTab: 0,
border:false,
bodyBorder:false,
plain:true,
id: 'menu',
enableTabScroll : true,
items:[{
title : 'Home',
id : "homeTab",
layout : 'hbox',
defaults : {
border : false
},
layoutConfig : {
align : 'stretch'
},
items : [
{
flex : 2,
id : 'htLeftPart',
layout : 'vbox',
layoutConfig : {
align : 'stretch'
},
defaults : {
border : false,
margins : '4 4 2 4'
},
border : false,
items : [
{
flex : 1,
id : 'htLeftPartChild1',
layout : 'fit',
items : [newsPanel]
},
{
title : "htLeftPartChild2",
id : 'htLeftPartChild2',
layout : 'fit',
//html : "toooooooooo",
items : [exNewsPanel],
flex : 2

}]

},

and so on .......
My problem is that my exNewsPanel that should have a dataView added dynamically wouldn't display anything even after calling .doLayout() on it. Any suggestions please?

Animal
14 Aug 2009, 10:53 AM
Overnest.

Just configure the DataViews with a flex config and put them right into htLeftPart as immediate child items.

taekdar
14 Aug 2009, 11:24 AM
It's still not loading the second dataview, my guess is that the store for the second dataview takes a bit longer to load and it's not loaded when the dataview is rendered, but why isn't the dataview updating when the store is finished loading, do i have to refresh the dataview somehow in an onLoad event on the datastore?

Thanks for the help btw.

my dataviews are as follow now:



var newsDataView = new Ext.DataView({
itemSelector: 'div.thumb-wrap',
id:'newsDataView',
store: newsPanelStore,
border:true,
flex : 1,
tpl: tpl
});

var exNewsDataView = ({
itemSelector: 'div.thumb-wrap',
id:'exNewsDataView',
store: exNewsPanelStore,
/* height : 100,
width : 200,*/
border : true,
flex : 2,
emptyText : "ing empty",
tpl: tpl
});

and htLeftPart is as follows:



flex : 2,
id : 'htLeftPart',
layout : 'vbox',
layoutConfig : {
align : 'stretch'
},
defaults : {
border : false,
margins : '4 4 2 4'
},
border : false,
items : [newsDataView,exNewsDataView]

Animal
14 Aug 2009, 11:41 AM
It doesn't matter when the Store gets loaded. The View will be updated whenever that happens.

Show the whole of the code in context.

taekdar
14 Aug 2009, 11:52 AM
Aww man, i just wasted your time, the bug was right in front of us :



var exNewsDataView = ({
itemSelector: 'div.thumb-wrap',
id:'exNewsDataView',
store: exNewsPanelStore,
/* height : 100,
width : 200,*/
border : true,
flex : 2,
emptyText : "ing empty",
tpl: tpl
});should've remembered to call
new Ext.DataView :D

Animal
14 Aug 2009, 11:55 AM
So let's see the code one more time. Just to check the validity of the Container/Component nesting and layout specs.

taekdar
14 Aug 2009, 11:59 AM
It's loading now, but got another problem, firebug says error :


path is undefined

var paths = path.split(","),\r\n

in ext-all-debug.js
Line 1312

dunno where that is coming from right now but the dataview is loading at least, and i put back the container panels because i will want to add something else in them besides the dataviews.

full code below (without other tabs that are not important):


var newsPanelStore = new Ext.data.JsonStore({
url: 'media/servlets/FrontNewsProvider.php',
autoLoad: {params: {s:'mainnews'}},
root: 'records',
id:'FRONT_NEWS_ID',
fields:[
'FRONT_NEWS_ID', 'NEWS_DESCRIPTION' , 'NEWS_IMAGE_PATH'
]
});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'<table><tbody><tr>',
'<td"><img height=200" width="140" src="{NEWS_IMAGE_PATH}"/></td>',
'<td><font size="2" > {NEWS_DESCRIPTION}<br>',
'<a href="javascript:openNews()">Citeste in continuare</a>',
'</font></td>',
'</tr></tbody></table>',
'</div>',
//'<span>{shortName}</span></div>',
'</tpl>'
);

var newsDataView = new Ext.DataView({
itemSelector: 'div.thumb-wrap',
id:'newsDataView',
store: newsPanelStore,
border:true,
flex : 1,
tpl: tpl
});

var newsPanel = new Ext.Panel({
id:'frontNewsPanel',
border: false,
autoScroll : true,
items: newsDataView
});

var exNewsPanelStore = new Ext.data.JsonStore({
url: 'media/servlets/FrontNewsProvider.php',
autoLoad: {params: {s:'exnews'}},
root: 'records1',
//id:'exNewsPanelStore',
fields:[
'FRONT_NEWS_ID', 'NEWS_DESCRIPTION' , 'NEWS_IMAGE_PATH'
]
});


exNewsPanelStore.on('load',function(){

});


var exNewsDataView = new Ext.DataView({
//itemSelector: 'div.thumb-wrap',
id:'exNewsDataView',
store: exNewsPanelStore,
border : true,
loadingText : 'Think it\'s loading...',
flex : 2,
emptyText : "ing empty",
tpl: tpl
});

var exNewsPanel = new Ext.Panel({
id:'exFrontNewsPanel',
border: true,
autoScroll : true,
items: exNewsDataView
//layout: 'fit'
//html: 'wooooooooo'
});

var mainTabPanel = new Ext.TabPanel({

activeTab: 0,
border:false,
bodyBorder:false,
plain:true,
id: 'menu',
autoScroll : true,
enableTabScroll : true,
items:[{
title : 'Home',
id : "homeTab",
layout : 'hbox',
defaults : {
border : false
},
layoutConfig : {
align : 'stretch'
},
items : [
{
flex : 2,
id : 'htLeftPart',
layout : 'vbox',
layoutConfig : {
align : 'stretch'
},
defaults : {
border : false,
margins : '4 4 2 4'
},
border : false,
items : [//newsDataView,exNewsDataView
{
flex : 1,
id : 'htLeftPartChild1',
layout : 'fit',
items : [newsPanel]
},
{
title : "htLeftPartChild2",
id : 'htLeftPartChild2',
layout : 'fit',
//html : "toooooooooo",
items : [exNewsPanel],
flex : 2
}
]

},
{
flex : 1,
id : 'htRightPart',
layout : 'vbox',
layoutConfig : {
align : 'stretch'
},
defaults : {
border : false,
margins : '10 10 10 10'
},
border : false,
items : [
{
flex : 1,
title : 'htRightPartChild1',
id : 'htRightPartChild1',
layout : 'fit',
// items : [newsPanel]
html : 'Tranteste-ti reclama aici!'
},
{
title : "htRightPartChild2",
id : 'htRightPartChild2',
html : '<center><img src="media/img/cat.jpg"/></center>',//"Reclame si aici nu?",
flex : 2

}]
}
]
},

Animal
14 Aug 2009, 12:03 PM
You've gone back to that MAD overnesting!

Just use the DataViews as box items!

And don't you want the rows in your news DataViews to be proper tables with cells that line up, not each one a SEPERATE table?????

taekdar
14 Aug 2009, 12:10 PM
what do you mean use the dataviews as box items? I would for example need to add other components like a button into the dataview if i was to use them as a container for stuff, can i do that?

And about the tables, they're in 2 separate panels, one is for current news and one is for past news, i need 2 of them cause the format is different (doesn't show in my code right now cause i'm stupid, but i actually need another template for the second dataview :D).

Animal
14 Aug 2009, 12:12 PM
OK, so you need ONE Panel round them, not TWO!

Animal
14 Aug 2009, 12:12 PM
No, I mean each Record in your store is in a seperate <table> element. So nothing lines up!

taekdar
14 Aug 2009, 12:16 PM
Ow, you're right, thanks for pointing it out.

Animal
14 Aug 2009, 12:20 PM
So you have changed The Panel containing the newsPanel containing the DataView



{
flex : 1,
id : 'htLeftPartChild1',
layout : 'fit',
items : [newsPanel]
}


to just The Panel containing the DataView?



newsPanel


?

taekdar
14 Aug 2009, 12:32 PM
I made a little drawing to explain kinda what i wanna do :
http://img142.imageshack.us/content.php?page=done&l=img142/6389/layoutsab.jpg

The idea is that i need to have 2 elements inside a vbox element and that's why i made a panel to set the configs for the vbox element and then i put in it another panel to host my 2 elements.

Can i just set those vbox configs in the newsPanel and then just add that as a child of htLeftPart ?

Animal
14 Aug 2009, 12:40 PM
Yes!

Any BoxComponent (See the class inheritance at the top of EVERY API docs page) can be managed by a layout.

So, given than, run your code through http://jsbeautifier.org/ and post it here.

taekdar
14 Aug 2009, 12:44 PM
Ok man, will do, thanks for the help, i'm signing off for now but i'll change and post the code here tomorow, kinda late over here in my country now.

taekdar
15 Aug 2009, 2:39 AM
Ok, so how can i make that template so i create the table only once and then a row for each record? I looked at some examples but the template in them is executed for each record wich is not what i need.

Animal
15 Aug 2009, 4:19 AM
The principle to learn is that the '<tpl = ".">' beings the loop through the Array of data.

So, obviously, you put some HTML structure outside that. Only have <tr>s inside that.