PDA

View Full Version : Dataview and page layout



Bucs
24 Nov 2010, 8:26 AM
I am having trouble getting the page layout to work the way I need it to after fetching data from the server. I have an viewport that slides in a component that is defined as follows:



ProductDetail = Ext.extend(Ext.Panel, {
// Config Properties
id: 'ProductDetail',
title: 'Product Detail',
fullscreen: true,
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},

// Custom Properties
...,

initComponent: function() {
Ext.apply(this, {
dockedItems: [
{ id: 'productDetailTopToolBar', xtype: 'pagetoptoolbar', title: 'Product Detail' }
],
items: [
{
id: 'productDetailHeader',
....
},
{
id: 'ProductDetailBody',
xtype: 'panel',
width: this.getOrientation(),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div id="content" class="productItem_detail">',
'<div class="productTitle_detail">{Title}</div>',
'<div><span class="originalPrice_detail">Price: {OriginalPrice}</span>&nbsp;<span class="salePrice_detail">{SalePrice}</span></div>',
'<p class="productImageArea_detail ' + (this.getOrientation()) + '"><img src="{ProductImageUrl_large}" class="productImage_detail" alt="{Title}" title="{Title}" /></p>',
'<p id="productDesc" class="productDescription_detail ' + (this.getOrientation()) + '"></p>',
'<p id="productId" class="productId_detail ' + (this.getOrientation()) + '"></p>',
'</div>',
'</tpl>')
}
,{ xtype: 'storeavailability'}
,{ id: 'productDetailFooter', xtype: 'footer', width: this.getOrientation()}
]

});


The contained component defined with xtype "storeavailability" is laid out as such:



AvailabilityComponent = new Ext.extend(Ext.Panel, {
// Config properties
id: 'AvailabilityDetail',
height: 33,
hidden: true,
cls: 'sa_panel',
layout: {
type: 'vbox',
align: 'stretch'
},

// Custom properties

// Component Init
initComponent: function() {
Ext.apply(this, {

items: [
{
id: 'saDetailsButton',
xtype: 'button',
text: 'Get Availability',
ui: 'small',
width: 150,
handler: this.tapHandler
},
{
id: 'dvAvailabilityDetailList',
xtype: 'dataview',
scroll: false,
store: new Ext.data.Store({
id: 'storeAvailabilityDetail',
model: 'AvailabilityDetail',
autoLoad: false,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data'
}
}
}),
itemSelector: "div.store-availability",
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="store-availability">',
'<h1>Store Availability</h1>',
'<p>Item available for order in all stores.</p>',
'<ul class="stores-list">',
'<li>',
'<h3>{Availability}</h3>',
'<p>{Address}</p>',
'<p>(item may be on display)</p>',
'</li>',
'</ul>',
'</div>',
'</tpl>'
)

}

]

});

AvailabilityComponent.superclass.initComponent.apply(this, arguments);
}



Once the outer component loads it's data in the template, I unhide the inner component to display the saDetailsButton to allow the user to retrieve additional availability info (I seem to have to do this cause the button was visible over top of the ProductDetailBody before it's data is returned). I have set the height of the Availability component to just be high enough to show the button initially, but once clicked and the data comes back, and loads into the DataView, I need to hide the button and just show the returned data, but I need to insert the Availability data between the button and the outer component's footer component. But as of now the data comes back and simply over lay's the footer, even though I have tried calling a doLayout on the inner component, the outer component, and even the viewport.

What am I doing wrong here? Thx for any help!

Bucs
24 Nov 2010, 8:41 AM
Nevermind, I got it :)

jay@moduscreate.com
25 Nov 2010, 5:17 PM
Nevermind, I got it :)

If you're going to ask for help in a public forum, please post your solution!