Related
I am a newbie with ExtJS 4. I am trying to display a result list which fetches results from a remote store, without much success.
Below is the view file
Ext.define('Crm.view.CompanyList', {
extend: 'Ext.grid.Panel',
alias: 'widget.companyList',
store : 'Crm.store.Companies',
title : 'Company List',
initComponent: function(){
this.columns = [ {
text : 'ID',
width : 150,
dataIndex : 'id'
}, {
text : 'LastName',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'lastName'
}, {
text : 'First Name',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'firstName'
}, {
text : 'Street',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'street'
} ];
this.dockedItems = [ {
xtype : 'pagingtoolbar',
store : 'Companies',
dock : 'bottom',
displayInfo : true
} ];
this.callParent();
}
});
and below is the Model
Ext.define('Crm.model.Company',{
extend : 'Ext.data.Model',
fields : [
{name:'id',type:'string'},
{name:'lastName',type:'string'},
{name:'firstName',type:'string'},
{name:'street',type:'string'}
]
});
This is how the store is defined
Ext.define('Crm.store.Companies', {
extend: 'Ext.data.Store',
requires: 'Crm.model.Company',
model: 'Crm.model.Company',
autoLoad: {start: 0, limit: 5},
pageSize: 5,
remoteSort: true,
sorters: [{
property : 'lastName',
direction: 'asc'
}],
proxy: {
type: 'jsonp',
url : 'http://extjsinaction.com/crud.php?model=Employee&method=READ',
reader: {
type: 'json',
root: 'data',
idProperty : 'id',
// successProperty : 'meta.success',
totalProperty : 'meta.total'
}
}
});
and finally the HTML file which is expected the render the Grid in browser
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<script type="text/javascript" src="Crm/view/CompanyList.js" ></script>
<script type="text/javascript" src="Crm/model/Company.js" ></script>
<script type="text/javascript" src="Crm/store/Companies.js" ></script>
</head>
<body>
<script type="text/javascript" >
Ext.onReady(function() {
Ext.create('Crm.view.CompanyList', {
});
);
</script>
</body>
</html>
When I run this in browser, I get the below error in browser console
Uncaught TypeError: Cannot read property 'buffered' of undefined ext-all-dev.js:145555
Can someone please guide me to resolve this. Thank you.
The main reason your code fails is that the grid does not have a store. You configure store as string (class name) but this approach works only if you use MVC with Ext.Application when Ext creates the store for you.
You can make the above working by creating the store in initComponent of the grid:
this.store = Ext.create('Crm.store.Companies', {});
For long run I recommend to use Sencha Cmd and MVC (MVVM for Ext 5) architecture.
index.html
<script type="text/javascript" src="resources/js/ext-all.js?"></script>
<script type="text/javascript" src="resources/js/tabs-adv.js?"></script>
tabs-adv.js
create a tab panel then load the vehicle.html with loader
....
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
id : 'tabspanel',
cls : 'MainPanel',
resizeTabs: true,
enableTabScroll: true,
width: window.innerwidth,
height: window.innerHeight - 30, //30 because menu height is 30px
tabBar: {
layout: { pack: 'center' }
},
defaults: {
autoScroll: false, //close the tab scrolling
bodyPadding: 0 //must 0,not margin at all
},
items: [
{
closable: false,
//html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="vehicle/vehicle.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
loader: {
autoLoad:true,
url :'vehicle/vehicle.html'
},
iconCls: 'bus32',
title: 'Vehicle Manage'
}]
})
vehicle.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Ext includes -->
<script type="text/javascript" src="vehicle.js?<?php echo time(); ?>"></script>
<title>Untitled Document</title>
</head>
<body>
aa
<div id="toolbar"></div>
</body>
Unfortunately Loader didn't load the vehicle.js
loader only load the html content, but not included vehicle.html javascript.
any way to solve this problem?
p/s: i m facing this problem EXT JS failed to load multi pages at the same time , both tabs are load at the same time with the ext-all.js will cause the application error, i have to try to use loader to prevent this happen,
I have tried, if the tabs are loaded with different ext-all.js will not be occured error, example first tab load ext-all.js, second tabs will load ext-all1.js 3th tab will load ext-all2.js.
UPDATE
vehicle.js and driver.js also having the grid panel
vehicle.js
Ext.define('MyApp.view.MyVehicleGridPanel', {
id:'mygridpanel',
extend: 'Ext.grid.Panel',
renderTo: Ext.getBody(),
width: window.innerWidth,
header: false,
height: window.innerHeight,
store: UserStore,
multiSelect: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
dataIndex: '_id',
text: 'Vehicle ID'
},
{
xtype: 'gridcolumn',
width: 126,
dataIndex: 'Plat_No',
text: 'Plat Number'
},
{
xtype: 'gridcolumn',
width: 200,
dataIndex: 'Name',
text: 'Added By'
}
],listeners: {
itemclick: function(dv, record, item, index, e) {
if (record.get('_id') > 0){
Ext.getCmp('BtnEdit').enable();
Ext.getCmp('BtnDelete').enable();
}else{
Ext.getCmp('BtnEdit').disable();
Ext.getCmp('BtnDelete').disable();
};
}},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
cls: '',
width: 65,
id : 'BtnAdd',
icon: '',
iconCls: 'add',
text: 'Add'
},
{
xtype: 'button',
cls: '',
id : 'BtnEdit',
width: 65,
icon: '',
iconCls: 'edit',
disabled: true,
text: 'Edit'
},
{
xtype: 'button',
cls: '',
id : 'BtnDelete',
width: 65,
icon: '',
iconCls: 'delete',
disabled: true,
text: 'Delete'
},
{
xtype: 'button',
cls: '',
id : 'BtnRefresh',
width: 65,
icon: '',
iconCls: 'refresh',
text: 'Refresh'
}
]
}
]
});
me.callParent(arguments);
}
});
var gridwin = Ext.create('MyApp.view.MyVehicleGridPanel');
The loader is not supposed to load your javascript. With extjs, you should have only one javascript file. Use events to execute javascript code while rendering your panels, especially use the render event.
Put your vehicle.js in your main .js file and remove the last line. This one goes into the event listener.
Change your tab item using an event handler
items: [{
closable: false,
loader: {
autoLoad:true,
url :'vehicle/vehicle.html'
},
iconCls: 'bus32',
title: 'Vehicle Manage',
listeners: {
render: function(){gridwin = Ext.create('MyApp.view.MyVehicleGridPanel')}
}
}]
General remark 1: Do your homework and read the documentation. Stick to the recommended way. Why are you trying to work in such a convoluted way ? It shows that you didn't take the time to read and apply the basics.
General remark 2: You should concatenate all your .js sources in the production environment. The best thing is to use sencha cmd. You have to create an empty app, an then copy all your project into that empty app.
It's definitely possible to mix up ExtJS with static pages - rather suitable for print previews or alike.
A secondary DOM needs to be created within an iFrame, which will cause the JS on page to execute - because it circumvents the ExtJS Loader completely - and therefore scripts will be properly parsed.
Here's an example, proven to be working (reduced to the least required):
items : [{
xtype: 'component',
autoEl: {tag: 'iframe', src: ''}
}],
listeners: {
boxready: function(){
this.items.items[0].el.dom.src='vehicle.html';
}
}
The listener for boxready causes some delay in execution (which was required for what I did).
When reading other answers, I'd comment: How about thinking out of the box, once?
... which even literally applies in this particular case :)
One simply has to know the rules in order to break them - the other way around won't work.
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
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'
}
]
});
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)