PDA

View Full Version : Zend ane ExtJs Auto Load js classes



Wolfie
22 Jan 2012, 12:38 PM
HI all

I am just writing my first app with Zend and ExtJs 4 and I neen urgent help please

The problem is :

I have Zend controller in wchich there are two actions : indexAction() and appAction()
I have also enabled layout for whole app. Each view is using this layout.

When I am hitting login button then I am redirecting to :




window.location = App.baseUrl + '/login/app';



where App.baseUrl - javascript object containing Zend base app path

It is redirecting me to the Zend View which looks like this :



<html lang="pl">
<head>
<!--extjs app-->
<?php echo $this->headScript()->setFile($this->baseUrl().'/js/jsapp/app.js') ?>
</head>
<body>

</body>
</html>


app.js file looks like this



Ext.Loader.setConfig({enabled:true});
Ext.require('Ext.container.Container');

Ext.application({
name: 'POB',
appFolder: 'app',
controllers: ['Orders'], <<---------
launch: function() {
Ext.create('Ext.container.Container', {
layout: 'fit',
height: '100%',
renderTo: 'content',
items: [
{
xtype: 'tabpanel',
title: 'Panel klienta',
items: [
{
//xtype: 'panel',
title: 'Zamówienia',
html: 'zamówienia bla bla bla',
items: [
]
},
{
//xtype: 'tabpanel',
title: 'Towar',
html: 'moja oferta bla bla'
},
{
//xtype: 'tabpanel',
title: 'Dane teleadresowe',
html: 'dane teleadresowe bla bla'
}
]
}
]
});
}
});


Please take a look in above script at line which is marked by arrow (<<-------)

when the line is commented everything is ok and application is launching correctly in the div="content" (renderTo: 'content')

When I unncoment this line then I got this error in chrome console



Resource interpreted as Script but transferred with MIME type text/html.
Orders.js:1Uncaught SyntaxError: Unexpected token <


I think there is no error in Orders.js file - it looks like this :




Ext.define('POB.controller.Orders', {
extend: 'Ext.app.Controller',

init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
});


Any ideas guys ? I'll be grateful for help

mitchellsimoens
23 Jan 2012, 12:06 PM
does your appFolder need to be changed to resolve the actual path?

jay@moduscreate.com
23 Jan 2012, 12:33 PM
The exception tells me that your Zend framework instance is returning HTML instead of JavaScript. That's why you're getting the "<" character.

Wolfie
23 Jan 2012, 1:14 PM
does your appFolder need to be changed to resolve the actual path?

I dont think it has to be resolved.

My ExtJs app structure is placed in 'public' folder in Zend and it looks like this :

30920

So the app.js file is in the correct place (according to other folders like controller) according to Ext.Loader examples.
inedex.php is in other place but I think it is ok, as long as it contains only files to include while whole app is launching.
ExtJs library is in other place (according to Ext.Loader exemple) but it is included correctly in index.php file

Wolfie
23 Jan 2012, 1:16 PM
The exception tells me that your Zend framework instance is returning HTML instead of JavaScript. That's why you're getting the "<" character.

Yes, it is returning html , but it is very weird, because with commented line :



controllers: ['Orders'],


app is working just great.
That's why i don't understand the problem

lukasz.sudol
8 Feb 2012, 2:45 AM
I think that Zend Framework can't find js classes, solution:

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

Ext.application({
name: 'FV',


// All the paths for custom classes from public dir
paths: {
'FV' : 'javascript/project-name/app/'
},

.
.

Wolfie
9 Feb 2012, 12:27 PM
I think that Zend Framework can't find js classes, solution:

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

Ext.application({
name: 'FV',


// All the paths for custom classes from public dir
paths: {
'FV' : 'javascript/project-name/app/'
},

.
.


Allright man !!

It did the trick :)

But I am woundering about one thing

I was trying to use :



Ext.Loader.setPath('app', 'path/to/app')


with appFolder property in Ext.apllication

And it wasn't working,

I dont understand why u use 'paths' property that even doesn't exists in documentation ?

lukasz.sudol
10 Feb 2012, 12:16 AM
In the sencha examples they are using property 'paths'. That helps with for example: with controllers.

stewardsencha
28 Feb 2012, 2:32 PM
I am having this issue as well.
It is not specific to Zend. CodeIgnitor also has "segment based" or "SEO friendly" urls.
Almost any cms has the issue.

Here is some sample url to access the b method of the a controller with 1 arg:

mysite.com/index.php/acontroller/baction/arg1name/arg1value

Most websites have an htaccess file to remove "index.php" from the url.

Using query strings:

mysite.com/index.php?c=acontroller&method=bmethod&arg1name=arg1value

This controller takes the argument, fetches some data, builds some json, and spits out an extjs app.

Say your app is at mysite.com/myapps/whatever/jigger/app.js

By messing with the relative paths in the script tags and Loader path configs, I can get most of it to work some of the time.

But sooner or later the loader tries to access index.php/acontroller/bmethod/arg1name/jigger/controller/foocontroller.js

The path "myapps/whatever" got eaten by the extjs loader.

The webserver (?) prepends the path with index.php/acontroller/bmethod/arg1/name/

It takes everything up to the trailing slash as the prefix.

This is one of those problems that won't sit still. I solve it once and it's back a week later.

I don't see an issue with extjs. It send a correct relative path to loadScript, honouring the path config. It's the durn webserver than puts all the extra goo in there.

This is my apache/web ignorance. I am glad others are also hitting it.

Ultimately I can't reliably implement any extjs MVC except the standard HTML SPA Hello World which sits at the webroot. Integrating extjs into an existing system with url/controller/seo rules is baffling me.

I wish I could explain it better. I only get fleeting glimpses.
Obviously the smart guys have figured it out...