PDA

View Full Version : [FIXED] List on hidden panel is visible



GaryW
1 Jul 2010, 11:38 AM
This is a 3 panel layout with a List added to the second panel. The problem is that the list is visible in the first panel even though it should be hidden until the second panel is displayed. It's fine after you've switched to the second panel. It seems like the list isn't being hidden as it should when the panels are created. Am I adding the list wrong or is this a bug?



Ext.setup({
onReady: function() {

var overlayTb = new Ext.Toolbar({
dock: 'top'
});

var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: false,
width: Ext.platform.isPhone ? 260 : 400,
height: Ext.platform.isPhone ? 220 : 400,
styleHtmlContent: true,
dockedItems: overlayTb,
scroll: 'vertical',
contentEl: 'lipsum',
cls: 'htmlcontent'
});

var showCenteredOverlay = function(btn, event) {
overlay.setCentered(true);
overlayTb.setTitle('About Flight Fee Explorer');
overlay.show();
};

Ext.regModel('Airlines', {
fields: ['airline']
});

var groupingBase = {
tpl: '<tpl for="."><div class="airlines">{airline}</div></tpl>',
itemSelector: 'div.airlines',

singleSelect: true,
grouped: true,
indexBar: true,

store: new Ext.data.Store({
model: 'Airlines',
sorters: 'airline',

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

data: [
{airline: 'First'},
{airline: 'Second'},
{airline: 'Third'},
{airline: 'First'},
{airline: 'Second'},
{airline: 'Third'}
]
})
};

var panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
html: "<h1>Welcome!</h1><div style=\"display: none;\"><div id=\"lipsum\"><p>Lipsum</p></div></div>",
items: [{
xtype: 'button',
text: 'Option 1',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
});
}
}, {
xtype: 'button',
text: 'Option 2',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
});
}
}],
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'About',
handler: showCenteredOverlay
}]
}]
}, {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Back',
ui: 'back',
handler: function() {
panel.layout.prev({
type: 'slide',
direction: 'right'
});
}
},{xtype: 'spacer'},
{
text: 'Next',
ui: 'forward',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
});
}
}]
}],
items: new Ext.List(Ext.apply(groupingBase, {
fullscreen: true,
multiSelect: true,
hideOnMaskTap: false
}))
}, {
html: 'Card 3',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Airlines',
ui: 'back',
handler: function() {
panel.layout.prev({
type: 'slide',
direction: 'right'
});
}
},{xtype: 'spacer'},
{
text: 'New',
ui: 'forward',
handler: function() {
panel.layout.first({
type: 'slide',
direction: 'left'
});
}
}]
}]
}]

});




}
});

TommyMaintz
1 Jul 2010, 12:07 PM
There were many things going on which made it hard to see what the issue was. I cleaned up the code a little bit (also removed some of the functionality, you will have to put it back I'm sorry...)

The following code works for me.



Ext.setup({
onReady: function() {
Ext.regModel('Airlines', {
fields: ['airline']
});

var card1 = new Ext.Panel({
items: [{
xtype: 'button',
text: 'Option 1',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
});
}
}, {
xtype: 'button',
text: 'Option 2',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
});
}
}],
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'About',
handler: function(){}
}]
}]
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="airlines">{airline}</div></tpl>',
itemSelector: 'div.airlines',

singleSelect: true,
grouped: true,
indexBar: true,

store: new Ext.data.Store({
model: 'Airlines',
sorters: 'airline',
getGroupString: function(record) {
return record.get('airline')[0];
},
data: [
{airline: 'First'},
{airline: 'Second'},
{airline: 'Third'},
{airline: 'First'},
{airline: 'Second'},
{airline: 'Third'}
]
}),

dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Back',
ui: 'back',
handler: function() {
panel.layout.prev({
type: 'slide',
direction: 'right'
});
}
},
{xtype: 'spacer'},
{
text: 'Next',
ui: 'forward',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
});
}
}]
}]
});

var panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [card1, list]
});
}
});


I think reason the list showed up right away was because you apply fullscreen true to it.


items: new Ext.List(Ext.apply(groupingBase, {
fullscreen: true,
multiSelect: true,
hideOnMaskTap: false
}))


Whenever you add fullscreen: true to something, it will instantly be rendered. Normally you want to have only one panel that is fullscreen that contains everything else.

GaryW
1 Jul 2010, 1:43 PM
That fixed it. Thanks.

GaryW
8 Jul 2010, 8:07 AM
That fixed the fact that it was rendered at the wrong time, but now the list isn't scrollable. It seems like the list has to be fullscreen to make it usable. How do I get around that?

evant
8 Jul 2010, 8:20 AM
Please post your updated code.

GaryW
8 Jul 2010, 9:46 AM
Nevermind. I used your code instead of mine and all is well. Thanks for taking the time.

GaryW
8 Jul 2010, 1:41 PM
Using your code above, if you are on the List panel and you change to another panel, the List gets cleared of all the selected rows. Is there an easy way to keep those selected rows when moving from panel to panel?

Jamie Avins
19 Jul 2010, 10:10 AM
Using your code above, if you are on the List panel and you change to another panel, the List gets cleared of all the selected rows. Is there an easy way to keep those selected rows when moving from panel to panel?
Not that we currently have cooked into the framework.