View Full Version : Live Search with buffer view grid

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 ?


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.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}

* 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]);

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
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.guaranteeRange(0, 49);

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


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 ?

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.