I have EXT JS 4.2 Grid and store.
Now one page load grid get data from store and display on UI.
I have date drop down filter on page. on date selection of date filter one request should go to server fetch data from db and reload store with updated data, and grid should update with updated store value.
My issue is how can i unbind exiting store from grid load, set store params with date, then fetch new data in store and bind to grid. and show updated data on grid?
thanks in advance
this is code where grid is created , one button is created on click of which new params needs to pass to server
{
xtype: 'container',
layout: 'hbox',
style: 'margin-left: 152px;',
width: 960,
height: 'auto',
cls: 'portlet full',
items: Ext.getCmp('grid')
}, { //Create Button to fetch Grid Checked Data//
xtype: 'container',
layout: 'hbox',
style: 'margin-left: 163px;padding-top: 20px;padding-bottom: 59px;',
items: [
Ext.create('Ext.Button', {
name: 'Click me',
width:'40px',
handler: function() {
update =============================================
Ext.create('store', {storeId: 'storetest2'}).load({
params: {
// To send Extra Params
'lastname':'test2'
},
callback: function(records, operation, success) {
// To Perform some call back operations
}
});
scndStore = Ext.data.StoreManager.lookup('storetest2'),
Ext.getCmp('grid').reconfigure(scndStore);
update =============================================
})
],
After getting data into the new store,you can use
grid.reconfigure(store, [columns])
to change which store is bound to the grid..Please have a look docs.
A simple working fiddle
Update:Try this
var store2 = Ext.create('Ext.data.Store', {
model : 'store2Model', //Don't miss to mention model
storeId: 'storetest2',
proxy : {
type : 'ajax',
url :'someUrl'
reader : {
type : 'json',
root : 'items' // depends
}
}
});
store2.load({
params: {
// To send Extra Params
'lastname':'test2'
},
callback: function(records, operation, success) {
grid = Ext.getCmp('grid'); //First check whether you are getting this comp properly
grid.reconfigure(store2);
}
});
It is fixed with this.getStore().load({ params: {test:'test1'},.. I was using filter and I was not clearing it before second load .this.getStore().clearFilter(true);
Related
I'm new to extjs and I'm having some trouble loading json data to a grid. In the debugger I can see the grid's store and columns are being populated accurately the way I want. But the data is not displaying in the grid. I'm not sure why. But my grid is not loading the data.
What am I doing wrong?
Thank you in advance.
the grid view:
Ext.define('searchadmin.view.reports.DynamicGrid' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.dynamicGrid',
title : 'Results',
columns: [],
columnLines : true,
sortableColumns : false,
autoScroll : true,
viewConfig : {
stripeRows : false,
loadMask:true
}
});
The store:
Ext.define('searchadmin.store.DynamicGridStore', {
extend : 'Ext.data.Store',
model: 'searchadmin.model.DynamicGridModel',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data'
}
}
});
The model:
Ext.define('searchadmin.model.DynamicGridModel', {
extend: 'Ext.data.Model',
fields: []
});
The view config for the page on which the above grid is in this gist:
Reports.js
The Reports controller that contains the code to dynamically compose the model and store is in the handleSelectQueryResult() in: ReportsController
You will have to use reconfigure method of grid instead of just assigning columns and store like this in handleSelectQueryResult function of ReportsController.js.
grid.columns = _columns; //will not work
grid.store = queryStore; //will not work
Also note that ComponentQuery.query returns an array.
Try this way.
var grid = Ext.ComponentQuery.query('#dynamicGridId')[0]; //or var grid = Ext.getCmp('dynamicGridId');
grid.reconfigure(queryStore, _columns);
I have a property grid :
periods.each(function(record){
var tempPropGrid = me.getView().add(
{
xtype:'propertygrid',
width: 80,
header: false,
title: 'prop grid',
//for some reason the headers are not hiding, we may need to deal with this using CSS
//hideHeaders: true,
enableColumnResize: false,
sortableColumns: false,
nameColumnWidth: 1,
source: record.data,
sourceConfig: {
periodScrumMaster: {
editor: Ext.create('Ext.form.ComboBox', {
tdCls: 'red',
store: team,
queryMode: 'local',
displayField: 'personName',
valueField: 'personName',
listeners: {
'expand' : function(combo) {
var gridvalues = this.up('propertygrid').getSource();
combo.getStore().clearFilter(true);
combo.getStore().addFilter({property: 'teamName', value: teamName});
combo.getStore().addFilter({property: 'periodName', value: gridvalues.periodName});
var totalFTE = team.count();
console.log(totalFTE);
var teamStore = Ext.getStore('personPeriods');
console.log('store');
console.log(teamStore);
},
}}),
displayName: 'Scrum Master'
},
},
That has a render listener:
beforerender: function(){
debugger;
var gridValues = this.getSource();
// console.log(record);
//debugger;
// filter periods for this period only
periods.filterBy(function(record,id){
if(record.get("periodName") === gridValues.periodName){
return true;
}});
// filter teamMembers for this period and team
var view = this.up();
var vm = view.getViewModel();
var store = vm.getStore('teamMembers');
store.filterBy(function(record,id){
if(record.get("periodName") === gridValues.periodName) {
return true;
}});
//store.clearFilter(true);
store.addFilter({property: 'teamName', value: teamName});
// get FTEs assigned to this team in this period by counting records
var resourcedFtes = store.count();
// Here I check the record in the periods store to make sure the data matches up with how many resourcedFte there is an update it if required
// This is super bad and will need to refactor
periods.each(function(record,idx){
var value = record.get('resourcedFte');
if(value != resourcedFtes){
record.set('resourcedFte',resourcedFtes);
record.commit();
vm.data.parentController.saveParent();
}});
// Need to call save parent so that the record is updated when we update it above
//Clear everything so that we can start fresh next period
store.clearFilter(true);
//periods.clearFilter(true);
Basically there is some logic to check if the data is correct/up to date and if its not it updates it. This works fine, but the data is not then loaded into the grid. I have to refresh after rendering the grid for it to load correctly.
Is there a way I can call a refresh or reload method on the property grid to load the data again inside an if statement?
If I understand your question, I would suggest you to programm the store proxy so that it returns the whole changed record.
Is your store parametered with autoLoad enabled?
(sorry I can't (yet) comment)
This is a follow up question that I got answered here: How can I programmatically set column filters?
I have a 188 line Ext.js view. In this view I extend Ext.grid.Panel and in this grid I have set the selModel like so ...
selModel: {
cellSelect: false, // Only support row selection.
type: 'spreadsheet' // Use the new "spreadsheet" style grid selection model.
},
On one of the columns, the Status column, I am programmatically setting the filter so that only rows that have the Status of Ready will appear when the page firsts renders. I have been doing this here in the code:
columns: [
...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
var filter = this.up('panel').down('#status').filter;
if (!filter.menu) {
filter.createMenu();
filter.menu
.down('menuitem[value="Ready"]')
.setChecked(true);
}
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: 'list',
flex: 1,
},
... more columns ...
A helpful SO member pointed out that is not the most efficient place for the code that sets the filter as the code will be executed for each row in the grid.
I have tried adding an afterrender function like so ...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: 'list',
flex: 1,
listeners: {
afterrender: function(value) {
Ext.Msg.alert('We have been rendered value is ' + value );
var filter = this.up('panel').down('#status').filter;
if (!filter.menu) {
filter.createMenu();
filter.menu
.down('menuitem[value="Ready"]')
.setChecked(true); //Uncaught TypeError: Cannot read property 'setChecked' of null
}
}},
... but that results in this error message, //Uncaught TypeError: Cannot read property 'setChecked' of null.
What am I doing wrong here? Do I need the listeners:? Am I not getting passed the data I think I am getting passed to my afterrender function? Should I defining a initComponent function?
UPDATE:
I changed my code to what DrakeES suggested, ...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
flex: 1,
filter: {
type: 'list',
value: 'Ready'
}
... but the result is this:
Where the animated loading image just sits there and spins. This prevents the user from be able to change the filter interactively. I wonder what it is I am doing wrong here?
I am programmatically setting the filter so that only rows that have
the Status of Ready will appear when the page firsts renders
What checking the filter's checkbox effectively does is setting filter on the store. Because you want the filter to be applied initially, it would be better to have it in the store config right away:
filters: [
{
id: 'x-gridfilter-status',
property: 'status',
value: 'Ready'
}
]
That way the grid view appear filtered in the first place — instead of initially showing all rows and only then filtering them out once the column menu renders and applies the filter. Note that having id: 'x-gridfilter-status' on the store's filter is required so that the column's filter picks it up instead of creating a duplicate.
Setting filter on the store, however, will not send feedback to the column filter menu, so the latter will remain unchecked unless you explicitly check it. Therefore, you still need an afterrender handler on either the grid or the column to make things look in sync.
A simple and elegant solution without listeners and stuff:
filter: {
type: 'list',
value: 'Ready'
}
Full working example: https://fiddle.sencha.com/#fiddle/prp
I have a store which is attached to a List. The list also uses the ListPaging plugin to enable pagination. After I call the load method (or event) of the store, the store loads the data into the list, sending requests to the following url -
http://localhost/mysite/nodelist.php?_dc=1359309895493
&tids=1%2C4%2C2%2C5%2C67&page=1&start=0&limit=10
After scrolling down the list and pressing the Load More... (which is appended to the list by the plugin), the store sends another request to the same url but with different parameters, enabling pagination -
http://localhost/mysite/nodelist.php?_dc=1359310357419
&tids=1%2C4%2C2%2C5%2C67&page=2&start=10&limit=10
Now I want to reset the value of the start and page parameter of the store. I tried to reset it by using the setExtraParam method on the proxy, but if I do that, then the control doesn't maintain the pagination - meaning that it doesn't automatically changes the page and start parameters when I press Load More....
So How do I do it?
Here is the sample code for my store -
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.reader.Json',
'Ext.data.proxy.Ajax'
],
config: {
autoLoad: false,
model: 'MyApp.model.MyModel',
serverUrl: null,
pageSize: 2,
proxy: {
type: 'ajax',
actionMethods: {
read: 'GET'
},
url: null,
reader: {
type: 'json'
}
},
listeners: {
beforeload: function () {
console.log('Before load');
},
load: function (store) {
// console.log('load');
}
}
}
});
and this is the list view -
list = {
xtype: 'list',
cls: 'myList',
flex: 12,
itemTpl: '{title}',
store: 'MyStore',
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false
}
],
listeners: {
select: {
scope: this,
fn: this.onSelect
},
swipe: {
scope: this,
element: 'element',
fn: this.onListSwipe
}
}
};
From looking at the source, perhaps you are looking for the currentPage config of the store?
When you load more recording using the ListPaging plugin, all it does is call nextPage in store which then calls loadPage using the currentPage config. If you reset the currentPage config back to 1 on your store, it will just assume the start is back to 0 and the page of course is 1.
There are several tabs on a FormPanel:
Code:
var podform = new Ext.FormPanel({
labelAlign: 'left',
id: 'tab_6',
frame:true,
title: 'Договоры подряда',
bodyStyle:'padding:5px 5px 0',
width: 600,
listeners: {
'activate' : function(podform,records,options) {
console.log("store:"+store_form);
this.loaded = true;
var record = store_form.getAt(0);
podform.getForm().loadRecord(record);
}
},
reader : new Ext.data.XmlReader({
record : 'zem',
// success: '#success'
}, [
]),
items: []
});
podform.add(tabs_pod);
Now i try submit data to server:
podform.addButton({
text: 'Submit',
//disabled:true,
handler: function(){
podform.getForm().submit({
url:url_servlet+'submit.jsp',
waitMsg:'Saving Data...',
success: function(form, action) {
Ext.Msg.show({
title:'Success'
,msg:'Form submitted successfully'
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
}
});
}
});
But firebug says that i subbmit data only with panels that I have seen. Its means if i not click on second tab i cant get data from it.
Its possible to fix it?
UPDATE
When i use deferredRender:false, first tab shows normal but another tabs looks like this:
I think the problem you are seeing is that the tab panel is not rendering the fields in inactive tabs dues to lazy rendering - a performance enhancing technique. You can try to explicitly force rendering of those sub panels with deferredRender:false
see full doc here
ExtJS 3.4 -> http://docs.sencha.com/ext-js/3-4/#!/api/Ext.TabPanel-cfg-deferredRender
ExtJS 4.1 -> http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-deferredRender