I have a ExtJS (4.0) grid and it works fine. Now I want it to advance it a bit by adding filters to it. I want users to be able to filter items by the status.
I have created the following store:
var status_store = Ext.create('Ext.data.Store', {
model: 'Statuses',
proxy: {
type: 'ajax',
url: '/json/statuses/',
reader: 'json'
}
});
and I can see it loads, /json/statuses/ will return the following json object:
[
{
"name": "OK",
"isActive": true
},
{
"name": "Outdated",
"isActive": true
},
{
"name": "New",
"isActive": true
}
]
Now I define the filters:
var filters = {
ftype: 'filters',
encode: encode,
local: local,
filters: [{
type: 'list',
dataIndex: 'name',
store: 'status_store',
labelField: 'name'
}]
};
and add the filter to my column definition:
{text: 'Status', width: 120, dataIndex: 'status', sortable: true, filterable: true, filter: {type: 'list'}},
What happens is I get the following error when the grid loads:
Uncaught TypeError: Object json has no method 'read' (ext-all-debug.js:25702)
and when I click on the column header for the menu:
Uncaught TypeError: Object status_store has no method 'on' (ListMenu.js:69)
How can I fix this or am I doing something conceptually wrong?
Here is the full quote of my code just in case: http://pastebin.com/SNn6gFJz
Thanks for Diagnosing the problem. The 4.1 fix is this modify ListMenu.js
in the else part of the constructor
replace
me.store.on('load', me.onLoad, me);
with
// add a listener to the store object
var storeObject = Ext.StoreMgr.lookup(me.store);
storeObject.on('load', me.onLoad, me);
me.store = storeObject;
filters: [{
type: 'list',
dataIndex: 'name',
store: 'status_store',
labelField: 'name' ,
options:[a,b]
}]
You also have to give the options in list filters.
I was having a similar problem. I followed the #jd comment on the other answer here but the options menu just said "loading...". I resolved it with a bit of a hack here.
Related
I am trying to create a kendo grid with excel export. My data is shown precisely as I want it and the grid works fine. However, the saveAsExcel function triggers the excelExport event, but no file is created. Same problem with the pdf export.
Here is my grid options:
grid = $("#grid").kendoGrid({
toolbar:["excel","pdf"],
height: 500,
scrollable: true,
groupable: true,
sortable: true,
filterable: false,
excel: {
allPages:true,
filterable:true
},
excelExport: function(e) {
console.log('Firing Export');
console.log(e.workbook);
console.log(e.data);
},
pdfExport: function(e){
console.log('PDF export');
},
columns: [
{ field: "date", title: "Time", template: "#= kendo.toString(kendo.parseDate(date), 'MM/dd/yyyy') #", width: '120px'},
{ field: "customer", title: "Customer" },
{ field: "amount", title: "Total", format: "{0:c}", width: '70px', aggregates: ["sum"]},
{ field: "paid_with", title: "Payment", width: '130px'},
{ field: "source", title: "Source" },
{ field: "sale_location", title: "Sale Location" }
]
}).data("kendoGrid");
This ajax is called whenever the search parameters for the data is changed. Where I refresh the datasource.
$.ajax({
'url':'/POS/ajax/loadTransactionsDetailsForDay.php',
'data':{
filters
},
'type':'GET',
'dataType':'json',
'success':function(response) {
var dataSource = new kendo.data.DataSource({
data: response.data.invoices,
pageSize: 100000,
schema: {
model: {
fields: {
date: {type: "string"},
customer: { type: "string" },
amount: { type: "number" },
paid_with: {type: "string"},
source: {type:"string"},
sale_location: {type:"string" }
}
}
}
});
grid.setDataSource(dataSource);
grid.refresh();
}
});
The output from my console log is.
Firing Export.
A worksheet object.
Object {sheets: Array[1]}sheets: Array[1]0: Objectlength: 1__proto__: Array[0]__proto__: Object
and and array with these objects for every row in the grid:
0: o
_events: Object
_handlers: Object
amount: 40.45
customer: "customer 1"
date: "2015-11-25T00:00:00-08:00"
dirty: false
employee: 23
paid_with: "Check"
parent: ()
sale_location: "Main"
source: "POS"
uid: "70b2ba9c-15f7-4ac3-bea5-f1f2e3c800d3"
I have the latest version of kendo, I am loading jszip. I am running it on the latest version of chrome.
I have tried all kinds of variations of this code I can think of, including removing my schema, initializing the kendo anew every time in the callback.
Anyone got any idea why this would not work?
Every example on this I can find make it look super simple, just create the grid and call export... So I have to have overlooked something.
I am grateful for any ideas about this.
Thanks.
It could be because the filename is missing.
Here the part with the filename added:
excel: {
allPages:true,
filterable:true,
fileName: "Kendo UI Grid Export.xlsx"
},
You can take a look here : Grid Excel Export
And here for the pdf: Grid Pdf Export
I have some following suggestion.
Can you add kendo deflate pako script file into your code and try.
Then remove the pdf export event and just try to export a pdf with toolbar default functionality..check whether its working or not.
try to add a data-source ajax call with in a grid option using kendo-transport technique with read method. http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport
Grid reads data from a javascript variable.
$("#grid").kendoGrid({
dataSource: {
type: "text",
data: jsvar,
schema: {
model: {
fields: {
id: {type: "string", editable: false},
name: {type: "string"}
}
}
},
pageSize: 20
},
pageable: {
input: true,
numeric: true
},
//toolbar: [{text: "Add"}],
columns: [
{command: [{text: "Edit", click: showDetailse}, {text: "View", click: viewoneitm}], title: " ", width: "170px"},
]
});
Then I change value of this variable jsvar with ajax and wait for ajax response and after that when I refresh grid with
jQuery("#grid").data("kendoGrid").dataSource.read();
jQuery("#grid").data("kendoGrid").refresh();
The grid is not repopulated with new data and old data stays in grid. Please tell me how to refresh grid data.
This worked fine and grid used to refresh perfectly untill I proviced static data, but after I used ajax and then 'refresh' it failed to update
If jsvar contains an array, the Kendo data source will create a model for each array item, so if you modify the original array, it won't change the DataSource. If you want to change the data, you should do it like this:
grid.dataSource.data(jsvar);
I tryed every answer i found (in Stackoverflow there are many) to solve my problem with the store of extjs, but still the data doesn't get displayed in the grid, even if the grid is correctly fisplayed. I'm confused so I'm writing the "store" I was able to build reading the answer on this site. I don't know why it's not loading the data into the grid. If you need more information to help please ask.
store: Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'StoreName',
fields: ['id','name'],
data : JsonObject,
model: 'ModelName',
proxy: {
type: 'memory',
reader: {
type: 'json',
record: 'JsonRoot'
}
}
})
The grid is loaded in a new window through an ajax call. The code of the new window is the following:
Ext.create('Ext.window.Window', {
title: 'GridTitle',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [
{
text : 'id',
flex : 1,
sortable : true,
dataIndex: 'id'
},
{
text : 'name',
width : 300,
sortable : true,
dataIndex: 'name'
}],
I do have the impression that the part with the columns is not read by ext.js, cause it doesn't index the name and id of the data i'm passing to it in the json.
The solution was so simple that I'm embarrassed to say it.
reader: {
type: 'json',
root: 'jsonRoot'
}
Instead of:
reader: {
type: 'json',
record: 'jsonRoot'
}
Simple question here, and I'm really surprised I cannot find an answer to it anywhere.
I have the following product model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'manufacturer', type: 'auto'}, // i.e. nested object literal
],
});
As can be seen, a product has a nested object inside it that contains details about a manufacturer (id, name, description, etc.).
I display products in an Ext.grid.Panel, like so:
Ext.create('Ext.grid.Panel', {
title: 'Products',
...
remoteSort: true,
columns: [
{text: 'Id', dataIndex: 'id', sortable: true},
{text: 'Name', dataIndex: 'name', sortable: true},
{text: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
}
},
],
});
As you can see, all three columns are configured to be sortable, and I am using remote sorting. This works for the first two columns, but the third column (manufacturer) is giving me trouble.
For instance, when a user sorts the grid by product name, Ext sends the following JSON to the server:
{ sort: [{ property: 'name', direction: 'ASC' }] }
This is fine, because the server knows to simply sort by each product's name property.
But when a user sorts the grid by manufacturer, the JSON sent is:
{ sort: [{ property: 'manufacturer', direction: 'ASC' }] }
Since the manufacturer is an object, this does not give the server any idea which property of the manufacturer it should sort by! Is it the manufacturer's id? Or is it the manufacturer's name? Or something else?
For my grid, since I render the manufacturer's name, I'd like to sort it by name. But I see no way to tell the server this. And I certainly don't want to make my server just sort by the manufacturer's name all the time.
If the JSON was sent like this it would be ideal:
{ sort: [{ property: 'manufacturer.name', direction: 'ASC' }] }
Sadly, Ext does not seem to do that (?). So, what's the solution?
Okay, I asked on the Sencha Forums and got a response. It appears you can override getSortParam() in the column config. Example:
columns: [
...
{
header: 'Manufacturer',
dataIndex: 'manufacturer',
sortable: true,
renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
},
getSortParam: function() {
return 'manufacturer.name';
},
}
...
]
This will send the ideal JSON I described in my OP. Now I just need to make my server parse this properly! :)
I'm trying to setup a native style app using sencha touch and phonegap. I'm trying to pull in data from an external XML feed into the model.
In my model (Event.js) I have this:
Ext.regModel('Event', {
fields: [
{name: 'title', type: 'string'}
]
});
In my store (eventsstore.js):
ToolbarDemo.eventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'ajax',
url: 'http://the-url-to-the-file.xml',
reader: {
type: 'xml',
root: 'events',
record: 'event'
}
},
autoLoad: true
});
And in the view (tried as a list):
ToolbarDemo.views.Eventscard = Ext.extend(Ext.List, {
title: "Events",
iconCls: "search",
store: ToolbarDemo.eventstore,
itemTpl: '{title}',
grouped: true,
indexBar: true,
cardSwitchAnimation: 'slide'
});
Ext.reg('eventscard', ToolbarDemo.views.Eventscard);
And tried as a panel:
ToolbarDemo.views.Eventscard = Ext.extend(Ext.Panel, {
title: "Events",
iconCls: "search",
dockedItems: [{
xtype: 'toolbar',
title: 'Events'
}],
layout: 'fit',
items: [{
xtype: 'list',
store: ToolbarDemo.eventstore,
itemTpl: '{title}',
grouped: true
}],
//This was an experiment, safe to leave out?
initComponent: function() {
//ToolbarDemo.eventstore.load();
ToolbarDemo.views.Eventscard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('eventscard', ToolbarDemo.views.Eventscard);
Now when I navigate to that card view, the loading overlay/spinner is displayed but that's as far as it goes, the list of items does not appear. Any ideas of what I'm doing wrong?
I am not that much familier with this, I have used like this to display a list.. try this
ToolbarDemo.eventstore.load();
var itemTpl = new Ext.XTemplate('<div id='title'>{title}</div>');
this.eventStoreList = new Ext.List({
id: 'eventStoreList',
store: ToolbarDemo.eventstore,
itemTpl: itemTpl,
height: 370,
indexBar: false
});
this.eventStoreListContainer = new Ext.Container( {
id : 'eventStoreListContainer',
items : [this.eventStoreList]
});
this.items = [this.eventStoreListContainer];
ToolbarDemo.views.Eventscard.superclass.initComponent.apply(this);
Well, I got it working!
I added ToolbarDemo.eventstore.read(); to the end of my store code, saved the XML file locally in the root 'www' folder then using the list method worked fine!
Does any body know why this (calling a remote XML) could be a problem?
EDIT: Turns out that it works fine in the browser like that, but not the iPhone simulator. So now I've set it back to the remote URL and added the URLs to the PhoneGap Whitelist and it works great :)