PDA

View Full Version : Problems loading List Into Existing Container



diggidydaz
19 Dec 2010, 2:33 PM
Hi,
I am new to using Sencha, and I'm really excited to learn more about its capabilities.

Unfortunately, I have run into a problem that I have been trying to fix for hours.

My first page loads with an image, and a top/bottom docked menu.
I would like the list to load under the Main intro image, and scroll within itself without going under the docked toolbars.

First, list will not show unless it force it to fullscreen mode.
Second, if the list loads, a section of it is hidden under the toolbars, so you end up not seeing the first and the last item in the list.

Is there a workaround for this? Or am I doing something wrong with my code?

I'm sure that this is a very simple fix, but I have no clue what I am doing yet. :-/

I've also attached two images of what the outcome is if I allow the list to go fullscreen vs not.

Image 1
Image 2

Any help would be great!

Thanks



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var buttonsSpecTop = [
// { ui: 'back', text: 'Back' },
{ xtype: 'spacer' },
// { ui: 'forward', text: 'Forward' }
]

var buttonsSpecBottom = [
{ ui: 'normal', text: 'Normal' },
{ ui: 'confirm', text: 'Confirm' }
]


var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}


var red = {
style: "background-color:red",
title: "Red", html: "I would like the list to load under the Main intro image, and scroll within itself without going under the docked toolbars"
}

var dockedItems = [{
xtype: 'toolbar',
title: 'Test App',
ui: 'dark',
dock: 'top',
items: buttonsSpecTop,
defaults: { handler: tapHandler }
},
{
xtype: 'toolbar',
ui: 'dark',
dock: 'bottom',
items: buttonsSpecBottom,
defaults: { handler: tapHandler }
}

]


new Ext.Panel ({
id: 'buttonsPanel',
fullscreen: true,
layout: {
type: "vbox",
align: "stretch"
},
items: [
{ html: '<div class="home_img"><img src="http://images.apple.com/v20101213150339/startpage/images/promo_beatles20101122.jpg"></div>'},
red
],
dockedItems: dockedItems
});



Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',

getGroupString : function(record) {
return record.get('lastName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'}
]
});

var list = new Ext.List({
// fullscreen: true,

itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,

store: store
});

evant
19 Dec 2010, 3:20 PM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

var dockedItems = [{
xtype: 'toolbar',
title: 'Test App',
ui: 'dark',
dock: 'top',
items: [{
xtype: 'spacer'
}]
}, {
xtype: 'toolbar',
ui: 'dark',
dock: 'bottom',
items: [{
ui: 'normal',
text: 'Normal'
}, {
ui: 'confirm',
text: 'Confirm'
}],
}];

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',

getGroupString: function(record){
return record.get('lastName')[0];
},

data: [{
firstName: 'Tommy',
lastName: 'Maintz'
}, {
firstName: 'Rob',
lastName: 'Dougan'
}, {
firstName: 'Ed',
lastName: 'Spencer'
}, {
firstName: 'Aaron',
lastName: 'Conran'
}, {
firstName: 'Dave',
lastName: 'Kaneda'
}]
});

var list = new Ext.List({
itemTpl: '{firstName} {lastName}',
grouped: true,
indexBar: true,
flex: 1,
store: store
});


new Ext.Panel({
id: 'buttonsPanel',
fullscreen: true,
layout: {
type: "vbox",
align: "stretch"
},
items: [{
height: 155,
html: '<div class="home_img"><img src="http://images.apple.com/v20101213150339/startpage/images/promo_beatles20101122.jpg"></div>'
}, list],
dockedItems: dockedItems
});
}
});

diggidydaz
21 Dec 2010, 7:42 PM
It works.
Thank you for your help!

agentyikes
21 Dec 2010, 8:13 PM
Hi
I am also new here.
I edited your code as follows:
1. I removed the bottom toolbar.
2. I modified the line
items: [
list, {
height: 155,
html: '<div id = "footer">last update on 22nd December 2010</div>'
}],
in your Ext.Panel config object.

But it does not work!
Is there any way to add a footer area, instead of the image, and let the list scroll between the toolbar and the footer?

agentyikes
23 Dec 2010, 8:58 PM
Fixed!