We Keep Coding

grid live search extjs

My live search grid works fine but when I click on next page or do other thing about the grid, the search grid lose highlight terms search,does anyone help me what do I do? I want to keep highlighted terms search in all page. Thanks
bellow a snippet of my code:
var pagingStore = Ext.create('Ext.data.Store', {
proxy: {
type: 'memory',
enablePaging: true
},
remoteFilter: true,
pageSize: 5
}),
remoteStore = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'js/json/pagingStore.json',
reader: {
rootProperty: 'items'
}
},
fields: ['name', 'email', 'phone', 'type']
});
remoteStore.load(function () {
pagingStore.getProxy().setData(remoteStore.getRange());
pagingStore.load();
});
var bbar = new Ext.PagingToolbar({
store: pagingStore, //the store you use in your grid
displayInfo: true,
items: [ {
xtype: 'textfield',
name: 'searchField',
id: 'txtfield',
fieldLabel:'Search:',
labelAlign:'right',
emptyText:'search...',
width: 300,
listeners: {
change: {
fn: onTextFieldChange
}
}
}
]
});
bbar.down('#refresh').hide();
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
id: 'gridPanel',
store: pagingStore,
columns: [{
text: 'Name',
dataIndex: 'name',
filterable: true
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
},
{
text: 'Type',
dataIndex: 'type'
}],
bbar: bbar,
renderTo: Ext.getBody()
});

So I answer my own question, I've created a highlight() method and put it on the container: after field search input on each click, the highlight stay on the search terms: ;)
cont.getEl().on({
click: {
fn: highlight
}
});

Extjs issue with PagingToolbar - same data on the next page

There are so many issues I found about different problems with grid paging but still can't find the answer to mine.
I want to load some data from googleapis to extjs grid with ability of paging.
Let say we can query Google JSON API using the following link.
https://www.googleapis.com/books/v1/volumes?fields=totalItems,items(id,volumeInfo/title,volumeInfo/subtitle,volumeInfo/authors,volumeInfo/publishedDate,volumeInfo/description,volumeInfo/imageLinks)&q=Neuromarketing&maxResults=40&startIndex=0
As you can see, I can query as much records per time as 'maxResults' and from the 'startIndex' position.
The short example of json is
{
"totalItems": 298,
"items": [
{
..
First, I've defined a Model and a Store:
Ext.define('MyApp.view.main.Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'publishedDate', mapping: 'volumeInfo.publishedDate'},
{name: 'title', mapping: 'volumeInfo.title'}
]
});
Ext.define('MyApp.view.main.Books', {
extend: 'Ext.data.Store',
model: 'MyApp.view.main.Book',
buffered: true,
pageSize: 15,
alias: 'store.books',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'https://www.googleapis.com/books/v1/volumes?fields=totalItems,items(id,volumeInfo/title,volumeInfo/subtitle,volumeInfo/authors,volumeInfo/publishedDate,volumeInfo/description,volumeInfo/imageLinks)',
extraParams: {
q : 'Javascript',
maxResults : 15,
startIndex : 0
},
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'totalItems'
}
}
});
Second, I've defined a View
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'MyApp.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [
{
region: 'center',
xtype: 'tabpanel',
reference: 'tabPanel',
items:[
{
title: 'Result',
reference: 'tabPanelResultTab',
layout: 'fit',
items: [{
xtype: 'grid',
reference: 'grid',
title: 'Books',
dockedItems: [{
xtype: 'pagingtoolbar',
bind: {
store: '{summary}'
},
dock: 'bottom',
displayInfo: true
}],
bind: {
store: '{summary}'
},
columns: [
{ text: 'Google ID', dataIndex: 'id', flex: 1 },
{ text: 'Title', dataIndex: 'title', flex: 4 },
{ text: 'Published Date', dataIndex: 'publishedDate', flex: 1}
]
}]
}]
}]
});
Third, I've defined ViewModel
Ext.define('MyApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
requires: [
'MyApp.view.main.Books'
],
alias: 'viewmodel.main',
data: {
name: 'MyApp'
},
stores: {
summary: {
type: 'books'
}
}
});
So now, when I click next page on pagingtoolbar, the loading image pops up, then loads exact the same data on the 2nd page I saw on the 1st page. I still don't understand, how to tell PagingToolbar to query from next 'startIndex'. Is it possible to change 'start' and 'limit' variables to my 'startIndex' and maxResults'?

Yes, you can configure it at the proxy level. See startParam and limitParam.

grid loadmask won't disappear while using PagingMemoryProxy

I am trying to create a grid with store having PagingMemoryProxy.
Pagination is working and I can see as well as change all pages
but the loadmask won't disappear so I am not able to edit the grid data.
here is my code
Ext.require('Ext.ux.data.PagingMemoryProxy');
var data = {
Accounts: [{
id: 1,
name: 'Ed Spencer'
}, {
id: 2,
name: 'Abe Elias'
}, {
id: 3,
name: 'Tom Elias'
}]
};
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'name',
type: 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
storeId: 'myStore',
pageSize: 2,
model: 'Account',
data : data,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
root: 'Accounts'
}
},
});
var pagingBar = new Ext.PagingToolbar({
store: store,
displayInfo: true,
displayMsg: 'Displaying Accounts {0} - {1} of {2}',
emptyMsg: "No Accounts to display"
});
var grid = new Ext.create('Ext.grid.Panel', {
title: 'Accounts',
store: store,
columns: [{
header: 'Id',
dataIndex: 'id',
editor: 'textfield'
}, {
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
pluginId: 'rowEditing'
})],
height: 200,
width: 400,
loadMask: false,
renderTo: "editor-grid",
bbar: pagingBar
});
Store load event is getting fired and I can see greyed out data behind the loading mask
Firbug is showing no error.
I am using Extjs 4.1.3. Any idea what's the problem.
Thanks in advance

Looks like a known bug, think its fixed in Extjs 4.2.1
As a temporary fix, you can hide the mask 'on store load' using
grid.getView().setLoading(false);
Sample here : https://fiddle.sencha.com/#fiddle/1v9

EXTjs grid model json noob

What am I doing wrong? Of all the fields displayed in the grid only Working Group. EXTjs 4.2.1.
Tried different variants that have been found here, but, alas, nothing has helped understand what is wrong here.
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'WorckGroup', type: 'string' },
{ name: 'Statistics', type: 'auto' },
{ name: 'Specialist', type: 'string', mapping: 'Statistics.Specialist' },
{ name: 'ScallCount', type: 'int', mapping: 'Statistics.SCallCount' },
{ name: 'AverageDuration', type: 'auto', mapping: 'Statistics.AverageDuration' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'myModel',
proxy: {
type: 'ajax',
url: '/omnireports/ajaxgrid',
reader: {
type: 'json',
}
},
autoLoad: true
});
var basegrid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ header: 'WG', width: 200, dataIndex: 'WorckGroup' },
{ header: 'SP', dataIndex: 'Specialist' },
{ header: 'SCC', dataIndex: 'SCallCount' },
{ header: 'AD', dataindex: 'AverageDuration' }
], });
json
[
{"WorckGroup":"3D",
"Statistics":[
{"Specialist":"В А","SCallCount":64,"AverageDuration":0.1136067},
{"Specialist":"К Т","SCallCount":170,"AverageDuration":0.1045816}]
{"WorckGroup":"SD",
"Statistics":[
{"Specialist":"B A","SCallCount":197,"AverageDuration":0.1364689}]
}
]

Your mappings don't make sense. Statistics is an array, so Statistics.Specialist doesn't map to anything.
Your root for the reader should probably be WorckGroup.Statistics and you should include the WorckGroup in each item.
reader: {
type: 'json',
root: 'WorckGroup.Statistics'
}
Then remove the mapping from each field in the model.

ExtJS store, cannot load data to grid

Console is clear. Grid is empty (only column titles are shown). How can I check if data is correctly loaded to the store? It seems to me that the store's autoLoad method is not triggered somehow. Here is the grid:
Ext.define('NameSpace.view.Clients', {
requires: [
'Ext.tree.Panel',
'Ext.grid.Panel'
],
extend: 'Ext.tab.Panel',
title: 'Clients',
alias: 'widget.viewClients',
items: [
{
xtype: 'panel',
title: 'All Clients',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'treepanel',
title: 'Tree Panel',
width: 200,
resizable: true
},
{
xtype: 'gridpanel',
title: 'Clients List',
store: Ext.getStore('storeClients'),
flex: '1',
columns: [
{ text: 'Name', dataIndex: 'first_name' },
{ text: 'Last Name', dataIndex: 'last_name' },
{ text: 'Phone Number', dataIndex: 'phone' }
]
}
]
}
],
initComponent: function () {
this.callParent(arguments);
}
});
And here is the store (Model contains nothing but extend and fields configs):
Ext.define('NameSpace.store.Clients', {
extend: 'Ext.data.JsonStore',
proxy: {
type: 'ajax',
url: 'http://test.local/client',
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true,
constructor: function (config) {
this.initConfig(config);
}
});
Ext.create('NameSpace.store.Clients', {
model: 'Clients',
storeId: 'storeClients'
});

Move
model: 'Clients',
storeId: 'storeClients'
into store definition, and get rid of store creation call. Store will be created automatically.

Why do you override the store constructor?
If you actually need to do it, you should add this.callParent(arguments) to the constructor, otherwise the original constructor (which does a lot) won't run.

You just need to change
store: Ext.getStore('storeClients')
To This :
store: 'Clients'

I think you need to write field when you create store.
i.e.
fields:[ 'first_name', 'last_name', 'phone']