I wrote this Ext js application but I keep getting this error that says cannot call method 'create' in line 32. I took out some lines from the original code. Ext.onReady didnt work, the page would just be blank and the debuger didnt give any errors, but when i took out Ext.onReady() this error popped up
<html>
<head><title>Arrar Read</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="C:/Users/kevin/ext-3.4.0/ext-3.4.0 /resources/css/ext-all.css"/>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter /ext/ext-base-debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0ext-all.js"> </script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/ext-all- debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/pkgs/ext-core.js"></script>
<script type="text/javascript">
var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Smith', 'DE'],
['Bryan Shanly', 'NJ'],
['Nyron Selgado', 'CA']
];
var nameRecord = Ext.data.Record.create([
{ name: 'name', mapping : 1},
{ name: 'state',mapping : 2}
]);
var arrayReader = new Ext.data.ArrayReader({},nameRecord); //creating a reader
var memoryProxy = new Ext.data.MemoryProxy(arrayD); //creating a memory proxy from the array
var store = new Ext.data.Store({ //create a store
reader : arrayReader,
proxy : memoryProxy
});
var colModel = new Ext.grid.ColumnModel([
{
header : 'Full Name',
sortable : true,
dataIndex : 'fullName'
},
{
header : 'State',
dataIndex : 'state'
}
]);
var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
});
var grid = new Ext.grid.GridPanel({ //create a gridpanel
title : 'First Grid',
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store,
view : gridView,
colModel : colModel,
selModel : selModel
});
console.debug('everything executed');
</script>
</body>
</html>
I dont know if im missing some script files or not . can someone please help me
Here is an ExtJs 4 example: (working fiddle)
var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Smith', 'DE'],
['Bryan Shanly', 'NJ'],
['Nyron Selgado', 'CA']
];
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'state', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Person',
data: arrayD
});
var grid = Ext.create('Ext.grid.GridPanel', { //create a gridpanel
title: 'First Grid',
renderTo: Ext.getBody(),
autoHeight: true,
width: 250,
store: store,
columns: [
{
header: 'Full Name',
sortable: true,
dataIndex: 'name'},
{
header: 'State',
dataIndex: 'state'
}
]
});
console.debug('everything executed');
You can download your own version and put it in a webserver or use one of these for js:
//for production
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
//for debug => isn't minified
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>
//for development => isn't minified, logs errors and warnings to the console.
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-dev.js"></script>
for css use:
<link rel="stylesheet" type="text/css" href="htpp://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css"/>
Related
I am new to extjs.I tried to write a simple application with MVC architecture as described here :
http://docs-origin.sencha.com/extjs/4.2.1
When I try to run the application in browser I give this error in firebug:
"NetworkError: 404 Not Found - http://127.0.0.1/Sample/app/view/userlist.js?_dc=1408194279243"
My project structured is :
List.js file :
/**
* Created by Sina-PC on 8/14/14.
*/
Ext.define('Sample.view.users.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
Users.js file:
Ext.define('Sample.controller.Users', {
extend: 'Ext.app.Controller',
views:['userlist'],
init: function() {
console.log('Initzed Users! This happens before the Application launch function is called');
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
}
,
onPanelRendered: function() {
console.log('The panel was rendered');
}
});/**
* Created by Sina-PC on 8/14/14.
*/
app.js file :
Ext.application({
name: 'Sample',
appFolder:'app',
controllers:[
'Users'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'userlist'
}
]
});
}
});
and index.html:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
ExtJs doesn't know what is a view 'userlist'. You must add to requires this file.
Ext.define('Sample.controller.Users', {
requires: [ 'Sample.view.users.List' ],
...
Users.js file has "views:['userlist']," and it should be "views:['Sample.view.users.List'],"
Using ExtJs, I m testing to transfer received xml data to specific grid.
I made a simple text file which has 10 output values , and set pageSize to 5 from paging toolbar.
That is, the desired output for 10 values could be 5 values on each pages(2 pages).
It divided to 2 pages correctly, however there are 10 same values on each pages.
What is the cause for above problem?
I hope your comments will be possible solutions.
Thank you!
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script src="resources/js/ext-base.js"></script>
<script src="resources/js/ext-all-debug.js"></script>
<script src="resources/ux/BufferView.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var mm = Ext.data.Record.create([
{name: 'mb_id'},
{name: 'mb_sex'},
{name: 'mb_name'}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method:'GET',
url:'./grid2.php'
}),
reader: new Ext.data.XmlReader(
{
record: 'Item'
}, [
'mb_id'
,'mb_sex'
,'mb_name'
]
),
autoLoad: {params:{start: 0, limit: 5}}
});
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame:true,
title: 'information',
height:300,
width:516,
store: store,
columns: [
{header: "id", dataIndex: 'mb_id'},//, renderer: cover_image
{header: "sex", dataIndex: 'mb_sex',width:100},
{header: "name", dataIndex: 'mb_name',width:100}
],
bbar:new Ext.PagingToolbar({
store:store,
pageSize:5,
displayInfo:true
})
});
});
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
data.php
header("Content-type: application/xml"); //;charset=utf-8
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>";
echo "<root>";
//전체 데이터 레코드 값 기록
for($i=0;$i<10;$i++)
{
echo "<Record>";
echo "<Time>".$i."</Time>";
echo "<Name>".$i."</Name>";
echo "</Record>";
}
echo "</root>";
As Tim suggested, remove the pageSize parameter from your paging toolbar and instead add it to your store:
var store = new Ext.data.Store({
pagesize: 5,
proxy: new Ext.data.HttpProxy({
method:'GET',
url:'./grid2.php'
})
}) ...
Team,
How to align data in to view port. I have two panels and unable to achieve the desired effect. I am using extjs 3.4
I am facing the following problems:
Border are over lapping and it is coming very thick. Not able to leave space from top and left.
Not able to set height and it is expanding up to whole page.
Grid and panel width should be reduced I have only three columns
code.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<style type="text/css">
.add24 {
background-image: url(images/fiber_Cable.jpg) !important;
}
</style>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var baseParamsv = {
"pager":""
};
Ext.QuickTips.init();
var searchFormPanel = new Ext.FormPanel({
id: 'searchForm'
,region:'north'
,title:'Heading'
,layout:'table'
,bodyStyle:'padding:10px;'
,height:100
,width:200
,padding: '5 5 5 5'
,layoutConfig: {columns: 2}
,defaults: {ctCls:'padding3'}
});
searchFormPanel.add({xtype: 'label', text:'Search User:'});
searchFormPanel.add({xtype: 'label', text: ''});
searchFormPanel.add({xtype: 'textfield', id: 'search1', name: 'search1', value: '',enableKeyEvents: true});
searchFormPanel.add({xtype: 'button', id: 'go', cls: 'spacing3', text: 'Go!', handler:function() {} });
var gridColumnModel = new Ext.grid.ColumnModel([
{ header: "checked",sortable:true, menuDisabled:true, dataIndex:'checked',width:20,renderer:checkBoxRenderer},
{ header: "username",sortable:true, menuDisabled:true, dataIndex:'username',width:40,renderer:UserNameRenderer},
{ header: "emailid",sortable:true, menuDisabled:true, dataIndex:'emailid',width:30, renderer:emailidRenderer}
]);
var store = new Ext.data.JsonStore({
baseParams:baseParamsv,
fields: [
{name:'checked'},
{name:'username'},
{name:'emailid'}
],
root:'data',
totalProperty: 'total',
url:'data.json',
id:'offlineDataStoreId'
});
var dataGrid = new Ext.grid.GridPanel({
colModel:gridColumnModel
,region:'center'
,store:store
,stripeRows:true
,viewConfig: { autoFill:true, emptyText : 'No data found to display', forceFit: true, scrollOffset: 2 }
,layout:'fit'
,listeners: {
render: function(){
var initParams = Ext.apply({},baseParamsv);
Ext.apply(initParams, {
start:0,
limit:10
});
this.store.load({params:initParams});
}
}
});
function checkBoxRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {
return '<input type=checkbox name="check_box" value="'+record.get('emailid')+'">';
}
function UserNameRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {
return val;
}
function emailidRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {
return val;
}
var innerPanel = {
xtype: 'panel',
id: 'inner-panel',
layout: 'border',
region: 'center',
title:'Heading',
width:200,
bodyStyle:'padding:10px;',
padding: '5 5 5 5' ,
items :[dataGrid]
};
var viewPort = new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items:[searchFormPanel,innerPanel],
bodyStyle:'padding:10px;margin-top:10px',
renderTo:Ext.getBody()
});
viewPort.doLayout();
});
</script>
</body>
</html>
If you don't want to use whole the page, just use a panel instead of a Viewoprt:
var viewPort = new Ext.Panel({
layout: 'border',
width: 400,
height: 300,
title: 'Ext Layout Browser',
items:[searchFormPanel,innerPanel],
bodyStyle:'padding:10px;margin-top:10px',
renderTo:Ext.getBody()
});
Here you can see the result: http://jsfiddle.net/3CabN/6/
I am migrating Ext js from 3.x to the new 4.0.2a. Seems that everything in my project works fine except of comboboxes. It doesn't really matter where i use a combobox, but it keeps crashing my application on launch.
the error im getting is: Uncaught RangeError: Maximum call stack size exceeded
Here is an example of my code (login page with combobox):
index.html:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="ext3-core-compat.js"></script>
<script type="text/javascript" src="ext3-compat.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/My.Viewport.js"></script>
<script type="text/javascript" src="js/My.LoginWindow.js"></script>
app.js:
Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
Ext.ns('My');
My.Base = function (){
Ext.QuickTips.init();
return {
init: function () {
var win = Ext.create('My.LoginWindow',{
title: 'Authorization',
callback: function(){
new Dag.Viewport();
}
});
win.show();
}
}
}();
Ext.onReady(My.Base.init, My.Base);
My.LoginWindow.js:
Ext.define('My.LoginWindow', {
extend:'Ext.Window',
//alias: 'widget.LoginWindow', This is not required.
initComponent: function(){
Ext.define('test', {
extend: 'Ext.data.Model',
fields: ['abbr', 'name']
});
var states = Ext.create('Ext.data.Store', {
model: 'test',
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
this.form = Ext.create('Ext.form.Panel',{
baseCls: 'x-plain',
defaultType: 'textfield',
defaults: {
labelWidth: 55,
allowBlank: false,
anchor:'100%'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
},{
fieldLabel: 'Account',
name: 'account'
},{
fieldLabel: 'Login',
name: 'login'
},{
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
listeners: {
'specialkey': function(field, e){
if (e.getKey() == 13){
this.submitForm();
}
},
scope: this
}
}]
});
Ext.apply(this, {
modal: true,
resizable: false,
closable: false,
plain: true,
width: 200,
draggable: false,
bodyStyle:'padding:5px;',
items: this.form,
buttons: [{
text: 'Login',
handler: this.submitForm,
scope: this
},{
text: 'Cancel',
handler: function(){
this.form.getForm().reset();
},
scope: this
}]
});
this.callParent(arguments);
},
submitForm: function(){
var f = this.form.getForm();
f.submit({
url: 'myurl',
waitMsg: 'Login...',
waitTitle: 'Wait',
scope: this,
success: function(form, action){
this.callback.call();
this.close();
},
failure: function(form, action){
var res = action.result;
var msg = 'Enter correct login and password, please.'
if (res && res.message){
msg = res.message;
}
Ext.Msg.alert('Error', msg);
}
});
}
});
As you can see im using a standard combobox with standard data (from sencha's example docs).
When i now launch the application, it crashes with the error message described above.
But when i remove the combobox, the application fully works, i see the login window and can login to show the My.Viewport.
What can cause this error, does some code call itself all the time? I've spend many hours fixing this annoying problem, but no luck so far.
Thanks for your help in advance.
I do see some things you still need to update, for example switching the superclass call with callParent, replacing the new X() calls with Ext.create(), etc. However, nothing jumps out at me that would be causing a stack overflow. You should probably break on errors in Firebug and do a little debugging to see where the issue is originating.
I was trying to render a simple piechart using ExtJs 3.0 but could not. Below is the snippet:
<div id="ext_grid_panel">
<div id="blackout_tab">
<div id="grid_blackout_current"></div>
</div>
<div id="gls_tab">
<div id="gls_current"></div>
</div>
</div>
var mainGridPanelWidth = (Ext.IsIE)?'':'width: \'100%\',';
var mainGridPanel = new Ext.TabPanel({
id: 'maingridpanel',
renderTo: 'ext_grid_panel',
style: {width:'100%'},
tabWidth: 1000,
activeTab: 0,
items: [
{id: 'allTabPanel',contentEl: 'blackout_tab',title: 'All'},
{id: 'glsTabPanel',contentEl: 'gls_tab',title: 'GLS'}
]
});
if (!Ext.IsIE)
mainGridPanel.setWidth('100%');
Ext.getCmp('allTabPanel').on('activate', function() {
});
Ext.getCmp('glsTabPanel').on('activate', function() {
});
var pieChart = {
xtype : 'piechart',
store : [{'total' :'42', 'range':'20,000'},{'total' :'53', 'range':'10,000'}],
dataField : 'total',
categoryField : 'range'
};
var panelBlackoutCurrent = new Ext.Panel({
id: 'panelblackoutcurrent',
renderTo: 'grid_blackout_current',
items: [
pieChart
]
});
var panelglsCurrent = new Ext.Panel({
id: 'panelglscurrent',
renderTo: 'gls_current',
items: [
pieChart
]
});
When i inspect in firefox firebug, i see an object(.swf) is created but the piechart content is not there/rendered.
Quick guidance is highly appreciated as it is taking lot of time with no solution
You can use an example pie chart as a starting point:
http://www.extjs.com/deploy/dev/examples/chart/pie-chart.js
Here is the result: http://www.extjs.com/deploy/dev/examples/chart/pie-chart.html
here come my version
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<div id="ext_grid_panel">
</div>
<script>
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
fields: ['total', 'range'],
autoLoad: true,
data: [
{
total: 42,
range:'20,000'
}
,{
total: 53,
range:'10,000'
}
]
});
var mainGridPanel = new Ext.TabPanel({
renderTo: 'ext_grid_panel',
//style: {width:'100%'},
width: '100%',
height: 400,
activeTab: 0,
plain: true,
items: [
{
id: 'panelglscurrent',
title: 'GPS',
layout: 'fit',
listeners: {
activate: function(){
}
},
items: [{
id: 'chart1',
xtype : 'piechart',
store : store,
dataField : 'total',
categoryField : 'range'
}]
},
{
id: 'panelblackoutcurrent',
title: 'All',
layout: 'fit',
listeners: {
activate: function(){
}
},
items: [
{
id: 'chart2',
xtype : 'piechart',
store : store,
dataField : 'total',
categoryField : 'range'
}
]
}
]
});
Ext.getCmp('panelglscurrent').on('activate', function() {
Ext.getCmp('panelglscurrent').doLayout(true);
});
Ext.getCmp('panelblackoutcurrent').on('activate', function() {
Ext.getCmp('panelblackoutcurrent').doLayout(true);
});
if (!Ext.IsIE)
mainGridPanel.setWidth('100%');
});
</script>
</body>
</html>
your sample had a few problems:
first you have to create a proper store passing the array of object to the pie chart is not enought
also you should wrap your code inside Ext.onReady or you can get some strange behaviour like element not rendering properly
make sure to include the plain: true on tabPanel with chart inside or the chart won't render properly
an general note
try to give good name at your variable (like mainGridPanel being actually a TabPanel)
intent properly your code, by experience it really become messy fast.
Also if you want to make the extjs component using full screen, you have better to use the viewport it would make everything resize nicely and make things more easy for you