I tried to code EXTJS Grid using jsp. I modify the EXTJS example to get data from jsp page, but the data is not loaded.
Could you please help ?
grid js
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './js/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'data.jsp'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'threadid'
},
[
{name: 'title'},
{name: 'postid'},
{name: 'username'},
{name: 'lastpost'},
{name: 'excerpt'},
{name: 'userid'},
{name: 'dateline'},
{name: 'forumtitle'},
{name: 'forumid'},
{name: 'replycount'},
{name: 'lastposter'}
]),
baseParams: {
abc: 123
}
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
disableSelection: true,
loadMask: true,
// grid columns
columns:[{
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
sortable: false
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 150,
sortable: true
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
renderTo: 'topic-grid'
});
// trigger the data store load
store.loadPage(1);
});
</script>
jsp, data.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%
String data = "{\"totalCount\":\"1\",\"topics\":[{\"title\":\"XTemplate with in EditorGridPanel\",\"threadid\":\"133690\",\"username\":\"kpr#emco\",\"userid\":\"272497\",\"dateline\":\"1305604761\",\"postid\":\"602876\",\"forumtitle\":\"Ext 3.x: Help\",\"forumid\":\"40\",\"replycount\":\"2\",\"lastpost\":\"1305857807\",\"lastposter\":\"kpr#emco\",\"excerpt\":\"Hi\"}]}";
out.println(data);
System.out.println(data);
%>
None of your json column titles seem to match up with your ExtJS model.
The model needs to have the same column names as the data so that it knows where to put the data.
UPDATE
I'm confounded by your store data model implementation. I've never seen it implemented as the second argument for a new JsonReader.
But because you are using baseParam config I assume that you are using ExtJS 3.x not 4.x and I am admittedly not very familiar with 3.x so that may be a legal data model implementation.
In ExtJS 4.x the data model is usually implemented as a separate object than the store, something like this:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'title', type: 'string'},
{name: 'postid', type: 'int'},
{name: 'username', type: 'string'},
{name: 'lastpost', type: 'int'},
{name: 'excerpt', type: 'string'},
{name: 'userid', type: 'int'},
{name: 'dateline', type: 'int'},
{name: 'forumtitle', type: 'string'},
{name: 'forumid', type: 'int'},
{name: 'replycount', type: 'int'},
{name: 'lastposter', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'data.jsp',
reader: {
type: 'json',
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid'
}
}
});
I am not sure how this works in other versions of ExtJS if you are actually using 3.x, you will have to check your own ExtJS documentation. Also as suggested, you should be seeing an error message in your browser's error console. That will tell you exactly what the problem is.
Related
I'm currently migrating Extjs 4.2 to Extjs 6.2 and I'm simply trying to save a record. My code works just fine in ExtJs 4.2, but it fails in ExtJs 6.2 when trying to create. The problem is that the value of data changes in Extjs 6.2 after passing it to Model. Please see attached picture.
PICTURE 1:
Take a look at value of data BEFORE hitting the Model (Line 371)
PICTURE 2:
Value of data AFTER hitting the Model (Line 371)
You noticed that the value of data changes. Well this doesn't happen in ExtJs 4.2 and I want it to behave the same way in ExtJs 6.2.
Here's my code:
folder.js
if (folderNameIsValid(s))
{
// create the new folder
var data = {
typeId : me.typeId,
name : s,
loaded : true
};
if (me.clientId) data.clientId = me.clientId;
if (me.userId) data.userId = me.userId;
if (me.recordId) data.recordId = me.recordId;
if (me.empId) data.employeeId = me.empId;
if (pn !== rn) data.parentFolderId = pn.get('folderId');
var node = Ext.create('App.model.FolderTreeNodeDisplay', data);
node.save({
callback : function()
{
pn.appendChild(node);
pn.expand();
sm.select(node);
}
});
}
Here's code for Model:
Ext.define('App.model.FolderTreeNodeDisplay',
{
extend : 'Ext.data.Model',
idProperty: 'folderId',
fields : [
{name: 'folderId', type: 'int', useNull: false},
{name: 'typeId', type: 'int', useNull: true},
{name: 'recordId', type: 'int', useNull: true},
{name: 'employeeId', type: 'int', useNull: true},
{name: 'userId', type: 'int', useNull: true},
{name: 'clientId', type: 'int', useNull: true},
{name: 'permanent', type: 'string', defaultValue: 'N'},
{name: 'fixed', type: 'string', defaultValue: 'N'},
{name: 'active', type: 'string', defaultValue: 'Y'},
{name: 'name', type: 'string', convert: Ext.htmlDecode},
{name: 'parentFolderId', type: 'int', useNull: true},
// domain fields
{name: 'createdBy', type: 'string', persist: false},
{name: 'creationDate', type: 'date', dateFormat: 'c', useNull: true, persist: false},
{name: 'lastUpdatedBy', type: 'string', persist: false},
{name: 'lastUpdatedDate', type: 'date', dateFormat: 'c', useNull: true, persist: false},
// node fields
{name: 'iconCls', type: 'string', persist: false},
{name: 'leaf', persist: false},
{name: 'expanded', persist: false},
{name: 'parentId', persist: false}
],
proxy: {
type: 'rest',
api: {
create : '/rs/rest/folder/create'
},
reader: {
rootProperty: 'data'
}
}
});
My question is:
What do I need to change/update in my Model so the value of data remains the same after hitting Line 371 and NOT pull all of the random data that you see in picture 2
Any ideas on what I'm missing or need to change in my Model? Thank you so much in advance!
You haven't specified a URL for the proxy. The default in the framework is to use the model name.
Why is the output not displayed in the browser?
I have all Eclipse settings, and I am using Chrome.
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="application/javascript" >
Ext.onReady(function(){
var store = new Ext.data.Store({ data: [ [ 1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1 ],
[3, "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 1, "Altered State Police", "14.95", 1 ] ],
reader: new Ext.data.ArrayReader({id:'id'}, [ 'id', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', 'price', 'available' ] });
var grid = new Ext.grid.GridPanel({ renderTo: document.body, frame:true, title: 'Movie Database', height:200, width:500, store: store,
columns: [ {header: "Title", dataIndex: 'title'},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Genre", dataIndex: 'genre'},
{header: "Tagline", dataIndex: 'tagline'} ] });
</script>
</head>
<body>
</body>
</html>
If I run your exact code, I get the error TypeError: me.model is undefined in the debugger console. What this error is hinting at is that you do not have a model, or fields, defined for your store (more on that later). So the first thing you'll want to do is use some sort of browser debugger (ctrl-shift-i for Firefox/Chrome on Windows).
Secondly, if you're using Ext JS 4, then you'll want to use an ArrayStore--newer versions of the framework automatically deduce how to organize the data in the store, so this step isn't necessary if you're using v5+. The reason we're using this special type of store is because of how your data is organized... into arrays.
The final thing you'll want to do is set up either a Model for your store, or the fields that your data makes up... you currently have these fields in the reader, but it doesn't make much sense to have them there. Also, a reader goes inside of a proxy, and you usually don't have to do much with the reader itself.
Here's a working example:
Ext.application({
name: 'Fiddle',
launch: function() {
var store = new Ext.data.ArrayStore({
data: [
[1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1],
[3, "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 1, "Altered State Police", "14.95", 1]
],
fields: [{
name: 'id',
type: 'int'
}, {
name: 'title',
type: 'string'
}, {
name: 'director',
type: 'string'
}, {
name: 'released',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'genre',
type: 'int'
}, {
name: 'tagline',
type: 'string'
}, {
name: 'price',
type: 'string'
}, {
name: 'available',
type: 'int'
}]
//reader: new Ext.data.ArrayReader({id:'id'}, [ 'id', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', 'price', 'available' ])
});
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame: true,
title: 'Movie Database',
height: 200,
width: 500,
store: store,
columns: [{
header: "Title",
dataIndex: 'title'
}, {
header: "Director",
dataIndex: 'director'
}, {
header: "Released",
dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
header: "Genre",
dataIndex: 'genre'
}, {
header: "Tagline",
dataIndex: 'tagline'
}]
});
}
});
I'm only asking this because I've seemingly tried everything I can find, and it has to be easier than I'm making it.
I'm working with Sencha Touch (EXTJS knowledge is still helpful). When I console.log the store, it shows no items/data. I am getting a good response from the store's load call, but it's not making it into the store. I appreciate the help.
Model:
Ext.define('NQT.model.NENEventsModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'regionId', type: 'int', mapping: 'regionId'},
{name: 'regionName', type: 'string', mapping: 'regionName'},
{name: 'state', type: 'string', mapping: 'state'},
{name: 'switchId', type: 'int', mapping: 'switchId'},
{name: 'switchName', type: 'string', mapping: 'switchName'}
]
});
Store:
Ext.define('NQT.store.NENEventsStore',
{
extend: 'Ext.data.Store',
storeId: 'NENEventsStore',
config: {
model: 'NQT.model.NENEventsModel',
proxy: {
type: 'jsonp',
url: 'http://this_is_not_the_url.com:8080/rest/json',
method: 'GET',
pageParam: false,
startParam: false,
limitParam: false,
noCache: false,
reader: {
type: 'json',
rootProperty: ''
}
}
}
});
Part of view:
var eventsStore = Ext.create('NQT.store.NENEventsStore');
{
xtype: 'grid',
titleBar: false,
store: eventsStore,
columns: [
{text: 'regionId', dataIndex: 'regionId', width: 150},
{text: 'regionName', dataIndex: 'regionName', width: 150},
{text: 'state', dataIndex: 'state', width: 150},
{text: 'switchId', dataIndex: 'switchId', width: 150},
{text: 'switchName', dataIndex: 'switchName', width: 150}
]
},
{
xtype: 'button',
docked: 'bottom',
text: 'Reload Grid',
handler: function () {
console.log(eventsStore);
eventsStore.load();
}
}
JSON Sample:
[{"regionId":1,"regionName":"NY Metro","state":"NJ","switchId":167,"switchName":"Jersey City 1"},
{"regionId":1,"regionName":"NY Metro","state":"NY","switchId":2029,"switchName":"Farmingdale 1"},
{"regionId":4,"regionName":"New England","state":"CT","switchId":203,"switchName":"Wallingford 1"}]
As Evan Trimboli pointed out, my response was not as good as I thought it was; it was missing the Ext.data.JsonP.callback that should have preceded it. I created a web service for the URL so I could make the call properly without being a security risk.
Part of the service:
<?php
$app->group('/secret', function () use ($app) {
$app->get('/getData', function () use ($app) {
$callback = $app->request()->get('callback');
$events = file_get_contents("http://example_url.com:8080/this/is/the/path");
if(!empty($callback)){
$app->contentType('application/javascript');
echo sprintf("%s(%s)", $callback, $events);
} else {
echo $events;
}
});
});
?>
I'm a newbee in ExtJS and I have a problem with loading data to grid from JSON file.
Here's my code:
Model:
Ext.define('EXP.model.EXT.EXTModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'name'},
{name: 'email'}
]
});
Store:
Ext.define('EXP.store.EXT.EXTStore', {
extend: 'Ext.data.Store',
storeId:'EXTStore',
model: 'EXP.model.EXT.EXTModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});
View:
Ext.define('EXP.view.EXT.ComponentsField' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.componentsfield',
title: 'All Users',
store: 'EXT.EXTStore',
initComponent: function() {
this.columns = [
{header: 'Id', dataIndex: 'id', flex: 1},
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
JSON File:
{
"users": [
{"id": 1, "name": "Ed", "email": "ed#sencha.com"},
{"id": 2, "name": "Tommy", "email": "tommy#sencha.com"}
]
}
Do I need something more to display this data? I've red a couple of topics about my issue, but none of them was helpful. :(
I haven't any errors in the console. Grid is displaying, but it have no data in it.
I am trying to make a proof of concept ExtJS datagrid en route to moving to a server-based store. At present my code is as follows:
var arrayData = [
['', 'Held', '', '', 'abc', '', '100.00', '0.00', 'Internal Approval'],
/* 11 similar rows deleted for sanitization's sake */
/* I've tried with and without quotes around the monetary amounts. */
];
var nameRecord = Ext.data.Record.create([
{name: 'approved_date', mapping: 1},
{name: 'approval_status', mapping: 2},
{name: 'approval_id', mapping: 3},
{name: 'reference_id', mapping: 4},
{name: 'manufacturer_distributor_name', mapping: 5},
{name: 'shipping_authorization_number', mapping: 6},
{name: 'purchase_order_number', mapping: 7},
{name: 'original_amount', mapping: 8},
{name: 'open_amount', mapping: 9},
{name: 'requestor', mapping: 10}
]);
var arrayReader = new Ext.data.ArrayReader({}, nameRecord);
var memoryProxy = new Ext.data.MemoryProxy(arrayData);
var store = new Ext.data.Store({
reader: arrayReader,
proxy: memoryProxy
});
var columnModel = new Ext.grid.ColumnModel([
{
header: 'Approved Date',
sortable: true,
dataIndex: 'approved_date'
},
{
header: 'Approval Status',
sortable: true,
dataIndex: 'approval_status'
},
{
header: 'Approval ID',
sortable: true,
dataIndex: 'approval_id'
},
{
header: 'Reference ID',
sortable: true,
dataIndex: 'reference_id'
},
{
header: 'Manufacturer / Distributor Name',
sortable: true,
dataIndex: 'manufacturer_distributor_name'
},
{
header: 'Shipping Authorization Number',
sortable: true,
dataIndex: 'shipping_authorization_number'
},
{
header: 'Purchase Order Number',
sortable: true,
dataIndex: 'purchase_order_number'
},
{
header: 'Original Amount',
sortable: true,
dataIndex: 'original_amount'
},
{
header: 'Open Amount',
sortable: true,
dataIndex: 'open_amount',
},
{
header: 'Requestor',
sortable: true,
dataIndex: 'requestor'
}]);
var gridView = new Ext.grid.GridView();
var selectionModel = new Ext.grid.RowSelectionModel({
singleSelect: true
});
var grid = new Ext.grid.GridPanel({
title: 'Approvals',
renderTo: Ext.getBody(),
height: 500,
width: 700,
store: store,
view: gridView,
colModel: columnModel,
selModel: selectionModel
});
This is intended to closely follow the "Hello world"-level grid example on pp. 159-161 in Jesus Garcia's ExtJS in Action. As it stands, my code populates column names with a blank white area; that is, it displays the column names and a blank white area on FF/Chrome, and doesn't seem to display anything on IE6-8. In Chrome, the JavaScript console does not show any error messages, or other logged information.
Any suggestions about what is wrong with my code or how I can fix it?
IE-6-8 may not be liking the dangling comma at dataIndex: 'open_amount', (and any other syntax errors that FF/Chrome would forgive)
Can you post a screenshot of what you are seeing in FF/Chrome?
Your code can be simplified quite a bit. e.g. Simply use ArrayStore instead of reader,proxy,record,store combination
EDIT-
var grid = new Ext.grid.GridPanel({
title: 'Approvals',
renderTo: Ext.getBody(),
height: 500,
width: 700,
store: new Ext.data.ArrayStore({
idIndex:0,
fields: ['approved_date', 'approval_status',{name:'approval_id', type:'int'}] //specify other fields here
}),
cm:new Ext.grid.ColumnModel({
defaults:{
sortable:true,
width:200
},
columns:[{
header:'Approval Date',
dataIndex:'approved_date'
},{
header:'Approval Status',
dataIndex:'approval_status'
},{
header:'Approval ID',
dataIndex:'approval_id'
}]
})
});
var myData=[
['01/01/11','Held', 1],
['02/02/11','Approved', 2]
]
grid.getStore().loadData(myData);