PDA

View Full Version : Using variables in columns



anajafi
5 Sep 2013, 9:00 AM
I am having problems with my code rendering. I am trying to put variables in in columns. I am new to ext js so I many have done it wrong. When I comment out the variables I will see the column titles.



var featEventImage1 = Ext.create('Ext.panel.Panel',{
//height: 200,
//align: 'stretch',
html: '<p><div class="featEventImg"><img src="images/logos/georgia_southern.png"/></div></p>',
});


var featEventTitle1 = Ext.create('Ext.panel.Panel', {
xtype: 'label',
text: 'Georgia Southern University Career Fair'
});


var featEventDescription1 = Ext.create('Ext.panel.Panel', {
xtype: 'text',
text: 'We will have a booth at the career fair on 9/21/13.'
});




featuredEvent = Ext.create('Ext.panel.Panel', {
title: 'Featured Events',
width: 500,
height: 300,
layout: 'column',
items: [{
title: 'col 1',
columnWidth: 0.25,
featEventImage1

},{
title: 'col 2',
columnWidth: 0.75,
items:[
featEventTitle1,
featEventDescription
]
}],
renderTo: 'featured',
});

teamhonda81
5 Sep 2013, 9:39 AM
You have two problems.

1) You need to have an items property inside your first column's definition and insert featEventImage1 as one of the items.

2) The second variable (featEventDescription) in the second column is undefined. I think you want to use featEventDescription1 .

shashankbs086
6 Sep 2013, 7:17 AM
The Below Code may solve your issue.

var featEventImage1 = Ext.create('Ext.panel.Panel',{
//height: 200,
//align: 'stretch',
html: '<p><div class="featEventImg"><img src="images/logos/georgia_southern.png"/></div></p>',
});

var featEventTitle1 = Ext.create('Ext.panel.Panel', {
xtype: 'label',
text: 'Georgia Southern University Career Fair'
});

var featEventDescription1 = Ext.create('Ext.panel.Panel', {
xtype: 'text',
text: 'We will have a booth at the career fair on 9/21/13.'
});

featuredEvent = Ext.create('Ext.panel.Panel', {
title: 'Featured Events',
width: 500,
height: 300,
layout: 'column',
items: [{
title: 'col 1',
columnWidth: 0.25,
items:[featEventImage1]

},{
title: 'col 2',
columnWidth: 0.75,
items:[
featEventTitle1,
featEventDescription1
]
}],
renderTo: 'featured',
});

Another thing I observed in your code is, I see you using lot of panels. Since panel is a heavy weight component, you can just use a box component to show the text. This may improve performance in your code

anajafi
6 Sep 2013, 12:25 PM
The Below Code may solve your issue.


var featEventImage1 = Ext.create('Ext.panel.Panel',{
//height: 200,
//align: 'stretch',
html: '<p><div class="featEventImg"><img src="images/logos/georgia_southern.png"/></div></p>',
});

var featEventTitle1 = Ext.create('Ext.panel.Panel', {
xtype: 'label',
text: 'Georgia Southern University Career Fair'
});

var featEventDescription1 = Ext.create('Ext.panel.Panel', {
xtype: 'text',
text: 'We will have a booth at the career fair on 9/21/13.'
});

featuredEvent = Ext.create('Ext.panel.Panel', {
title: 'Featured Events',
width: 500,
height: 300,
layout: 'column',
items: [{
title: 'col 1',
columnWidth: 0.25,
items:[featEventImage1]

},{
title: 'col 2',
columnWidth: 0.75,
items:[
featEventTitle1,
featEventDescription1
]
}],
renderTo: 'featured',
});

Another thing I observed in your code is, I see you using lot of panels. Since panel is a heavy weight component, you can just use a box component to show the text. This may improve performance in your code

Sorry, that did not render. :((

But I ended up developing something that did work and a bit lighter.


var event1 = Ext.create('Ext.container.Container',{ layout:{
type: 'hbox'
},
layout: 'column',
items: [{
//title: 'col 1',
columnWidth: 0.25,
//height:200,
html: '<p><div class="featEventImg"><img src="images/logos/georgia_southern.png" width="100%" height="100px"/></div></p>',
},{
//title: 'col 2',
columnWidth: 0.75,
items:[{
xtype: 'label',
text: 'Georgia Southern University Career Fair'
}, {
xtype: 'text',
text: 'We will have a booth at the career fair on 9/21/13.'
}]
}],
});


Ext.create('Ext.panel.Panel', {
width: 500,
height: 200,
title: 'Featured Events',
items: [
event1
],
renderTo: 'featured'
});