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'
}]
});
}
});
Related
I'm creating an app that simply shows customers information on a table, and if a user is being clicked then a pop-up window shows up showing user's information in a form (name and email). Within this PopUp I want to be able to update customers name and email and then when clicking on Update button I want the new information to show up on the table right away. As of right now I'm able to populate the table with customers' information as well as binding their information with the Pop-up window. But since I'm still kind of new to ExtJS I'm not really sure how to make the update to show right away on the table after clicking on update button. I would really appreciate any help!. Thanks a lot.
Here's my code that works just fine.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cat.net/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all-debug_1.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
]
});
Ext.onReady(function () {
// Ajax call
var usersFromAJAX = Ext.create('Ext.data.Store', {
storeId: 'user',
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json',
root: 'customers'
}
}
});
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: usersFromAJAX,
id: 'user',
title: 'Employees',
iconCls: 'x-fa fa-users',
listeners: {
itemclick: function (view, index, item, record) {
var window = Ext.create('Ext.window.Window', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
record: record,
viewModel: {
data: {
employee: index.data// employee's name
}
},
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'firstname',
fieldLabel: 'First Name',
bind: '{employee.name}' // biding employee's name
},
{
xtype: 'textfield',
name: 'firstname',
fieldLabel: 'Email',
bind: '{employee.email}' // biding employee's name
},
{
xtype: 'toolbar',
docked: 'bottom',
style:{
background: "#ACCCE8",
padding:'20px'
},
items: ['->', {
xtype: 'button',
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
console.log("Updating name...");
// Need to add something in here
this.up('window').close();
}
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
// this.up('formpanel').destroy();
this.up('window').close();
//this.up('window').destroy();
}
}]
}]
})
window.show();
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: Ext.getElementById("myTable")
});
});
</script>
</head>
<body>
<div id="myTable"></div>
</body>
</html>
Here's the JSON that populates my table.
{
"customers": [{
"id": 1,
"name": "Henry Watson",
"email": "henry#email.com"
},
{
"id": 2,
"name": "Lucy",
"email": "lucy#email.com"
},
{
"id": 3,
"name": "Mike Brow",
"email": "Mike#email.com"
},
{
"id": 4,
"name": "Mary Tempa",
"email": "mary#email.com"
},
{
"id": 5,
"name": "Beto Carlx",
"email": "beto#email.com"
}
]
}
Binding is for "live" data, so that means it will update the grid as you type. If you want to defer the changes until you hit a button, you can use methods on the form to do so:
Fiddle
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
Ext.onReady(function () {
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: {
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'customers'
}
}
},
listeners: {
itemclick: function (view, record) {
var f = Ext.create('Ext.form.Panel', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
buttons: [{
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
f.updateRecord(record);
f.close();
}
}, {
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
f.close();
}
}],
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'name',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}]
})
f.show();
f.loadRecord(record);
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: document.body
});
});
I want to get an infinite scrolling grid with extjs4 and a c# backend... i am setting the proxy api in my controller..
My Model:
Ext.define('appname.model.training.course.TrainingRequirementList', {
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [
{ name: 'ID', type: 'int', convert: null },
{ name: 'EmployeeName', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'StatusText', type: 'string' },
{ name: 'Status', type: 'int' },
{ name: 'Priority', type: 'string' },
{ name: 'Date', type: 'string' },
{ name: 'Cost', type: 'string' },
{ name: 'CanApprove', type: 'bool' },
{ name: 'CanRequest', type: 'bool' },
{ name: 'ConfirmStatus', type: 'string' },
{ name: 'PlanId', type: 'int'}
]
});
My Grid:
{
xtype: 'gridpanel',
flex: 1,
padding: '0 10 10 10',
minHeight: 200,
verticalScroller: {
xtype: 'paginggridscroller'
},
store: {
model: 'appname.model.training.course.TrainingRequirementList',
pageSize: 200,
autoLoad: true,
buffered: true,
remoteSort: true,
sorters: {
property: 'Date',
direction: 'DESC'
},
proxy: {
type: 'direct',
extraParams: {
total: 50000
},
reader: {
type: 'json',
root: 'ID',
totalProperty: 'TotalCount'
},
simpleSortMode: true
}
},
columns:
[{
text: Lang.Main.Employeee,
dataIndex: 'EmployeeName',
flex: 1,
filterable: true
},
{
text: Lang.Main.Course,
dataIndex: 'Description',
flex: 1,
filterable: true
},
{
text: Lang.Main.Status,
dataIndex: 'StatusText',
flex: 1,
filterable: true
},
{
text: Lang.Main.Priority,
dataIndex: 'Priority',
flex: 1
},
{
text: Lang.Main.Date,
dataIndex: 'Date',
flex: 1
},
{
text: Lang.Main.Cost,
dataIndex: 'Cost',
flex: 1,
filterable: true
},
{
text: Lang.Main.Actions,
flex: 1,
align: 'center',
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'Design/icons/cog_edit.png',
tooltip: Lang.Main.Open,
handler: function (grid, rowIndex, colIndex, item) {
this.onGridOpen(grid.getStore().getAt(rowIndex));
}
}]
}],
selModel: { mode: 'MULTI', selType: 'checkboxmodel' },
}
setting proxy in controoler:
view.grid.getStore().setProxy({
type: 'direct',
model: 'appname.model.training.course.TrainingRequirementList',
api: { read: SCT.Service.Training.Plan.GetFilteredRequirements },
extraParams: { total: 50000 },
reader: {
type: 'json',
root: 'ID',
totalProperty: 'TotalCount'
},
simpleSortMode: true
});
additional information about my view:
Ext.define('appname.view.training.course.TrainingRequirements',
{
extend: 'Ext.panel.Panel',
require: [ 'Ext.grid.PagingScroller'],
My grid is only loading the first 200 rows and the scrollbar is only as big as it would be for 200 rows.. :/ ...
the server response with entries like this:
{"ID":99,"PlanId":23,"firstname":"name","lastname":"name","Comment":"","Status":3,"ConfirmType":0,"Priority":"entry","DesiredDate":null,"StartDate":new Date(1354107600000),"ActualCost":180,"EstimatedCost":0,"row":201,"TotalCount":8568,"EmployeeName":"some, name","Description":"","StatusText":"state","Date":"28.11.2012","Cost":"EUR 180"}
what am i missing???
UPDATE
When i scroll down the script is loading the second page also.. still nothing more...
if you ned more information dont hesitate to ask
Does your server include the correct TotalCount value in the response?
Edit:
According to your reader's configuration, your server should answer with data formatted this way (of course your response should also be valid JSON, here Javascript is used for illustration):
{
// total property at the root level of response object
TotalCount: 8568,
// root for items data, configured as "ID" in your reader (you should probably
// change that to something like "records" or "data" to better express meaning)
ID: [
// individual fields data
{ID: 1, EmployeeName: 'Foo', ...},
{ID: 2, EmployeeName: 'Bar', ...},
...
]
// if you had, for example, a successProperty, it would go here too
,success: true
}
In your case, it seems that your TotalCount is mixed in every item data?
You're right about the implementation on the server side: it should simply be the total number of records, so something like COUNT(*) in the database.
One more thing: new Date(1354107600000) is not valid JSON. You should use a string and cast it to a date once the JSON has been decoded. For example, in your model, your could configure the field type to have Ext handle this for your: {name: 'Date', type: 'date', format: 'd.m.Y'}.
Model
Ext.define('XXX.User', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
'nick',
'mobile',
{ name: 'create_time', type: 'date', dateFormat: 'Y-m-d H:i:s' }
]
});
Ajax Response
{
"error": "",
"errno": 0,
"success": true,
"message": "Operation performed successfully",
"data": [{
"nick": "muquaddim1",
"name": "Muquaddim One",
"id": "141",
"mobile": "01710000***",
"email": "muquaddim+1#example.com",
"create_time": "2012-02-26 14:58:29"
}]
}
Store
var user_store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
autoLoad: true,
model: 'XXX.User',
sotreId: 'user-store',
proxy: {
type: 'ajax',
url : 'proxy/user'
},
sorters: [{
property: 'create_time',
direction: 'ASC'
}]
});
Grid
var user_grid = Ext.create('Ext.grid.Panel', {
title: 'List of Users',
store: user_store,
columns: [{
header: 'Nick',
dataIndex: 'nick',
editor: {
allowBlank: false
}
}, {
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
header: 'Mobile',
dataIndex: 'mobile',
width: 100,
editor: {
allowBlank: false
}
}, {
xtype: 'datecolumn',
header: 'Join Date',
dataIndex: 'create_time',
width: 90,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d H:i:s',
maxValue: Ext.Date.format(new Date(), 'Y-m-d H:i:s')
}
}]
});
Panel
var users = Ext.create('Ext.panel.Panel', {
title: 'Users',
id: 'user_panel',
items:[user_grid]
});
I am using ExtJS 4.0.7. I modified the code found in Example. Example code works fine. But it does not work. What am I missing here?
Since your data is nested in your response you need to configure a reader in your store's proxy. Try setting up your proxy like this:
proxy: {
type: 'ajax',
url : 'proxy/user'
reader: {
type: 'json',
root: 'data'
}
}
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.
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);