PDA

View Full Version : [CLOSED-236] Nested panel not scrolling corectly



dotomaz
17 Aug 2010, 11:57 PM
Sencha Touch version tested:


0.93



only default ext-all.css





Platform tested against:


iOS 4
Android 2.2



Description:


When you put a panel inside of a another panel the contents doesn't scroll correctly. You can scroll the contents with your finger but when you release it the content scrolls back to the top. The scroll bar is also not rendered. The contents is rendered on load from a template.



Test Case:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Actions

var ShowMessages = function(){
var data = [];
var i=0;
for(i=0; i<30 ; i++){
data.push({
'message': "Message "+ i
});
}
messages.update(data);
}

var messages = new Ext.Panel({
cls: "message-list",
title: 'List',
id: 'messages',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="message">{message}</div>',
'</tpl>'
]
});

var panel = new Ext.Panel({
fullscreen: true,
items: [messages]
});

ShowMessages();

}
});
The following code works as expected


Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Actions

var ShowMessages = function(){
var data = [];
var i=0;
for(i=0; i<30 ; i++){
data.push({
'message': "Message "+ i
});
}
messages.update(data);
}

var messages = new Ext.Panel({
fullscreen: true,
cls: "message-list",
title: 'List',
id: 'messages',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="message">{message}</div>',
'</tpl>'
]
});

ShowMessages();

}
});
Steps to reproduce the problem:


Try to scroll the contents



The result that was expected:


Content's position to remain at the same position when you lift the finger.



The result that occurs instead:


Contents scrolls back to the top



Screenshot or Video:


attached



Debugging already done:


none



Possible fix:


not provided

evant
18 Aug 2010, 12:15 AM
You haven't specified a layout on the parent container. You want a layout: 'fit' there.

dotomaz
18 Aug 2010, 4:01 AM
This works if the child panel is the only child component. But if I have more of them, like a toolbar an a panel fit layout doesn't work. If I set vbox layout on the parent container i get the same problem.

crizz
18 Aug 2010, 4:24 AM
I've got the same problem.
I have a 'mainPanel' with card-layout as container of another panel with a list-component and a toolbar. the other card is another panel containing a form-panel to edit the selected list-entry. i've chosen more panels because otherwise i got difficulties showing the different toolbars ...
but back zu my problem ... i've tried differnt layout's on each container, but the list isn't scrollable as described in the first post.
This is my code:


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'resources/img/tablet_startup.png',
phoneStartupScreen: 'resources/img/phone_startup.png',
glossOnIcon: false,
fullscreen: true,
onReady: function() {

// model for number entries
Ext.regModel('Quicknumber', {
fields: [
{name: 'quick', type: 'string'},
{name: 'name', type: 'string'},
{name: 'phone', type: 'string'}
]
});

// Create store with numbers from json
var myStore = new Ext.data.Store({
model: 'Quicknumber',
proxy: {
type: 'ajax',
url : '/mobile/numbers_json.php',
reader: {
type: 'json',
root: 'numbers',
idProperty: 'quick'
},
writer: {
type: 'json',
root: 'numbers',
encode: true
}
},
autoLoad: true,
autoSave: true
});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="contact" id="{quick}">',
'<span class="x-editable">{quick} - {name}</span>',
'</div>',
'</tpl>'
);

var nameField = new Ext.form.TextField({
name: 'nameField',
label: 'Name',
labelAlign: 'top'
});

var numberField = new Ext.form.NumberField({
name: 'numberField',
label: 'Number',
labelAlign: 'top'
});

var shortKey = new Ext.form.Select({
name: 'shortKey',
label: 'Kurzwahl',
labelAlign: 'top',
options: [
{text: 'Platz 1', value: '01'},
{text: 'Platz 2', value: '02'},
{text: 'Platz 3', value: '03'},
{text: 'Platz 4', value: '04'},
{text: 'Platz 5', value: '05'},
{text: 'Platz 6', value: '06'},
{text: 'Platz 7', value: '07'},
{text: 'Platz 8', value: '08'},
{text: 'Platz 9', value: '09'}
]
});

var detailSet = new Ext.form.FieldSet({
items: [nameField, numberField, shortKey]
});

var listToolbar = new Ext.Toolbar({
id: 'listToolbar',
dock: 'top',
items: [{
xtype: 'spacer'
},{
text: '+',
id: 'addEntry',
handler: addEntry
}]
});

var detailsToolbar = new Ext.Toolbar({
id: 'detailsToolbar',
dock: 'top',
items: [{
text: 'back',
id: 'backToList',
ui: 'back',
handler: backToList
},{
xtype: 'spacer'
},{
text: 'save',
ui: 'action',
id: 'saveEntry',
handler: saveEntry
}]
});

var detailsForm = new Ext.form.FormPanel({
id: 'detailsForm',
scroll: 'vertical',
layout: 'fit',
items:[detailSet]
});

var numberList = new Ext.List({
//dockedItems:
[listToolbar],
id: 'numberList',
layout: 'fit',
scroll: 'vertical',
tpl: tpl,
store: myStore,
multiSelect: false,
singleSelect: false,
autoHeight: true,
overClass: 'x-view-over',
itemSelector: 'div.contact',
emptyText: 'No items to display',
disclosure: {
handler:
function(component,item, index, e){
showDetails(index);
},
scope: this
}
});

var listPanel = new Ext.Panel({
dockedItems:
[listToolbar],
layout: 'fit',
scroll: false,
items: [numberList]
});

var formPanel = new Ext.Panel({
dockedItems:[detailsToolbar],
items: [detailsForm]
});

// --- mainPanel for entry view
var mainPanel = new Ext.Container({
monitorOrientation: true,
fullscreen: true,
layout: 'card',
items:
[listPanel, formPanel]
});

function showDetails(index){
mainPanel.setCard(1,{type: 'slide', direction: 'left'});
if(index != null){
var selectedItem = myStore.getAt(index);
nameField.setValue(selectedItem.data.name);
numberField.setValue(selectedItem.data.phone);
} else {
nameField.setValue('');
numberField.setValue('');
}
mainPanel.doLayout();
}

function backToList(){
mainPanel.setCard(0,{type: 'slide', direction: 'right'});
}

function addEntry(){
mainPanel.setCard(1,{type: 'slide', direction: 'left'});
}

function saveEntry(){

console.info('Entry saved');
}

}
});

Jamie Avins
18 Aug 2010, 8:37 AM
Thank you for the test cases.

JacobGu
20 Aug 2010, 4:45 AM
I also have the same problem now with the following test case:


// selects cards in panel
var navPanel = new Ext.NestedList({
id: 'navpanel',
toolbar: { height: 0},
centered: true,
defaults: {
width: document.width, // not great design to access DOM this way
style: 'background-color: black'
},
items: [{
html: 'Who we are',
style: 'font-size:20px'
},{
html: 'What we do',
style: 'font-size:20px'
},{
html: 'Find us',
style: 'font-size:20px'
}],
listeners: {
listchange: function(container, item){

var activeItem = -1;
var itemText = item.getEl().dom.innerText;
switch(itemText){
case "Who we are":
activeItem = 1;
break;
case "What we do":
activeItem = 2;
break;
case "Find us":
activeItem = 3;
break;
}

var cardpanel = Ext.getCmp('cardpanel');

cardpanel.setCard(activeItem);
Ext.getCmp('toolbar').show();
Ext.getCmp('apppanel').doLayout();
}
}
});

var toolbar = new Ext.Toolbar({
id: 'toolbar',
dock: 'top',
hidden: 'true',
items: [{
type: 'button',
text: 'Back',
ui: 'back',
handler: function(){
GoHome();
},
}]
});

// manages subscreens
var cardPanel = new Ext.Panel({
id: 'cardpanel',
layout: 'card',
width: document.width, height: 1000,
dockedItems: [toolbar],
scroll: 'vertical',
animation: 'slide',
items: [
navPanel
,{
maxWidth: document.width,
html: WhoWeAreContent,
styleHtmlContent: true
},{
maxWidth: document.width,
html: WhatWeDoContent,
styleHtmlContent: true,
},{
xtype: 'map',
layout: 'fit'
}]
});

var appPanel = new Ext.Panel({
id: 'apppanel',
fullscreen: true,
layout: 'vbox',
style: 'background-color: black; color: white; font-family:garamond;verdana,sans-serif',
items: [header, cardPanel]


WhoWeAreContent and WhatWeDoContent are HTML div strings. They have the same scroll issues as described originally in this thread.

JacobGu
20 Aug 2010, 5:07 AM
I tried wrapping my card panel inside another panel with 'fit' layout as suggested earlier in this thread, but that doesn't work either. It seems that bottom line, a nested panel is not scrollable.

aconran
6 Sep 2010, 12:17 PM
This should be resolved in the 0.94 build. NestedList has been refactored to bind to a TreeStore. It is an Ext.Panel with a layout of card that holds Ext.List's for each level of the Tree. You can optionally implement a getDetailCard which will show a card after tapping on a leaf node in the TreeStore.

Severance
10 Dec 2010, 4:46 AM
Hello,

I have the same problem with a tabpanel that hold a panel as its first item. When I switch between (always in the same item of the tabpanel) this panel and another hidden panel.

How can I implement a TreeStore in my case ?

Thank you !

Bucs
12 Dec 2010, 9:54 AM
This should be resolved in the 0.94 build. NestedList has been refactored to bind to a TreeStore. It is an Ext.Panel with a layout of card that holds Ext.List's for each level of the Tree. You can optionally implement a getDetailCard which will show a card after tapping on a leaf node in the TreeStore.

The problem with this implementation is that you cannot use this new NestedList control in a scenario where you want to scroll past an embedded NestedList control to content that may be below the control. Take the following scenario on an iPhone:


....
items: {
{xtype: 'panel', html: 'header'},
{xtype: 'nestedlist'},
{xtype: 'panel', html: 'footer'}
}
...


If the NestedList loads in this scenario with more than few items, it will push the footer down below the viewable area. Without being able to set scroll: false on the NestedList, it is very hard to scroll the page down now to view the footer. It just scrolls the NestedList up then pops back. The net effect of this is a very unfriendly user experience when this control is used. If the Nested List could size itself according to the items of the current level, it would be infinitely more usable. But without the ability to turn-off the scrolling behavior of the container panel, the control simply does not work well in the phone environment and is really only useful in a tablet use case where the NestedList is in a west region with no content below it.