PDA

View Full Version : Trying to make a panel; failing miserably.



nmcbride
2 Mar 2012, 10:18 PM
So I am trying to make a panel. Anything really. I wanted to figure out the right way to quickly build something in the designer and then copy it out and display it without deploying the full project. So I figured the simplest thing to start with would be a panel.

My html is the following:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" type="text/css" href="js/ext-4.0.7/resources/css/ext-all.css" />
<script src="js/ext-4.0.7/ext-debug.js" type="text/javascript"></script>
<script src="js/logonform.js" type="text/javascript"></script>

</head>
<body>

</body>
</html>


My code is the following:



Ext.onReady(function(){


Ext.define('MyApp.view.ui.MyPanel', {
extend: 'Ext.panel.Panel',

height: 250,
width: 400,
title: 'My Panel',

initComponent: function() {
var me = this;

me.callParent(arguments);
}

});

Ext.create('MyApp.view.ui.MyPanel', {
renderTo: Ext.getBody()
});


});


The panel I just made real quick with the designer, copied the code out and then pasted it in another file.

However it seems if the Ext.create is in there, I get weird errors.

The first error is the following:

XMLHttpRequest cannot load file:///Users/nmcbride/Development/Web/Sencha/MyApp/view/ui/MyPanel.js?_dc=1330755194848. Cross origin requests are only supported for HTTP.

The second error is:

Uncaught TypeError: object is not a function

on line 2 of the html.

Now if I take the same exact code and put it on jsFiddle to test is works perfectly. What am I doing wrong that is keeping this simple example from working? All the tutorials I can find for extjs 4 are about building full applications. What should you do if you just want to say display a logon form?

Thanks everyone for your help.

vietits
3 Mar 2012, 12:24 AM
You can fix the problem with one of the following solutions:

1. Use ext-all-*.js (ex ext-all-debug.js) instead of ext-debug.js


<script src="js/ext-4.0.7/ext-all-debug.js" type="text/javascript"></script>


2. If you want to use ext-debug.js then you should add these lines of code to your js file.


Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.panel.Panel' // <- see my note below
]);
Ext.onReady(function(){
Ext.define('MyApp.view.ui.MyPanel', {
extend: 'Ext.panel.Panel',

height: 250,
width: 400,
title: 'My Panel',

initComponent: function() {
var me = this;

me.callParent(arguments);
}
});

Ext.create('MyApp.view.ui.MyPanel', {
renderTo: Ext.getBody()
});
});

Note: I don't know why, but you must use Ext.require() to require any class (ex: Ext.Img), if not the Ext.define('MyApp.view.ui.MyPanel', {...}) will be not successfull and the error you mentioned will appear.

nmcbride
3 Mar 2012, 9:49 AM
Thank you vietits you were correct. But I have another question:

So doing some reading I came to a blog post talking about the different files you can load extjs with. It said ext-debug.js is basically just the shell and you can then remote load things when you need them. But it also said it is the slowest. If you are taking a minimalistic approach and only loading what you need when you need it, instead of loading the full framework, wouldn't that be faster?

skirtle
3 Mar 2012, 5:06 PM
The key performance factor is usually the number of requests. Loading on-demand usually requires something like 200+ requests for individual files before your app gets going. Loading a single file, even a big file, is much faster.

vietits
3 Mar 2012, 5:08 PM
So doing some reading I came to a blog post talking about the different files you can load extjs with. It said ext-debug.js is basically just the shell and you can then remote load things when you need them. But it also said it is the slowest. If you are taking a minimalistic approach and only loading what you need when you need it, instead of loading the full framework, wouldn't that be faster?

During the time of application development, we use dynamic loading of classes with debug-information approach though this is the slowest one.

To deploy the application when it is complete, we use Sencha SDK Tools to create a minified custom build that contains only the code that our application need. This way, we have to load all the code that are needed for the application one time so this is the fastest approach.

You can see "Getting Started" (http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started) for more information about this.

nmcbride
4 Mar 2012, 3:25 PM
Ok thank you for your help.