Hi am a new comer to ext js,
i created two project/ application with extjs 4 using mvc architecture , but unfortunately i failed , i haven't get the out put as i expected here am pasting the two applications code somebody please help me to find the error,
I tried a lot, i think both application have the same error, am referring a text book named Ext js 4 First Look, and the tutorials given by sencha .
Application 1
Structure
-app
---controller
-----Books.js
---view
-----Emailpanel.js
-----Panelcenter.js
-----Phonepanel.js
-----Viewport.js
---model
-extjs
-index.html
-app.js
index.html
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js" ></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
app.js
Code:
// JavaScript Document
Ext.Loader.setConfig({enabled: true});
Ext.application({
name: 'Buks',
appFolder: 'app',
controllers: [
'Books'
],
autoCreateViewport: true
});
app/controller/Books.js
Code:
Ext.define('Buks.controller.Books', {
extend: 'Ext.app.Controller',
views: [ 'Panelcenter','Emailpanel','Phonepanel' ],
});
app/view/Viewport.js
Code:
Ext.define('Buks.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Buks.view.Panelcenter',
'Buks.view.Emailpanel',
'Buks.view.Phonepanel'
],
initComponents: function () {
Ext.apply (this, {
items: [{
xtype: 'pcenter',
title:'center',
region: 'center'
},
{
xtype: 'empanel',
title:'south',
region: 'south',
height: 150
},
{
xtype: 'phPanel',
title: 'west',
region: 'east',
width: 150
}]
});
}
});
app/view/Panelcenter.js
Code:
// JavaScript Document
Ext.define('Buks.view.Panelcenter' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.pcenter',
title : 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email','phone'],
data : [
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]
};
this.columns = [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
];
this.callParent(arguments);
}
});
This is all about the codes in application 1
i have not get any display in the screen ,but in the Firebug i found that the additional js files (Viewport.js, Panelcenter.js,etc ) are loading
and the second application i created a simple one that i found in the sencha forum , but in that example also i failed
code for second application is given below
Application2
Structure
-app
---model
---view
-----Viewport.js
---controller
-----Books.js
-app.js
-index.html
index.html
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js" ></script>
<script type="text/javascript">
Ext.Loader.setConfig ({enabled:true});
</script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
app.js
Code:
Ext.application ({
name: 'Buk',
controllers: ['Books']
});
app/controller/Books.js
Code:
Ext.define('Buk.controller.Books', {
extend: 'Ext.app.Controller',
});
app/view/Viewport.js
Code:
Ext.define ('Buk.view.Viewport' , {
extend: 'Ext.container.Viewport' ,
initComponents: function () {
Ext.apply (this, {
items: [{
region: 'center' ,
xtype: 'panel' ,
html: 'Hello World!'
}]
});
this.callParent(arguments);
}
});
Somebody please help me to find out the error in this code, I tried a lot before posting this in to this forum, i need your help and suggestions to continue with extjs4. am studing myself, i think i had done some error in the code please help me to correct the code
Thanks in advance
123lal
Viewport.js error in mvc extjs4
Reply With Quote
