Grid doesn't show any data - javascript

var store = new Ext.data.JsonStore({
root: 'details',
fields: ['a1','a2','a3','a4','a5','a6','a7'],
pruneModifiedRecords:true,
autoload: false
});
var gridDetail = new Ext.grid.Panel({
title: 'Details',
store: store,
width : '100%',
header: {
titleAlign: 'center'
},
columns: [
{ text: 'col1', dataIndex: 'a1' },
{ text: 'col2', dataIndex: 'a2'},
{ text: 'col3', dataIndex: 'a3' },
{ text: 'col4', dataIndex: 'a4' },
{ text: 'col5', dataIndex: 'a5' },
{ text: 'col6', dataIndex: 'a6' },
{ text: 'col7', dataIndex: 'a7' },
],
});
These are my configures about store and grid. I load the data via an ajax request;
var getInfo= function (s1,s2,s3){
gridDetail.mask('Loading');
Ext.Ajax.request({
url : '../project/getInfo.ajax',
params :{
s1: s1,
s2: s2,
s3: s3
},
callback: function(options, success, response){
if(success){
var resp = Ext.decode(response.responseText);
gridDetail.unmask();
//some other codes not related grid
store.loadData(resp,false);
} else {
gridDetail.unmask();
Alert(resp.msj);
}
}
});
and my return JSON is ;
{"success":true,"first":[{...},],"details":[{"a1":"d1","a2":"d2",..."a7":"d7"}]}
But after all this nothing shown on grid, and no error returns. Everything is okay but nothing happen in grid. Mask shown and then unshown but no data shown on grid.
What is my problem, i can't see it? Can anybody help me?

Seems good for me. Maybe something with the data format.
Add a listeners to your store to check what kind of records the store get.
listeners:{
load: function( this, records, options ) {
console.log(records);
}
}

Related

How to refresh / reload Grid

hi this is my code i am trying to refresh grid panel on clicking refresh button in toolbar , but it wont work anymore or nothing happens can you please help me what is the proper syntax ?
var store = new Ext.data.JsonStore({
url: 'data-cloud.php',
fields: [{
name: 'userid'
}, {
name: 'record_name'
}, {
name: 'search_term',
type: 'string'
}]
});
var grid_array = new Array();
store.load({
params: {
start: 0,
limit: 5
}
});
store.on('load', function(store, records) {
for (var j = 0; j < records.length; j++) {
grid_array[j] = records[j].get('record_name');
}
});
// create the Grid
var datagrid = new Ext.grid.GridPanel({
store: store,
columns: [{
id: 'id',
header: 'Cloud Name',
width: 155,
renderer: record_name,
sortable: true,
dataIndex: 'record_name'
}, {
header: 'Search Term',
width: 150,
sortable: true,
dataIndex: 'search_term'
}],
stripeRows: true,
height: 250,
width: 500,
id: 'cloud_panel',
title: 'DB Grid',
id: 'detailPanel',
tbar: [{
text: 'Refresh',
iconCls: 'new-topic',
handler: function() {
Ext.getCmp('detailPanel').getView().refresh();
}
}
],
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
var grid = Ext.getCmp('cloud_panel');
...
tbar: [
handler: function() {
grid.load();
}
]
If you refresh the grid's view, the data will not be loaded again, it will just re-render the presentation.
To refresh the actual data, use the reload function on the grid's store:
Ext.getCmp('detailPanel').getStore().reload();
Btw, you're setting the id property twice in your grid's configuration, "cloud_panel" and "detailPanel", so you'll probably want to eliminate one of them.
try
var grid = Ext.getCmp('cloud_panel');
grid.getStore().load();
also you can pass params to store
grid.getStore().getProxy().extraParams = {name:'name1', lname: 'lname'}
and after
grid.getStore().load(function(){
alert('store was loaded');
});

ExtJS error: Unable to Get value of the property 'dataSource'

I have based this off of the Sencha example; however, instead of using a url to fill the store, I have tried to create an empty one and add an item to it. When I load the page, the item is successfully shown in the panel; however, I receive an error saying
Line: 18
Error: Unable to get value of the property 'dataSource': object is null or undefined
My model looks like this:
Ext.define('Ext.model.Test', {
extend: 'Ext.data.Model',
fields: [
{ name: 'testName', type: 'string' },
{ name: 'hasTestPassed', type: 'bool' },
{ name: 'hasFix', type: 'bool' }
]
});
My code looks like this:
Ext.define('Ext.app.ServerChecker', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.model.Test'
],
alias: 'widget.ServerChecker',
xtype: 'cell-editing',
initComponent: function () {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
width: this.width,
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: Ext.model.Test,
proxy: {
type: 'memory',
reader: {
type: 'json',
record: 'test'
}
},
sorters: [{
property: 'common',
direction: 'ASC'
}]
}),
columns: [{
header: 'Test Name',
dataIndex: 'testName',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Result',
dataIndex: 'hasTestPassed',
width: '75px',
align: 'right',
editor: {
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'resources/images/icons/fam/delete.gif',
tooltip: 'Delete Plant',
scope: this,
handler: this.onRemoveClick
}]
}],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Run Tests',
scope: this,
handler: this.onRunTestsClick
}]
});
this.callParent();
this.on('afterlayout', this.loadStore, this, {
delay: 1,
single: true
})
},
loadStore: function () {
this.getStore().load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: this.onStoreLoad
});
},
onStoreLoad: function () {
var rec = new Ext.model.Test({
testName: 'Yipiee',
hasTestPassed: true,
hasFix: true
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
},
onRemoveClick: function (grid, rowIndex) {
this.getStore().removeAt(rowIndex);
}
})
Any help would be greatly appreciated. I realize that I am loading data in kind of a strange spot; however, this is for testing purposes and it would appear that it should work just fine.
Thanks in advance.
You are defining the store with a memory proxy, which is expecting the store to have a data property when loading. So, when you do this.getStore().load(..) you get an error. You actually add data to the store in the load callback, usually the callback is used to do something after the store was actually loaded.
I don't really understand what you are trying to do, but if you just want to load a record directly to the store, without any processing, you don't need the proxy at all. Your loadStore function can look like this:
loadStore: function () {
var obj = {
testName: 'Yipiee',
hasTestPassed: true,
hasFix: true
};
this.getStore().add(obj);
}

Open a ExtJS Desktop Window on ExtJS grid item double click

I am new to ExtJS and I encountered a similar problem from Sencha forum which was left unsolved.
This is the link to the problem
Basically, What I want to do is open a desktop window module app displaying the data selected on the grid. I already created the same window displayed on the link. We have quite the same code so I think there's no sense on posting my code here. Any help will be appreciated. Thank you.
I don't think you are right about the code thing... But anyway, the code of this guy is a mess and mitchel already answered how it should be done. So forget about the code of the guy for a second, cause it is really simple to archive this.
Here's a working snipped how you can do this:
Ext.define('Ext.ux.DemoWin', {
extend: 'Ext.window.Window',
alias: 'widget.demowin',
width: 200,
height: 200,
title: 'demo',
initComponent: function() {
this.callParent(arguments);
},
loadRecord: function(rec) {
// simplified - just update the html. May be replaced with a dataview
this.update(rec.data.name + ' - ' + rec.data.email);
}
});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
// the registration should be done with the control() method of the responsible controller
itemclick: function(grid,record) {
var win = Ext.widget('demowin').show().loadRecord(record);
}
}
});
And here's a JSFiddle
Edit which applies to Ext.ux.desktop.Module
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
// ...
loadRecord: function(rec) {
this.update(rec.data.name + ' - ' + rec.data.email);
}
//....

Extjs loading local JSON Object in to grid

I am new to Ext JS and trying various options on Grid. I have created a grid and added it to panel(Ext.panel.Panel). The grid is getting displayed with empty data(I have not added proxy to it). On occurrence of some event I construct a JSON Object and trigger loadData on grid.
Following is my code snippet.
Ext.define('AM.view.grid.Details', {
extend: 'Ext.grid.Panel',
alias: 'widget.details',
title: 'Widget Data',
store: {
autolaod: true,
fields: [{
name: 'widgetid',
mapping: 'widget_id',
type: 'string'
}, {
name: 'widgetname',
mapping: 'widget_name',
type: 'string'
}, {
name: 'widgetnotes',
mapping: 'widget_notes',
type: 'String'
}],
reader: {
type: 'json'
}
},
width: 620,
height: 400,
forceFit: true,
columns: [{
header: 'id',
dataIndex: 'widgetid',
hidden: true
}, {
header: 'Name',
dataIndex: 'widgetname',
width: 150
}, {
header: 'Note',
dataIndex: 'widgetnotes',
width: 150
}],
renderTo: Ext.getBody()
});
I have a function which is a callback function of another widget. When an event occurs this function getTriggered.
function someFunction(grid) {
var jsonData = formGridData();
grid.store.loadData(jsonData);
}
Please assume that grid is created and I have function formGridData() which converts the formed String to JSON Object and returns.
So when I run the app, If the jsonData is of length 5 then 5 empty rows appear in the grid.
Following is the JSONData
[{
'widget_id': 'widget-1',
'widget_name': 'gridpanel',
'widget_notes': 'This is used to handle..'
}, {
'widget_id': 'widget-2',
'widget_name': 'combo',
'widget_note': 'This is used to handle..'
}, {
'widget_id': 'widget-3',
'widget_name': 'panel',
'widget_note': 'This is used to handle..'
}]
Is there anything wrong in what I am doing?
Thanks,
Phani
Your dataIndexes on the grid are wrong.
columns: [{
header: 'id',
dataIndex: 'widget_id', //was widgetid
hidden: true
}, {
header: 'Name',
dataIndex: 'widget_name', //was widgetname
width: 150
}, {
header: 'Note',
dataIndex: 'widget_notes', //was widgetnotes
width: 150
}]
What is happening is it is seeing the right amount of rows, but since the json you have as an example is named widget_* and note widget*, it thinks they are something else, and thus can not show them in the grid as appropriate
Sorry i didn't noticed that
So it seems your dataIndex is invalid
http://jsfiddle.net/ssxenon01/WpZMU/8/

ExtJs 4 Grid Paging

I'm trying to make data grid with paging using ExtJs framework, but unfortunately my code doesn't work. Maybe some of you has already settled this such problem.
Json-reply from server is:
{
"totalCount":"2",
"companies":[
{
"id":"1",
"name":"Name1",
"region":"Reg1",
"address":"Addr1",
"dealCount":"3",
"dealAmount":"19250",
"latestDealDate":"2012-01-09"
},
{
"id":"2",
"name":"Name2",
"region":"Reg2",
"address":"Addr2",
"dealCount":"2",
"dealAmount":"12150",
"latestDealDate":"2012-01-08"
}
]
}
JavaScript code, which creates store, grid, e.t.c. is:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.layout.*'
]);
Ext.onReady(function(){
// Define data model
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
'name', 'region', 'address',
{
name: 'dealCount',
type: 'int'
},
{
name: 'dealAmount',
type: 'int'
},
{
name: 'latestDealDate',
type: 'string'
}
],
idProperty: 'id'
});
// Create data store
var companies = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'Company',
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php'
}),
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
}),
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
// Create data grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
store: companies,
columns: [
{
text: 'Name',
dataIndex: 'name'
},
{
text: 'Region',
dataIndex: 'region'
},
{
text: 'Address',
dataIndex: 'address'
},
{
text: 'Deal Count',
dataIndex: 'dealCount'
},
{
text: 'Deal Amount',
dataIndex: 'dealAmount'
},
{
text: 'Latest Deal Date',
dataIndex: 'latestDealDate'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: companies,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
// Load first data page
companies.loadPage(1);
});
Firebug shows, that server responds with json-data, but grid remains empty. How can I fix it?
You should define reader inside proxy (at least that helped for me). Eg:
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php',
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
})
})
Working sample: http://jsfiddle.net/ycDzL/3/

Categories