I am trying to run this following code in ext-4.2.1.883 but i am not getting any error
<html>
<head>
<title>Grid</title>
<link rel="stylesheet" type="text/css"
href="E:/Sikandar/extjs/ext-4.2.1.883/resources/css/ext-all.css" />
<script src="E:/Sikandar/extjs/ext-4.2.1.883/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// add your data store here
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
]
//...more rows of data removed for readability...//
],
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.create('Ext.grid.Panel',{
renderTo: document.body,
frame:true,
title: 'Movie Database',
height:300,
width:500,
store: store,
stateful: true,
collapsible: true,
multiSelect: true,
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>
<!-- Nothing in the body -->
</body>
</html>
but when i try to run it in browser nothing is shown. please help
You have a number of errors, try:
<!doctype html>
<html lang="en">
<head>
<title>Grid</title>
<link rel="stylesheet" type="text/css" href="E:/Sikandar/extjs/ext-4.2.1.883/resources/css/ext-all.css">
<script src="E:/Sikandar/extjs/ext-4.2.1.883/ext-all-debug.js"></script>
<script>
Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
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
]
]
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: document.body,
title: 'Movie Database',
layout:'fit',
store: store,
columns: [
{header: "Id", dataIndex: 'id', hidden:true},
{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>
So, what have I done to your code?
Changed the page to use an HTML5 setup - is this necessary? I just threw it in there, you'll have to decide
The type of store you're using is really an array store, so I changed the type
I changed your use of 'new' to the create method, which is advised in Ext JS
I removed some properties you had in place to simplify the code- by all means add these back in now you have a working example
Crucially, you should ensure the data you are supplying matches the data you are interpreting, the record model you are using, and the grid columns you're feeding. To simplify things I removed your reader (not particularly necessary to define given such a simple setup) so you only have the fields specified on the store mapped to whichever columns you want in the grid.
Related
I am having an error when I use an example from the Sencha Docs website. The example is a grid which you can find here
So I tried to copy all the code, but for some reason it does not work for me.
app.js
const test = Ext.define('KitchenSink.view.grid.CellEditing', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'KitchenSink.model.grid.Plant'
],
xtype: 'cell-editing',
title: 'Edit Plants',
frame: true,
initComponent: function() {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
width: 680,
height: 350,
plugins: [this.cellEditing],
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: KitchenSink.model.grid.Plant,
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'resources/data/grid/plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}]
}),
columns: [{
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
]
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: Ext.util.Format.dateRenderer('M d, Y'),
editor: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 90,
stopSelection: 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: 'Add Plant',
scope: this,
handler: this.onAddClick
}]
});
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(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
},
onAddClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availDate: Ext.Date.clearTime(new Date()),
indoor: false
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
},
onRemoveClick: function(grid, rowIndex){
this.getStore().removeAt(rowIndex);
}
})
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [{
items: test
}]
})
}
})
index.html:
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <link rel='shortcut icon' href='./imatges/icones/petits/login.png' type='image/png'> -->
<title>Sencha</title>
<!-- CDN 4.2.1- NEPTUNE -->
<link href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<link href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<!-- JScript -->
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
I keep getting this error when I open it on the browser:
Why is it not working and how to solve this?
Thanks
You're defining the CellEditing and model.grid.Plant with the app name of KitchenSink:
const test = Ext.define('KitchenSink.view.grid.CellEditing',{
//rest of your code
requires: [
//other requires
'KitchenSink.model.grid.Plant'
]
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: KitchenSink.model.grid.Plant,
//rest of store
onAddClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
//rest of model configs
But in the Ext.application, you define the name of the application as "MyApp":
Ext.application({
name: 'MyApp',
//other configs
Change the name of the application to KitchenSink or define the CellEditing, the requires and the models like:
const test = Ext.define('MyApp.view.grid.CellEditing',{
//rest of your code
And see if it works.
I need to create a grid on my HTML page. I am able to do that but the whole process made me to include the complete Ext sdk folder in my solution which made my application size considerable. I do not want to make use of everything nor does my application uses MVC architecture. All I want to do is to create a grid component on my page. Currently I am doing like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Usage</title>
<link rel="stylesheet" type="text/css" href="ExtJSIncludes/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script src="ExtJSIncludes/ext.js"></script>
</head>
<body>
<div id="divSampleGrid"></div>
<script>
Ext.onReady(function () {
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":"homer#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
co
lumns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: 'divSampleGrid'
});
});
</script>
</body>
</html>
My 'ExtJSIncludes' folder contains everything. Do I really need that? What are the mimimum files I need to include for just a grid? Is there any standard js file available along with the css that is the only requirement for it? Just like JQuery?
Just include ext-all.js instead of ext.js.
Here is a good read for all possible Ext scripts depending on how you wish to use..Read
In my code I have given grid in one tab in the center region. Here is my full code
<html>
<head>
<title>Ext Js 4.0</title>
<link rel="stylesheet" type="text/css"
href="E:/Sikandar/extjs/ext-4.2.1.883/resources/css/ext-all.css" />
<script src="E:/Sikandar/extjs/ext-4.2.1.883/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
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
]
]
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: document.body,
title: 'Movie Database',
layout:'fit',
store: store,
columns: [
{header: "Id", dataIndex: 'id', hidden:true},
{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'}
]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Implementing Ext Js</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
},
{
region: 'center',
layout:'fit',
title: 'Practice_Till_Date',
id:'center',
border: true,
items:[
grid]
}]
});
});
</script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>
How can i add new tab in center region? please help
I've opened a fiddle to show you how I did it, you just need to add a tabpanel to you your center region.
I hope this is what you were looking for.
Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
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
]
]
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: document.body,
title: 'Movie Database',
layout:'fit',
store: store,
columns: [
{header: "Id", dataIndex: 'id', hidden:true},
{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'}
]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Implementing Ext Js</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'center',
xtype: 'tabpanel',
title: null,
id:'center',
border: true,
items:[{
xtype: 'panel',
id: 'panel1',
title: 'Practice_Till_Date',
items:[grid]
}, {
// xtype: 'panel',
// id: 'panel2',
title: 'Another tab',
html: 'bla bla bla'
}]
}]
});
});
Good day!
Need help ExtJS 4.1
There is a ComboBox. There is a Grid. Grid plugged plug rowexpander.
ComboBox and Grid take data from one array.
The purpose of the script: after selecting an item in the ComboBox - open the corresponding rowexpander in the grid.
That is, The user selects in ComboBox «Alcoa Inc» and in the field of Grid row with the name of the company «Alcoa Inc» rowexplander is disclosed.
Problem: I can not turn to the records in the table and call the event expandbody / collapsebody
After selecting a ComboBox'e I get the id of the selected item, which corresponds to the id record in Grid, but also how to use it, what would appeal - I can not understand.
grid.getView (). getNode (0) - got so appeal, but it's not something that would help me.
PS So far, the variables are declared as window.grid and window.simpleCombo to simplify debugging
The script:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../examples/ux');
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.ux.RowExpander',
'Ext.selection.CheckboxModel',
'Ext.tip.QuickTipManager',
'Ext.ux.data.PagingMemoryProxy',
'Ext.toolbar.Paging',
'Ext.ux.SlidingPager',
'Ext.form.field.ComboBox',
'Ext.form.FieldSet'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var myData = [
['0','3m Co',71.72,'9/1 12:00am'],
['1','Alcoa Inc',29.01,'9/1 12:00am'],
['2','Altria Group Inc',83.81,'9/1 12:00am'],
['3','American Express Company',52.55,'9/1 12:00am'],
['4','American International Group, Inc.',64.13,'9/1 12:00am'],
['5','AT&T Inc.',31.61,'9/1 12:00am'],
['6','Boeing Co.',75.43,'9/1 12:00am'],
['7','Caterpillar Inc.',67.27,'9/1 12:00am'],
['8','Citigroup, Inc.',49.37,'9/1 12:00am']
];
Ext.define('Company', {
extend: 'Ext.data.Model',
idProperty: 'company',
fields: [
{name: 'id', type: 'int'},
{name: 'company', type: 'string'},
{name: 'price', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'int', name: 'id'},
{type: 'string', name: 'name'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Company',
remoteSort: true,
pageSize: 3,
proxy: {
type: 'pagingmemory',
data: myData,
reader: {
type: 'array'
}
}
});
// create the data store for combobox
function createStore() {
return Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'State',
data: myData
});
}
// create the Grid
window.grid = Ext.createWidget('gridpanel', {
title:'Sliding Pager',
store: store,
columns: [ {
id:'company',
text: 'Company',
sortable: true,
dataIndex: 'company',
flex: 1
},{
text: 'Price',
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price',
width: 75
},{
text: 'Last Updated',
sortable: true,
dataIndex: 'lastChange',
width: 75
}],
stripeRows: true,
height:320,
minHeight: 160,
width:700,
frame:true, //+
plugins: [{
ptype: 'rowexpander',
id: 'atata',
rowBodyTpl : [
'<p>Company: <b>{company}</b></p>',
'<p><b>$ {price}</b></p>'
]
}],
collapsible: true,
animCollapse: false, // end +
resizable: {
handles: 's'
},
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 3,
store: store,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
})
});
grid.render('grid-example');
function open_some_plus(val) {
alert(grid.getView().getNode(val));
}
// Simple ComboBox using the data store
window.simpleCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select a single state',
renderTo: 'simpleCombo',
displayField: 'name',
width: 700,
labelWidth: 400,
store: createStore(),
queryMode: 'local',
typeAhead: true
});
simpleCombo.on('select', function() {
var v = simpleCombo.getValue();
var record = simpleCombo.findRecord(simpleCombo.valueField || simpleCombo.displayField, v);
var index = simpleCombo.store.indexOf(record);
open_some_plus(index);
});
store.load();
});
Html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sliding Pager Extension Example</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="shared/example.css" />
<style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(../shared/icons/fam/grid.png) !important;
}
.add {
background-image:url(../shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(../shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(../shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(../shared/icons/save.gif) !important;
}
</style>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="app2.js"></script>
</head>
<body>
<div id="simpleCombo"></div>
<div id="mydiv_id"></div>
<br/>
<div id="grid-example"></div>
</body>
</html>
Tell me the solution, the second day of the "struggling against the wall."
[opt] specify pluginId instead of id
use getPlugin() or grid.plugins[0] and "native" .toggleRow()
plugins: [{
ptype: 'rowexpander',
pluginId: 'atata',
rowBodyTpl : [
'<p>Company: <b>{company}</b></p>',
'<p><b>$ {price}</b></p>'
]
}],
function open_some_plus(val) {
grid.getPlugin('atata').toggleRow(val)
}
This code works:
//val = 5 for example
var store = grid.getStore();
var expander = grid.plugins[0];
var page = grid.store.currentPage;
var record = store.getAt(val);
expander.toggleRow(val);
I downloaded Ext JS 4.0.2a and I'm trying to do the Ext JS tutorial. I go the "essentials" example working, so I'm pretty sure I'm set up right. I'm trying to do the grid example here ...
http://www.sencha.com/learn/legacy/Tutorial:Getting_Productive
... but I can't get the grid to display.
My ExtStart.html looks like this:
<html>
<head>
<title>Introduction to Ext 2.0: Starter Page</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
<div id="grid-example"></div>
</body>
</html>
and my ExtStart.js is exactly like on the tutorial site like this:
Ext.onReady(function() {
// sample static data for the store
var myData = [['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
// create the data store
var ds = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// manually load local data
ds.loadData(myData);
// create the colum Manager
var colModel = new Ext.grid.ColumnModel([
{header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: ds,
colModel: colModel,
height: 300,
width: 600,
title: 'My First Grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');
});
Any ideas what I could be doing wrong? Sadly stumped. :(
rob
You are using ExtJS4 but are referring to a legacy documentation.
There have been quite a few changes to the components and how they need to be wired together between the version that document was written for and version 4 that you are using.
Here is the array grid (and other) example(s) for ExtJS 4. -
HTML
Javascript code
For example, you are using Ext.grid.GridPanel. This is no longer valid. (Use Ext.grid.Panel instead)