PDA

View Full Version : Help with generic Architecture


eurosickwitit
17 Oct 2012, 9:53 AM
So, I decided to learn ExtJS starting with version 4 since I am completely new to it.

I have been following the app architecture tutorial here http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt2

I want to utilize the same approach where I use the autoCreateViewport: true flag.
Before I start adding things to the interface, I want to make sure it loads. I followed the tutorial carefully and I do not know what I am missing, but the interface is NOT SHOWING in the browser.

Here is my code (very little, I know, but should work and at least show the panel).

This is my app.js file

Ext.Loader.setConfig({
enabled: true
});

Ext.application({
name: 'Cache22AccuCons',
appFolder: 'AccuCons',
autoCreateViewport: true,
launch: function () {
//this is fired as soon as the page is ready
}
});

This is my Viewport.js

Ext.define('AccuCons.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: ['AccuCons.view.AccuCoverage'],
layout: 'fit',
autoRender: true,
initComponent: function(){
this.items = {
xtype: 'panel',
};
this.callParent();
}
});

And this is my AccuCoverage.js


Ext.define('AccuCons.view.AccuCoverage', {
extend: 'Ext.panel.Panel',
alias: 'widget.accucoverage',
autoShow: true
});

And this is my index.html

<html><head>
<title>Cache22 - Accuracy Console</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app2.js"></script>
</head>
<body></body>
</html>

I checked the firebug, all the js files load, and there are no errors in console.

Based on the ext js code, should I not be seeing at least a panel there? I am stuck currently on this, I know how to do this using the approach without autoCreateViewport.

Any insight on this basic stuff I can't figure out and baffles me would be greatly appreciated.
skirtle
17 Oct 2012, 3:15 PM
I've reformatted your code so that we can actually read it.

I'm not sure exactly what's wrong but here are a few thoughts.

If you're seeing all the JS files load for all your components that's a good sign, it means it's almost working. I notice you have both app.js and app2.js. I assume that's just a typo in your forum post rather than a bug in your real app.

You have a stray comma here, get rid of it:


this.items = {
xtype: 'panel',
};

Switch to ext-all-dev.js rather than ext-all-debug.js. You'll get more warnings that way.

Get rid of autoRender and autoShow, they aren't needed here.

Add some console logging inside the initComponent function. That'll give you some idea whether it's getting to that point.

Try inspecting the DOM using Firebug. Do you see anything inside the body element? Any evidence of a viewport or panel?

Keep in mind that the panel you've created won't be very obvious. It doesn't have a title and is stretched to fit the viewport so all you'll see is the blue border round the edge of the page. Try this instead, it'll be more obvious:


this.items = {
html: 'Content',
title: 'Title',
xtype: 'panel'
};

Exactly which ExtJS version are you using? It shouldn't matter but if you still can't get it to work that might help us to figure out the problem.
eurosickwitit
22 Oct 2012, 5:49 AM
skirtle, thanks so much for reply. and sorry for the delayed response. juggling multiple things at once, you know how it might get sometimes.

I will try the suggested changes and reply back with results. Means a lot during learning process. Can't wait to get slowly better at EXT JS.

And by the way, the version I am using is EXT JS 4.1
eurosickwitit
14 Dec 2012, 11:31 AM
skirtle, its been a while. but it worked. im getting the basics now. took a couple months to get back to it because it is not priority i have other existing projects in java, so this was pending. its for personal . illl proceed and come back with questions when issues arise which im sure they will