PDA

View Full Version : How to refresh grid after updating store with new records



aks.cse
16 Jan 2016, 5:44 AM
Hi, I am a newbie to ext.js.

I am trying out below code to form a Group Grid. Using Array Store for pushing the data.
After updating the store, I am unable to refresh the grid.
I tried grid.getView().refresh(), but had no luck.
Any suggestion?


var relationshipGrid = function () {
Ext.onReady(function(){
Ext.QuickTips.init();

var xg = Ext.grid;
// shared reader

var reader = new Ext.data.ArrayReader({}, [
{name: 'name'},
{name: 'comments', type: 'text'},
{name: 'type' }
]);

var sm = new xg.CheckboxSelectionModel();
var sm2 = new xg.CheckboxSelectionModel();

grid = new xg.GridPanel({
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'type', direction: "ASC"},
groupField:'type'
}),

cm: new xg.ColumnModel([
sm, {
id:'name',
header: "Name",
width: 60,
sortable: true,
dataIndex: 'name',
filterable: true
},
{
header: "Comments",
width: 20,
sortable: true,
dataIndex: 'comments'
},
{
header: "Type",
width: 20,
sortable: true,
dataIndex: 'type'
}
]),
sm : sm2,
viewConfig: {
forceFit: true
},

view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Types" : "Type"]})'
}),

tbar : [
{
ctCls: 'mainToolbar',
text : '${delete_rows}',
id : 'btnDelete',
tooltip : '${Remove_the_selected_item}',
iconCls : 'msai_delete',
handler : function ()
{

}
,
scope : this
}
,
{
xtype : 'tbseparator'
}
,
{
text : '${Expand_All}',
iconCls : 'msai_expandall',
tooltip : '${Expand_Rows}',
handler : function()
{


}
},

{
xtype : 'tbseparator'
}
,
{
text : '${Collapse_All}',
iconCls : 'msai_collpaseall',
tooltip : '${Collapse_All_Rows}',
handler : function()
{


}
,
{
xtype : 'tbseparator'
}
,
{
id : 'clearFilter',
text : '${Clear_Filters}',
tooltip : '${Clear_Filtered_Data}',
iconCls : 'msai_filter',
handler : function()
{


}

}
],
frame:true,
width: 700,
height: 450,
collapsible: false,
animCollapse: false,
region : 'center',
iconCls: 'icon-grid',
renderTo: 'ROW_ID'
});
});


// Array data for the grids
Ext.grid.dummyData = storeArr;


}

Thanks in advance.

jdkhamba
17 Jan 2016, 8:15 PM
The syntax doesn't look right for ExtJS 4.x version. Take a look at the grid grouping example:

http://docs.sencha.com/extjs/4.2.0/#!/example/build/KitchenSink/ext-theme-neptune/#grouped-grid