PDA

View Full Version : need an example of a list with searchfiled that scrols correctly



siamak_roshan
25 Jul 2011, 2:50 PM
HI All,

I have been at this issue for a few days with know luck.
What I want to implemenytt is a list object with a searchfiled on the top. So, this calls for using a panel with vbox layout usually. The problem s I am facing when I do this is as follows:
1- The list stops scrolling correcly.
2- The search field looks square and not round.

The only way I could make everything work correctly is to add the search field in a toolbar and add the toolbar as a docked item to the top. Then the list will scroll all the way through.

Has any one else seen this behavior with list?
I am using sencha 1.1 (the most recent version).

Appreciate if any one has a list example with a search button that works as it is supposed to work.

Thanks

Siamak

milo08
26 Jul 2011, 3:50 AM
Hi Siamak,

i hope it helps, based on Sencha 1.1.0:





Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});


var listStore = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

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


data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Zed', lastName: 'Zacharias'}
],
autoLoad: true



});



var listBase = new Ext.List({

// required configs...
selectionModel: {
mode: 'SIMPLE'
},

itemTpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
//itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,
store : listStore,
listeners: {

itemtap: function(view, index, item, e)
{
var recDummy = listStore.getAt(index);
alert('More info for '+ recDummy.get('firstName'));
}
}


});



//panel with list and toolbar
var browseList = new Ext.Panel({
layout : 'fit',
width: 320,
height: 450,
items:
[listBase],
dockedItems: [
{
xtype: 'toolbar',
height: '50px',
dock : 'top',

items: [
{xtype: 'spacer'},
{
xtype : 'textfield',
placeHolder: 'Search',
listeners: {

scope: this,
keyup: function(field){

var value = field.getValue();


if (value.length > 0) {

//important to reset the coordinate
listBase.scroller.updateBoundary();
listBase.scroller.scrollTo({
x: 0,
y: 0
}, false);

//search word in List
var listId = listStore.find('firstName', value);

//select Entry

listBase.getSelectionModel().select(listId);

//create HTML Div Element
var ehtml = listBase.getNode(listId);
//create Sencha Element
var el = Ext.get(ehtml);

if (el != null)
{


//get the coordinates
// i forgot why i sub the Y - coordinate my last notice was
// (-100 on y - Achse, because the height of the Toolbar)



if(!Ext.is.Phone)
{
var ykor = el.getY() -420;
}
else
{
var ykor = el.getY() -100;
}

var xkor = el.getX();


//scroll to position
listBase.scroller.scrollTo({
x: xkor,
y: ykor
}, true);
}

}
},

buffer: 200

} // listener
}, {xtype: 'spacer'},

]
}
]
});


if (!Ext.isPhone) {

var p = new Ext.Panel({
floating: true,
layout: 'card',
width: 320,
height: 450,
centered: true,
modal: true,
hideOnMaskTap: false,
items: [browseList]
}).show();

}
else {
var p = new Ext.Panel({

fullscreen: true,
scroll: false,
layout: 'card',
items: [browseList]
});

}
}
});




greetz milo

siamak_roshan
26 Jul 2011, 1:41 PM
Hi Greetz

Thanks for taking the time to publish this example. It is a good one. But I also had got this working in my own setup. Since just like your example, if I dock the search field then everything is good.
The problem with this approach is, that the "Docked Item" area for top, is usually reserved for buttons and icons, and it would make it very crowded to also have a search filed as part of that.

Additionally, if you look at ihpone contacts list, the search field is not fixed (Docked) at the top. You can only see that field when you have scrolled to the top of the contatcs list. So, this is the sort of behavior I want to emulate with sencha as well.

The problem is as soon as you add the searchfeild as an Item to the panel as opposed to a "Docked Item" like you have now, then the scrolling does not work. Everytime you attempt to scroll down the screen shifts up and down a bit and goes back to the same page.

So, that is the problem I am trying to solve with no luck.

Let me know what you think?

and thanks again for your help

Siamak