extJS grid error, JSON data is not being displayed - javascript

I've configured my store as:
var store = new Ext.data.JsonStore({
url: 'gridData.php',
root: 'movies',
fields: ['film_id', 'title', 'release_year', 'rating']
});
and then defined my grid as:
var grid = new Ext.grid.GridPanel({
title:'Movies',
store: store,
columns: [
{ header: "ID", width: 30, dataIndex: 'film_id',sortable: true, hidden:true },
{ id: 'title-col', header: "Title", width: 180,dataIndex: 'title', sortable: true },
{ header: "Rating", width: 75, dataIndex: 'rating',sortable: true },
{ header: "Year", width: 75, dataIndex: 'release_year',sortable: true, align: 'center' }
],
autoExpandColumn: 'title-col',
renderTo: Ext.getBody(),
width: 600,
height: 300,
loadMask: true
});
then I load the store:
store.load();
I'm doing all this in Ext.onReady method. The data that I want to display is fetched from a php file which is of the following form:
{ "count":2, "movies":[{ "film_id":"1", "title":"ACADEMY DINOSAUR", "description":"An Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies", "release_year":"2006", "rating":"PG", "special_features":"Deleted Scenes,Behind the Scenes" }, { "film_id":"2", "title":"ACE GOLDFINGER", "description":"An Astounding Epistle of a Database Administrator And an Explorer who must Find a Car in Ancient China", "release_year":"2006", "rating":"G", "special_features":"Trailers,Deleted Scenes" } ] }
When the page is loaded, the grid keeps showing the loading mask and the data is never shown. Also, I get the error a is undefined. What am I missing?
Edit
I've found that there's some path issue when assigning URL to store but still can't resolve. My "gridData.php" file, JS file and the HTML file where the grid is being displayed, are in the same folder and I'm on "localhost/myapp". Please help!

Your store declares itself to have these fields:
id
title
release_year
rating
However, your JSON data's rows contain these fields:
film_id
title
description
release_year
rating
special_features
Your error is likely caused by the grid looking for an 'id' field that does not exist in the data.
One option is to change your store's field definition to:
['film_id', 'title', 'release_year', 'rating']
You would also need to make a corresponding alteration to the column definition:
{header: "ID", width: 30, dataIndex: 'film_id', sortable: true, hidden: true}
Another option is to add a mapping to the field's definition in the store:
[{name: 'id', mapping: 'film_id'}, 'title', 'release_year', 'rating']
Also, I suggest that while developing you include ExtJS into your page using 'ext-all-debug.js' instead of 'ext-all.js'. The error messages and backtraces in the console will usually be much more descriptive when running against the debug build.

It should be simple. The default value of idProperty is id and you haven't set another. So the store looks for a id field that does not exist.
that should work
var store = new Ext.data.JsonStore({
url: 'gridData.php',
root: 'movies',
idProperty: 'film_id',
fields: ['film_id', 'title', 'release_year', 'rating']
});

Assuming you're running ExtJS 4 define your store like this:
var store = new Ext.data.JsonStore({
proxy: {
url: 'gridData.php',
type: 'ajax',
reader: {
type: 'json',
root: 'movies'
}
},
fields: ['film_id', 'title', 'release_year', 'rating']
});

try with this store:
var store = new Ext.data.JsonStore({
url: 'gridData.php',
root: 'movies',
fields: [
{
name: 'id'
},
{
name: 'title'
},
{
name: 'release_year'
},
{
name: 'rating'
}
]
});

Related

jquery grid not filled with JSon data

Hi I am not able to get the data from JSON loaded on to grid,
HEre is my code for the grid wich displays the stock prices for the stock for a user :
$(document).ready(function () {
// $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
jQuery("#jqTable").jqGrid({
url:jqDataUrl,
datatype: "json",
mtype: "POST",
height: 250,
// Specify the column names
colNames: ["SYMBOL", "LAST", "CHANGE", "%CHANGE","HIGH/LOW"],
// Configure the columns
colModel: [
{ name: "SYMBOL", index: "SYMBOL", width: 200, align: "left" },
{ name: "LAST", index: "LAST", width: 200, align: "left" },
{ name: "CHANGE", index: "CHANGE", width: 200, align: "left" },
{ name: "%CHANGE", index: "%CHANGE", width: 200, align: "left"},
{ name: "HIGH/LOW", index: "HIGH/LOW", width: 200, align: "left"}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell",
id: "id",
},
multiselect: false,
// paging: true,
// rowNum:10,
// rowList:[10,20,30],
pager: $("#jqTablePager"),
loadonce:true,
caption: "WatchList"
}).navGrid('#jqTablePager',{edit:false,add:true,del:true});
}
});
But when i try and run the code i am not able to get the contents on to the table (but the grid loads with no content)
And My json is of the form :
{
total: "1",
page: "1",
records: "2",
rows :
[
{id:"1", cell:["cell11", "cell12", "cell13","cell13","cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23","cell13","cell13"]}
]
}
Please help me solve the problem
UPDATE:
I discovered that if you do not put repeatitems:true option into json reader, jqGrid assumes that you are using json dot notation. When you put it into jsonReader, your data is properly loaded. Here is working example: http://jsfiddle.net/a5e5F/3/
Old version:
I played a lot with your jqgrid code, and it seems that there is a bug in this version of jqGrid, which causes your jsonReader not to work. It reads data directly, ignoring root element and assuming that your data is array of json objects in format
{propertyName1:'PropertyValue1', propertyName2:'PropertyValue2', ...}
You can see what I mean on http://jsfiddle.net/a5e5F/2/
If you replace data:rows with data:data (your format of data), it does not load data. Maybe you should try to change your json data to use real json format (with properties named as columns)?
I have been trying a ton of stuff, changing column names to check for issue in #Barmar's coment, which I also thought it is the cause.

Column layout in EXTJS

I am new to ExtJs. I need to create an entry form in 2 columns using column layout.
My code is as follows:
Ext.onReady(function(){
var patientForm = new Ext.FormPanel({
renderTo: "patientCreation",
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [
{
layout:'column',
items:[
{ // column #1
columnWidth: .33,
layout: 'form',
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
}
] // close items for first column
}]
}]
});
var win = new Ext.Window({
layout:'form',
closable: false,
resizable: false,
plain: true,
border: false,
items: [patientForm]
});
win.show();
});
But when I run the code, I got h is undefined error. How to design a form in column layout? Is there any procedure, steps or links which give a clear idea?
I have run the same code with ExtJs 3.2.2 and got a similar error. But when I removed renderTo: "patientCreation"
code worked:
That part is not necessary 'cause you are placing the form in a the window.
I do not know anything about ExtJS 3. If you are using ExtJS 4, then you have specified layout config at wrong place. You have specified it inside items config, it should not be inside items config.
Layout can be specified as follows in ExtJS 4:
Ext.define('your_domain_name.viewName', {
extend : 'Ext.panel.Panel',
alias : 'widget.any_name_you_want',
layout : 'column',
initComponent : function() {
this.items = [
// all items inside form/panel will go here
];
this.callParent(arguments);
}
});
You can get sample code about all the panels here
try applying renderTo config to window instead of form
check example

Getting Model from GridPanel in ExtJS

I have a gridpanel that allows inline editing of a column. This column uses a combobox as the editor, and neither the "change" event nor the "select" event give me something usable to backtrace the edited value to get the changed row from the gridpanel.
I believe Ext floats the editor's combobox so therefore I can't do something simple like
combo.up()
To return to the grid.
Here is the grid panel from the view:
{
xtype: 'gridpanel',
title: 'Important Projects',
id: 'importantProjectsGrid',
dockedItems: [],
flex: 1,
columns: [
{ header: 'Quote Name', dataIndex: 'QuoteName', flex: 4 },
{ header: 'Quote Status', dataIndex: 'QuoteStatusID', flex: 6, editor: {
xtype: 'combobox',
editable: false,
action: 'QuoteStatus',
selectOnTab: true,
store: 'statuses',
queryMode: 'local',
displayField: 'Description',
valueField: 'Description'
} }
],
store: 'myimpprojects',
selModel: {
selType: 'cellmodel'
},
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
}
Here is the controller code pertaining to this:
init: function () {
this.control({
'[action=QuoteStatus]': {
change: function (combo, new_value, old_value, opts) {
// I need to go back up from this combobox
// to get the row that this value was edited in
// to grab an ID value from that row's data
// in order to make an ajax request
}
}
});
},
Thanks for any help!
You can monitor store's update event.
init: function () {
this.getMyimpprojectsStore().on('update', function(store, record) {
// do something with record
});
// ...
},
Try putting the listener on the CellEditing plugin. There are events for beforeedit, edit, and validateedit that receive an object containing references to the grid, the record, field, row and column indexes, and more. You should be able to check for the combobox in the event handler and handle your information from there.
Quick link to the doc page: Ext.grid.plugin.CellEditing
I'm convinced that the update plugin will handle the update automatically, through the api of the underlying store and post the data automatically to the server if the proxy as autoSync to true.
Example of the configured proxy:
Ext.define('MyApp.store.YourStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.YourGridModel',
autoSync: true, //Commits the changes realtime to the server
proxy: {
type: 'ajax',
batchActions : true, //Commits the changes everytime a value is changed if true o otherwise store the changes and batch update them in 1 single post
api: {
read: 'path/to/select',
create: 'path/to/create',
update: 'path/to/update',
destroy: 'path/to/delete'
},
reader: {
type: 'json',
root: 'results',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {
write: function(proxy, operation){
var response = Ext.JSON.decode(operation.response.responseText);
if(response.success == true)
{
//TODO: Proxy - Messageboxes might be a little anoying we might instead use the status bar in teh grid or something so show status of the operation
Ext.MessageBox.show({
title: this.xFileLibraryTitle,
msg: response.message,
icon: (response.success == true)? Ext.MessageBox.INFO : Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
I would look specially for the two configs: "autoSync" and "batchActions"
Hope this helps you further with your issue!

ExtJS ComboBox not displaying elements

I am having trouble getting a ComboBox in ExtJS to display the dropdown items. I originally was using an XmlStore to load the data dynamically, but to make sure that wasn't the problem, I took an existing ComboBox that uses a simple ArrayStore (and currently works elsewhere in my application) to see if it would work, still with no luck.
When using Chrome's developer tools, when I click on the ComboBox element, I get ext-all-debug.js:41166 - Uncaught TypeError: Cannot call method 'getStyle' of undefined and nothing shows up for a dropdown.
Here is my code:
EventForm = Ext.extend(Ext.form.FormPanel, {
constructor: function(config) {
config = Ext.apply({
items: [
{
layout: 'column',
xtype: 'container',
items: [
{
layout: 'form',
xtype: 'container',
columnWidth: 0.5,
items: [
{
fieldLabel: 'My Combo Box'
name: 'mycombobox',
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: ['size'],
data: [
['50'],
['100'],
['150'],
['200']
]
}),
displayField: 'size',
valueField: 'size',
forceSelection: true,
editable: false,
triggerAction: 'all',
mode: 'local',
listWidth: 60,
width: 60
}
]
}, {
// another column here similar to above
}
]
}
]
}, config);
EventForm.superclass.constructor(config);
}
});
You are not calling the constructor of EventForm's superclass correctly. Change the last line of your constructor function to read:
EventForm.superclass.constructor.call(this, config);
Your data array must contain a list of objects, and the keys you provided by fields must be the keys your data refers to in those objects. The correct syntax for your data array could be:
data: [
{'size':'50'},
{'size':'100'},
{'size':'150'},
{'size':'200'}
]
(could be, because I have no chance right now to verify)

JQGrid subgrid Url: Is it possible to change the value of ?Id=id

I'm trying to implement a JqGrid with a subgrid as so...
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/OrganizationalUnit/FindAll/',
datatype: 'json',
mtype: 'GET',
colNames: ['Name', 'Actions'],
colModel: [
{ name: 'Name', index: 'Name', width: 500, align: 'left' },
{ name:'act', index:'act', width:250,sortable:false}
],
subGrid : true,
subGridUrl: '/OrganizationalUnit/Organizations/',
subGridModel:
[
{ name: 'Name', index: 'Name', width: 300, align: 'left' },
{ name: 'OrganizationID', index: 'OrganizationID', width: 300, align: 'left' }
]
...
So the way JqGrid works is that when the controller method for OrganizationalUnitController.Organizations gets called, a query string of "?id=4" gets appended to the URL. M problem is that the "4" is just an arbitrary row number that JqGrid has created for the grid and doesn't provide me with an identifier for the OrganizationalUnit the I trying to retreive a subgrid for. So what I'm wondering is it there is any way that I can assign the 'name' value to the id argument?
Has anyone figured this out before?
Ok...I have figured it out.
If I add the params: ['name'] arguement to the subGridModel definition then I can get the value of the OrganizationalUnit name through the HttpContext.Request.Params collection.
Where exactely did you put the params parameter?
I am surprised that your defintion of the subGridModel actually works.
Since the manual recommends a different structure:
subGridModel : [
{
name : ['No', 'Item', 'Qty', 'Unit', 'Line Total'],
width : [55, 200, 80, 80, 80],
align : ['left','left','right','right','right'],
params: ['invdate']
}
]
wiki:subgrid - jqGrid Wiki

Categories