PDA

View Full Version : Live Search with buffer view grid



samir_ware
6 Jul 2012, 2:07 AM
Hello all
Is it possible to have a live search plugin with buffered view. I tried to apply plugin to buffered grid. Though it does not work properly. Plugin could not find the data present. Code for the same is as shown below.
Can somebody please help me in applying this plugin to buffer grid ?
Thanks
Samir



/*


This file is part of Ext JS 4


Copyright (c) 2011 Sencha Inc


Contact: http://www.sencha.com/contact


GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.


If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.


*/
Ext.Loader.setConfig({enabled: true});


Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller',
'Ext.ux.LiveSearchGridPanel'
]);


Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
]
});


Ext.onReady(function(){
/**
* Returns an array of fake data
* @param {Number} count The number of fake rows to create data for
* @return {Array} The fake record data, suitable for usage with an ArrayReader
*/
function createFakeData(count) {
var firstNames = ['Ed','sam', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
lastNames = ['Spencer','ware', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
ratings = [1, 2, 3, 4, 5],
salaries = [100, 400, 900, 1500, 1000000];


var data = [];
for (var i = 0; i < (count || 25); i++) {
var ratingId = Math.floor(Math.random() * ratings.length),
salaryId = Math.floor(Math.random() * salaries.length),
firstNameId = Math.floor(Math.random() * firstNames.length),
lastNameId = Math.floor(Math.random() * lastNames.length),


rating = ratings[ratingId],
salary = salaries[salaryId],
name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);


data.push({
rating: rating,
salary: salary,
name: name
});
}
return data;
}
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
pageSize: 50,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
// never purge any data, we prefetch all up front
purgePageCount: 0,
model: 'Employee',
proxy: {
type: 'memory'
}
});






var grid = Ext.create('Ext.ux.LiveSearchGridPanel', {
width: 700,
height: 500,
title: 'Bufffered Grid of 5,000 random records',
store: store,
verticalScroller: {
xtype: 'paginggridscroller',
activePrefetch: false
},
loadMask: true,
disableSelection: true,
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
xtype: 'rownumberer',
width: 40,
sortable: false
},{
text: 'Name',
flex:1 ,
sortable: true,
dataIndex: 'name'
},{
text: 'Rating',
width: 125,
sortable: true,
dataIndex: 'rating'
},{
text: 'Salary',
width: 125,
sortable: true,
dataIndex: 'salary',
align: 'right',
renderer: Ext.util.Format.usMoney
}],
renderTo: Ext.getBody()
});


var data = createFakeData(1000),
ln = data.length,
records = [],
i = 0;
for (; i < ln; i++) {
records.push(Ext.create('Employee', data[i]));
}
store.cacheRecords(records);


store.guaranteeRange(0, 49);
});

scottmartin
10 Jul 2012, 5:53 PM
You would only be able to search what was in the current buffer .. not very useful.

Scott.

samir_ware
31 Jul 2012, 9:26 PM
I guess in buffer view we do have all the records on client side and once we scroll records gets displayed on the visible view port.
So it makes sense to me to have this plugin working with buffered view. Though I am not preety sure how to get hold over the data in the cache ? Any idea ?
Thanks
Samir

scottmartin
1 Aug 2012, 6:41 AM
If you want to search all records, then this should be at the server level and return all results to the client. As mentioned, the buffered view is just a section of all records and is meant for scrolling a large set.

Scott.