PDA

View Full Version : Update ExtJS List Filter when the data in the grid changes dynamically



MAHESHHM
6 Jan 2017, 10:12 AM
I have alphabetical links at the top to load a grid which has List filters. When i click on alphabet 'A' for the first time, grid loads perfectly and filters loaded correctly, however when I click on other alphabets (after i clicked 'A', with the grid and filters present), grid loads perfectly however the filter is still the old filter(the one for alphabet 'A'). Help me on how to update the filters automatically when i click on other alphabets.

Alphabets basically help me to filter store data starting with alphabets. This is a required feature for my application.


I have ExtJS V 4.2.2









It is some thing like this jsfiddle.net/hxwqymyL (http://jsfiddle.net/hxwqymyL/) when i click on A i should get grid listing to have 4 rows with name 'A', 'AA', 'AAA', 'A1' and list filters should be 'A', 'AA', 'AAA', 'A1' and after that if i click on 'B' letter grid should be updated with 'B', 'BB', 'BBB', 'B1' and list filters also should be updated to 'B', 'BB', 'BBB', 'B1'.

vick_44
8 Jan 2017, 11:45 PM
Can you paste the code here please (jsfiddle doesnt open in my firewall'd network)

MAHESHHM
9 Jan 2017, 9:28 AM
html....

<table width="100%" cellpadding="4" cellspacing="0" border="0" id="Table1">
<tr>
<td align="center" class="biggerfont">
<br/>
<span class="bigfont">Please select the FIRST letter of the Name you are searching for.</span>
</td>
</tr>

<br/>

<tr>
<td align="center" class="basefont">
<a
id="usFilter"
class="link_bold"
href="javascript: void(0);"
onclick="filterListing('A')"
>
A
</a>
|
<a
id="usFilter"
class="link_bold"
href="javascript: void(0);"
onclick="filterListing('B')"
>
B
</a>
</td>
</tr>
</table>
<div id="jobCodeListing" class="section">
</div>


related MVC ExtJS code,

function filterListing(letter){
//alert('a');
JobCodeSearchApp.utils.JobCodeSearchUtils.filterListing(letter);
}
Ext.define('JobCodeSearchApp.model.JobCodeModel',{
extend: 'Ext.data.Model',
fields: [
{name: 'name'},
{name: 'client'},
{name: 'domain'}
]
});




Ext.define('JobCodeSearchApp.view.JobCodeGrid', {
extend : 'Ext.grid.Panel',
id : 'jobCodeGrid',
store : 'JobCodeStore',
renderTo : Ext.getBody(),
title : 'Job Details',
frame : true,
width : 'auto',
layout : 'fit',
sortable : true,
viewConfig: {
loadMask: false
},
columns: [
{
text : 'Name',
dataIndex : 'name',
flex: 1
}, {
text : 'Client',
dataIndex : 'client',
flex: 1
}, {
text : 'Domain',
dataIndex : 'domain',
flex: 1
}
]
});






Ext.define('JobCodeSearchApp.store.JobCodeStore', {
extend : 'Ext.data.Store',
model : 'JobCodeSearchApp.model.JobCodeModel',
storeId : 'jobCodeStore',
remoteSort : false,
sortOnLoad : true,
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
data: [
{name: 'A', client: 'Client A', domain: 'Domain A'},
{name: 'AA', client: 'Client AA', domain: 'Domain AAA'},
{name: 'AAA', client: 'Client AAA', domain: 'Domain AAAA'},
{name: 'B', client: 'Client B', domain: 'Domain B'},
{name: 'BB', client: 'Client BB', domain: 'Domain BB'},
{name: 'BBB', client: 'Client BBB', domain: 'Domain BBB'},
{name: 'A1', client: 'Client A1', domain: 'Domain A'},
{name: 'C', client: 'Client B1', domain: 'Domain B1'},
{name: 'D', client: 'Client C1', domain: 'Domain C1'},
{name: 'E', client: 'Client C2', domain: 'Domain C2'},
{name: 'F', client: 'Client D', domain: 'Domain D1'},
{name: 'G', client: 'Client E', domain: 'Domain D'}
],
extraParams : {
jobChar : '',
}
});


Ext.define('JobCodeSearchApp.controller.JobCodeSearchController', {
extend : 'Ext.app.Controller',
stores : ['JobCodeStore'],
models : ['JobCodeModel'],
views : ['JobCodeGrid'],
mixins : ['JobCodeSearchApp.utils.JobCodeSearchUtils'],

/**
* Function that initialize the components before the page launch and handles the listeners.
*/
init : function() {
jobCodeSearchUtils = JobCodeSearchApp.utils.JobCodeSearchUtils;
jobCodeSearchConstants = JobCodeSearchApp.utils.JobCodeSearchConstants;
}


});
Ext.application({
name : 'JobCodeSearchApp',
controllers : [ 'JobCodeSearchController' ]
});






Ext.define('JobCodeSearchApp.utils.JobCodeSearchUtils', {
statics :
{
employeeId : '',
jobChar : 'A',
country : '',
salaryPlan : '',
showTempJobcodes : false,
hasAccessToMyCompansation : true,
emptyMessage : 'No records found',
// Rest URLs
createFilters : function () {
var filtersCfg = {
ftype: 'filters',
autoReload: false,
local: true,
id: 'Jobcodefilters',
filters: [{dataIndex: 'name', type: 'list'},
{dataIndex: 'client'},
{dataIndex: 'domain', type: 'string'}
]};
return filtersCfg;
},

filterListing: function (letter) {
if (Ext.getCmp('jobCodeGrid')) {
//Ext.getCmp('jobCodeGrid').filters.clearFilters();


Ext.getCmp('jobCodeGrid').destroy();
}
var filtersCfg = this.createFilters();


var grid = Ext.create('JobCodeSearchApp.view.JobCodeGrid',{
features : filtersCfg
});
alert('hi');
var storeObj = grid.getStore();
storeObj.proxy.extraParams.jobChar = letter;
storeObj.on({
load : {
fn : function() {
if (grid) {
grid.doLayout();
}
},
scope : this
}
});
storeObj.loadPage(1);
}
}

});

vick_44
10 Jan 2017, 12:14 AM
You can try adding below highlighted line : what it does is, it will remove previous content of store prior to loading.



var storeObj = grid.getStore();
storeObj.removeAll();
storeObj.proxy.extraParams.jobChar = letter;
storeObj.on({
.
.
.

Also it seems like you have hardcoded filter character 'A' , not sure if it is expected.

Ext.define('JobCodeSearchApp.utils.JobCodeSearchUtils', {
statics :
{
employeeId : '',
jobChar : 'A',


Sorry i could not copy and execute the whole program as it is in many parts, right now am guessing things when i read through your code so I may be wrong.

PS: Next time can you please use code tags while posting the code. And instead of posting entire code it would be very helpful if you can post a small snippet of workable code which we can copy paste to any fiddler and execute, that way one can test and provide a working solution. Your code snippet shown in fiddler (the first post) is ofcourse the right way but it shows only a grid and does not have the filter code for forum members to observe the problem and test their solution.