I have a grid that is generated dynamically
I build the columns array and store, then call reconfigure on my grid
Next I create a filter array. Now filters have to be applied to the columns in my grid.
But the filters are not reflected in my grid. How can ths be achieved?
myView.js
Ext.define('myView.view.myView', {
extend: 'Ext.grid.Panel',
plugins: 'gridfilters',
store: 'myStore.store.myStore',
pageSize:10,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'WhiskerPlot.store.settingStore', // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
filters :[]
});
myController.js
var colFilters = [];
colFilters.push({
type : 'list',
dataIndex : dummyDataIndex,
options : [small,large]
});
var filters = {
ftype : 'filters',
filters : colFilters
};
var gridview = Ext.ComponentQuery.query('myView')[0];
gridview.reconfigure(store,columnarr);
gridview.filters.addFilters(filters);
Add the filters to the column array itself.
Copied from: Filters Doc
var grid = Ext.create('Ext.grid.Panel', {
store: {
url: 'path/to/data'
},
plugins: 'gridfilters',
columns: [{
dataIndex: 'id',
text: 'Id',
filter: 'number'
}, {
dataIndex: 'name'
text: 'Name',
filter: {
type: 'string',
value: 'Ben'
}
}, {
...
}]
});
Related
I receive an array of strings from the server.
How can I populate my grid panel if the data is not in key-value format?
Here is the response:
{"result":true,"data":["dep1","dep2","dep3"],"totalCount":3}
Here is my grid panel
xtype: 'gridpanel',
flex: 1,
itemId: 'departmentsGridPanel',
title: '',
store: new Ext.data.ArrayStore({
autoLoad: true,
fields: [
'department'
],
proxy: {
type: 'ajax',
url: 'FilteringDataServlet?filterColumn=avdeling',
reader: {
type: 'json',
root: 'data'
}
}
}),
columns: [{
text: 'Avdeling',
flex: 1,
dataIndex: 'department'
}],
Then you should use Ext.data.reader.Array with mapping parameter.
Employee = Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: 0}, // "mapping" only needed if an "id" field is present which
{name: 'occupation', mapping: 1} // precludes using the ordinal position as the index.
]
});
I have solved this by adding load listener to my store and modifying the data there
listeners: {
load: function(store, records, success, opts) {
store.each(function(record) {
record.set('department', record.raw);
});
}
}
Let's start off with my store:
var newstore = Ext.create('Ext.data.Store', {
fields: ['id', 'table_name', 'name', 'description']
proxy: {
type: 'memory'
}
});
I have some example data here, which comes from a dynamic json response:
{
"elements":[
{
"element":{
"name":"Element Name", <---- This is the value I need**
"id":"Element ID",
"attributes":[
{
"attrname":"id",
"attrvalue":"This is the ID"
},
{
"attrname":"name",
"attrvalue":"This is the name"
},
{
"attrname":"description",
"attrvalue":"This is the description"
},
{
"attrname":"table_name",
"attrvalue":"This is the table"
}
]
}
}
}
And I decode my json here, which places it neatly into my store:
for( var i=0; i < decoded.elements.length; i++ ) {
var element = decoded.elements[ i ].element;
var element_name = element.name; <---- THIS retrieves that value I need
var model = {};
// loop over attributes
for( var x=0; x < element.attributes.length; x++ ) {
var attribute = element.attributes[ x ];
model[ attribute.attrname ] = attribute.attrvalue;
}
// implicitly cast data as Model
newstore.add( model );
}
And lastly, my grid - ResponseList.js:
var grid = Ext.define('MyApp.view.ResponseList' ,{
initComponent: function(columns) {
//config
this.columns = [
{header: 'Element Name', dataIndex: 'What goes here ???'},
{header: 'ID', dataIndex: 'id'},
{header: 'View Name', dataIndex: 'name'},
{header: 'Description', dataIndex: 'description'},
{header: 'Table Name', dataIndex: 'table_name'},
etc...
My question is, how do I place that first name value, Element Name into the first row of my grid? The name name is already taken for the attributes.attrname field, so I'm not sure how to proceed. Everything except Element Name displays just fine.
[Edit]: This is how I want my grid to look:
Any help is appreciated thanks!
In your fields in the store or in a model you can specify mapping which allows for nested json data:
var model = Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
mapping: 'element.id',
type: 'auto'
}],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'elements',
successProperty: ''
}
}
});
var store = Ext.create('Ext.data.Store', {
model: model,
autoLoad: true,
listeners: {
load: function() {
console.log(store);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo:Ext.getBody(),
store:store,
columns: {
defaults: {},
items: [{
header: "Id",
dataIndex: "id",
hidden: false
}]
}
});
Here is a fiddle demonstrating working code.
You can probably use the renderer on the grid to get the value you actually need.
{header: 'Element Name', dataIndex: 'What goes here ???',
renderer: function(value, metaData, record, row, col, store, gridView){
return record.someAttribute;
}
},
I'm not sure of the structure of your record, but I think you can guess how to go on from here.
Also, I don't think all that manual decoding is necessary, I can't figure out how you want your grid to look, but if you post a sketch of it or something maybe we can make all that decoding look cleaner.
I've got a grid getting data through a json store. I want to display the total number of rows in the grid. The problem is that the store.count() function is running before the store loads so it is returning 0. How can I get my count function to run only once the store has loaded? I'm working in MVC, here is my app.js which has my counting logic in it.
Thank you for any help
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
launch: function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.create('Ext.container.Viewport', {
resizable: 'true',
forceFit: 'true',
layout: 'fit',
items:[{
xtype: 'userpanel',
}]
});
var port = Ext.ComponentQuery.query('viewport')[0],
panel = port.down('userpanel'),
grid = panel.down('userlist'),
label = panel.down('label');
var count = grid.store.getCount();
var labelText = "Number of people in list: " + count;
label.setText(labelText);
}
});
store code:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'queue',
successProperty: 'success'
}
},
sortOnLoad: true,
//autoLoad: true,
sorters: [
{
property: 'PreReq',
direction: 'DESC'
},
{
property: 'Major1',
direction: 'ASC'
},
{
property: 'UnitsCompleted',
direction: 'DESC'
}
],
listeners:{
onload: function(){
var port = button.up('viewport'),
grid = port.down('userlist'),
panel = port.down('userpanel'),
label = panel.down('label'),
count = grid.store.getCount(),
labelText = "Number of people in list: " + count;
label.setText(labelText);
},
scope: this
}
});
grid code:
Ext.define('AM.view.user.List' , {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
store: 'Users',
height: 'auto',
width: 'auto',
//resizable: 'true',
features:[{
ftype: 'grouping'
}],
autoFill: 'true',
layout: 'fit',
autoScroll: 'true',
initComponent: function() {
function renderTip(value, metaData, record, rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
};
var dateRender = Ext.util.Format.dateRenderer('m/d/Y');
this.columns=[
//code for all my columns
]
];
this.callParent(arguments);
}
});
Try putting a listener on the store then listen for the onload event get the count and update the field that way. Though there are many ways to do this that is just one.
But in the example above you never load the store you just create it, which is why you see zero.
figured it out, needed to add a listener for the "load" event, not "onLoad". Code below...
Ext.define('APP.store.Store', {
extend: 'Ext.data.Store',
model: 'APP.model.Model',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
},
sortOnLoad:true,
sorters: [{
property: 'last',
direction: 'ASC'
}],
listeners: {
load:{
fn:function(){
var label = Ext.ComponentQuery.query('#countlabel')[0];
label.setText(this.count()+ ' Total Participants);
}
}
}
});
After URL has been reached, how to show this data to grid, autoLoad:true, only loads firstly defined URL, but how to "dynamically" show loaded JSON to grid?, Reload the data with newly called JSON?
buttons: [{
text: 'Load1',
handler:function(){
myStore.getProxy().url = 'app/kontaktGrid1.json';
myStore.load();
grid.getView().refresh();
}},{
text: 'Load2',
handler:function(){
myStore.getProxy().url = 'app/kontaktGrid2.json';
myStore.load();
grid.getView().refresh();
}}]
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: [
'name', 'email', 'phone'
]
});
var myStore =Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url : '',
reader:{
type:'json'
}
},
autoLoad:false
});
--Grid in Border Layout Center--
items:[{
xtype:"grid",
id:"kontaktGrid",
store: myStore,
border: false,
columns: [
{header: 'name',sortable : false, dataIndex: 'name'},
{header: 'email',sortable : false, dataIndex: 'email'},
{header: 'phone',sortable : false, dataIndex: 'phone'}
]
}]
This isn't working, only loading from server no dispalying data.
first, why did you load your json like that ? even it's working... this is the simple way :
text: 'Load1',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid1.json'
});
//myStore.getProxy().url = 'app/kontaktGrid1.json';
//myStore.load();
//grid.getView().refresh();
}
from docs, the definition of method load is
Loads data into the Store via the configured proxy..
second, your probem is only loading from server no dispalying data..
it's mean no error with json, store, and the model...
i think your problem is in the grid panel..
try show us how did you create the grid
make sure your grid column is refer(dataIndex) to your json
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text : 'name', sortable : false, dataIndex:"name"},
{text : 'email', sortable : false, dataIndex:"email"},
{text : 'phone', sortable : false, dataIndex:"phone"}
],
//.....
I have a JSON store:
var jsonstore = new Ext.data.ArrayStore({
fields: ['bla', 'blubb'],
data: [ ['bla', 'blubb'],
['blabla', 'blublu'],
['blass', 'hallo'],
['bam', 'guckt'] ]
});
and an extjs listview:
....
,{
xtype: 'listview',
name: 'abrufliste',
store: jsonstore,
id:"ladebereich",
multiSelect: false,
emptyText: 'nix da',
reserveScrollOffset: true,
columns: [ { header: 'Name',
width: .5,
dataIndex: 'NAME' }
....
and a click event:
Ext.ComponentMgr.get('ladebereich').on("click",function (sthis,index,node,e ){
alert("node: "+node.childNodes[0].childNodes[0].innerHTML);});
I want to get the clicked node's value.
I do get the value with
node.childNodes[0].childNodes[0].innerHTML
, however thats a crappy solution.
I want to get the clicked Element from my jsonstore,
any suggestions?
Another way is to add a listener to your listview to respond to any click events on the listview:
,{
xtype: 'listview',
name: 'abrufliste',
store: jsonstore,
id:"ladebereich",
multiSelect: false,
emptyText: 'nix da',
reserveScrollOffset: true,
listeners:
{
click: function(object, selectedIndex, node, event) {
// Get the name corresponding to the selected row.
var rowName = object.store.getAt(selectedIndex).get("Name");
}
},
columns: [ { header: 'Name',
width: .5,
dataIndex: 'NAME' }
it works with
Ext.ComponentMgr.get('ladebereich').on("click",function (sthis,index,node,e ){
var rec = jsonstore.getAt(index);
alert(rec.get("NAME"));
});