PDA

View Full Version : List not scrolling



m@uce
3 Feb 2011, 5:35 PM
I'm creating a list, nested in a panel with a toolbar docked at the top, nested in a tabpanel. The initialization code is as follows:

{
xtype: 'list',
id: 'searchlist',
itemTpl: '<div class="contacaaat2"><strong>{companyName}</strong></div><div class="subtitle">{address}</div>',
store: wwx.listData,
grouped: true,
indexBar: true,
selModel: {
mode: 'SINGLE',
allowDeselect: true
}
The list data appears nicely, and I can touch drag the list upwards to see more data below, but the minute I release, the list scrolls back to the first record. I must be missing something very simple here.

gcallaghan
3 Feb 2011, 8:03 PM
Is your containing panel scrollable? also, what is the layout type of the containing panel. try...


{
xtype:'panel'
layout:{
type:'vbox',
},
scroll:'none',
items:[
{
your list config,
flex:1
}
]
}

m@uce
4 Feb 2011, 9:19 AM
Here is what I got, in whole:

wwx.tabs = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'top',
ui: 'dark',
layout: {
pack: 'right'
}
},
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
xtype: 'nestedlist',
title: 'Categories',
iconCls: 'bookmarks',
cls: 'card card1',
displayField: 'id',
title: 'Categories',
scroll: 'none',
store: wwx.nListData,
toolbar: {
style: { fontSize: 'small' }
},
gettitleTextTpl: function(node)
{
if ((node.childNodes.length < 1) || (typeof node.childNodes[0].id == 'number'))//&& this.isNumeric(node.childNodes[0].id))
return '<div><b>{companyName}</b></div>';
else
return [
'<div>',
'{id}',
'</div>'
].join('');

},
getItemTextTpl: function(node)
{
//if (node.attributes.record&&node.attributes.record.data.companyName)
if ((node.childNodes.length < 1) || (typeof node.childNodes[0].id == 'number'))//&& this.isNumeric(node.childNodes[0].id))
return '<div><b>{companyName}</b></div><div style="float:right;">{distance}</div>';
else
return [
'<div>',
'{id}',
'</div>'
].join('');

}
},
{
title: 'Search',
iconCls: 'search',
cls: 'card card2',
xtype: 'panel',
layout:{
type:'vbox',
},
scroll:'none',
dockedItems: [
{
xtype: 'toolbar',
ui: 'dark',
dock: 'top',
items: [{
xtype: 'searchfield',
placeHolder: 'Search',
indexBar: true,
name: 'searchfield',
id: 'searchfield',
itemId: 'searchfield',
value: '',
onSearchTimeout: function(searchField, searchList)
{

if ((searchField.previousValue != searchField.getValue()) && (searchField.getValue().length > 0))
{
wwx.listData.proxy.url = "Gateway.ashx?req=getCompanies&name=" + searchField.getValue();
wwx.listData.load();
console.log("Previous value[" + searchField.previousValue + "] Current Value[" + searchField.getValue() + "]");
}
else
console.log("value unchanged or blank");
searchField.previousValue = searchField.getValue();
}
}]

}
,
{
xtype: 'list',
id: 'searchlist',
itemTpl: '<div><strong>{companyName}</strong></div><div class="subtitle">{address}</div>',
store: wwx.listData,
grouped: false,
indexBar: true,
flex:1,
selModel: {
mode: 'SINGLE',
allowDeselect: true
}
}
]
},
{
xtype: 'map',
title: 'Map',
itemId: 'map',
cls: 'card card3',
iconCls: 'maps',
mapOptions: {
zoom: 14,
center: wwx.latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}]
});

gcallaghan
4 Feb 2011, 9:27 AM
Oh the inline! it hurts my eyes!!! jk ;)

What's wwx.tabs contained in?

can you post the code from Ext.setup() level so I can test?

m@uce
4 Feb 2011, 9:32 AM
LoL. There is a lot more, so let me simplify and verify it before pasting it in.

Re: the Inline, it hurts my eyes too:D. I actually come from c++ where none of this would fly, but I have yet to read the preferred nomenclature, or at least a javascript style I am happy with... but I'm always seeking recommendations....

gcallaghan
4 Feb 2011, 9:41 AM
For my development environment I use seperate files for every class, even if its just some configuration of a Sencha component

for instance:


// Note this is not a one to one, just a back of the envelope example

var My Toolbar = Ext.extend(Ext.Toolbar,{
ui: 'dark',
dock: 'top',
items: [{
xtype: 'searchfield',
placeHolder: 'Search',
indexBar: true,
name: 'searchfield',
id: 'searchfield',
itemId: 'searchfield',
value: '',
onSearchTimeout: function(searchField, searchList)
{

if ((searchField.previousValue != searchField.getValue()) && (searchField.getValue().length > 0))
{
wwx.listData.proxy.url = "Gateway.ashx?req=getCompanies&name=" + searchField.getValue();
wwx.listData.load();
console.log("Previous value[" + searchField.previousValue + "] Current Value[" + searchField.getValue() + "]");
}
else
console.log("value unchanged or blank");
searchField.previousValue = searchField.getValue();
}
}]

});

Ext.reg('my-toolbar',Mytoolbar);

// Written a long time ago in a file far,far away

wwx.tabs = new Ext.TabPanel({
...
items:[
...
{xtype:'my-toolbar'}
...
]



Then I use jsbuilder3 to "compile" it into 1 javascript file in the right order
see sencha/sencha-touch.jsb3 for an example configuration for jsbuilder
and sencha/jsbuilder/JSBuilder.sh for the command to run

This helps me tremendously in terms of readability, debugging, testing, and optimized/automated deployment


In terms of your posted code, looks like your list is in the dockedItems property array, you should probably move it to an items property array.

m@uce
4 Feb 2011, 12:40 PM
That was it. Ext.List declared in the dockedItems does not scroll. Seems I checked that before. Very strange.

Regarding your source arrangement, a couple comments/questions. First, am I correct in assuming your envelope back source was meant to be run within the body of a function() to prevent the creation of global scope variables?

Second, is the Ext.reg routine the recommended method for class declaration? It seems like it would avoid some script errors pertaining to hard references that may not exist in a given moment, though it leaves me scratching my head a bit on the sequence of scripts to be fed into JSBuilder. I'm guessing you would want to register the classes that reference the fewest other classes, or do the xtypes not get used to instantiate classes until later?

Lastly, whats your pick for the best JS integrated editor? I'm doing all this in Visual Studio right now, which pretty much blows.

Thanks again for the help!

gcallaghan
4 Feb 2011, 1:39 PM
1. I do create a global variable that I use as a namespace. ex.


Ext.ns('MyApp.SomePackage.SomeSubPackage.Etc');
MyApp.MyToolbar = Ext.extend(Ext.Toolbar,{blah blah blah});


2. Ext.reg is suggested for exactly the reasons you stated. The registry allows lazy instatantiation so order of definition problems can be avoided, for some things.

2.1 JSBuilder uses a config file to concatenate scripts, You can specify the order so as to avoid undeclared variable errors

2.3 xtypes are not used immediately. they are used during the Ext.ComponentMgr.create() function call. This allows a the laxy instantiation mentioned above

3. I use Aptana/Eclipse with a custom builder that calls my SASS and JSBuilder scripts on every save.