tomalex0
26 Nov 2010, 3:00 AM
Hi,
I was trying to implement a simple Grouped list with search functionality. I have grouped based on First letter of lastname.
getGroupString : function(record) {
return record.get('lastName')[0];
},
I came across problem first while grouping these names "Tommy Maintz" && "Tommy maintz" . Group with B and b are created.
So i just gave
getGroupString : function(record) {
return record.get('lastName')[0].toUpperCase();
},
Now the grouping worked fine. But it seems the name with small letter character is still at the last position of store.
I have workaround for the issue that i came across.
var store;
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen : 'phone_startup.png',
icon : 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
return record.get('lastName')[0].toUpperCase();
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'dougan'},
{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: 'Rob', lastName: 'Dougan'},
{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'}
]
});
new Ext.Panel({
layout:{
type:'vbox',
align:'stretch'
},
fullscreen:true,
scroll:false,
cls: 'demo-list',
dockedItems: [{
xtype: 'toolbar',
scroll:false,
dock : 'top',
items:[{xtype: 'spacer'},
{
xtype : 'textfield',
placeHolder: 'Search...',
listeners : {
scope: this,
keyup: function(field) {
var value = field.getValue();
if (!value) {
store.filterBy(function() {
return true;
});
} else {
var searches = value.split(' '),
regexps = [],
i;
for (i = 0; i < searches.length; i++) {
if (!searches[i]) return;
regexps.push(new RegExp(searches[i], 'i'));
};
store.filterBy(function(record) {
var matched = [];
for (i = 0; i < regexps.length; i++) {
var search = regexps[i];
if (record.get('firstName').match(search) || record.get('lastName').match(search)) matched.push(true);
else matched.push(false);
};
if (regexps.length > 1 && matched.indexOf(false) != -1) {
return false;
} else {
return matched[0];
}
});
}
}
}
},
{xtype: 'spacer'}]
}],
items:[{
xtype:'list',
id:'developerlist',
fullscreen:true,
itemTpl: '<tpl for="."><div class="contact">{firstName} <strong>{lastName}</strong></div></tpl>',
singleSelect: true,
indexBar:true,
grouped : true,
store : store,
listeners:{
itemtap:function(list, index, item, e){
console.log(index);
console.log(Ext.encode(list.store.getAt(index).data));
console.log(list.getSelectedRecords());
console.log(list.getSelectedNodes())
}
}
}]
});
}
});
Could someone look in to this.
I was trying to implement a simple Grouped list with search functionality. I have grouped based on First letter of lastname.
getGroupString : function(record) {
return record.get('lastName')[0];
},
I came across problem first while grouping these names "Tommy Maintz" && "Tommy maintz" . Group with B and b are created.
So i just gave
getGroupString : function(record) {
return record.get('lastName')[0].toUpperCase();
},
Now the grouping worked fine. But it seems the name with small letter character is still at the last position of store.
I have workaround for the issue that i came across.
var store;
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen : 'phone_startup.png',
icon : 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
return record.get('lastName')[0].toUpperCase();
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'dougan'},
{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: 'Rob', lastName: 'Dougan'},
{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'}
]
});
new Ext.Panel({
layout:{
type:'vbox',
align:'stretch'
},
fullscreen:true,
scroll:false,
cls: 'demo-list',
dockedItems: [{
xtype: 'toolbar',
scroll:false,
dock : 'top',
items:[{xtype: 'spacer'},
{
xtype : 'textfield',
placeHolder: 'Search...',
listeners : {
scope: this,
keyup: function(field) {
var value = field.getValue();
if (!value) {
store.filterBy(function() {
return true;
});
} else {
var searches = value.split(' '),
regexps = [],
i;
for (i = 0; i < searches.length; i++) {
if (!searches[i]) return;
regexps.push(new RegExp(searches[i], 'i'));
};
store.filterBy(function(record) {
var matched = [];
for (i = 0; i < regexps.length; i++) {
var search = regexps[i];
if (record.get('firstName').match(search) || record.get('lastName').match(search)) matched.push(true);
else matched.push(false);
};
if (regexps.length > 1 && matched.indexOf(false) != -1) {
return false;
} else {
return matched[0];
}
});
}
}
}
},
{xtype: 'spacer'}]
}],
items:[{
xtype:'list',
id:'developerlist',
fullscreen:true,
itemTpl: '<tpl for="."><div class="contact">{firstName} <strong>{lastName}</strong></div></tpl>',
singleSelect: true,
indexBar:true,
grouped : true,
store : store,
listeners:{
itemtap:function(list, index, item, e){
console.log(index);
console.log(Ext.encode(list.store.getAt(index).data));
console.log(list.getSelectedRecords());
console.log(list.getSelectedNodes())
}
}
}]
});
}
});
Could someone look in to this.