PDA

View Full Version : Load an ExtJS application in Joomla



Kibui
22 Aug 2011, 2:13 AM
I am trying to load an Ext JS application in joomla and the css seems to be colliding... whats the best way to load/display it?

christocracy
22 Aug 2011, 4:25 AM
Load your app in an iframe.

Kibui
22 Aug 2011, 4:32 AM
I used an iframe at first but its not filling the screen properly.

christocracy
22 Aug 2011, 6:58 AM
It's much easier to get an iframe to size as required than it is to attempt to boot an ExtJS app in the environment of a CMS.

Kibui
22 Aug 2011, 11:38 PM
@christocracy the problem with the iframe is that it is not allowing me to take advantage of the other joomla cms features.

The application is supposed to visualize maps and map data that is queried from the cms.

skirtle
23 Aug 2011, 12:45 AM
You might have some luck with the scoped CSS:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext-property-scopeResetCSS

I've found it to be a little bit buggy but theoretically it should stop ExtJS from interfering with the rest of your page. In practice I found the bugs in the scoped CSS were pretty easy to workaround with a little bit of tweaking.

Kibui
23 Aug 2011, 5:10 AM
Example: Help me load this into a div. (id="ja-content-main")

Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'anchor',
autoEl: 'center',

items: [
{
title: 'Hello Ext',
html : 'This is to test Ext JS.'
}
]
});
}
});

skirtle
23 Aug 2011, 5:48 PM
Please use code tags when you post code (# button on the editor toolbar).

You can't use a viewport like this. A viewport always fills the browser window and cannot be rendered into a specific HTML element. Try switching it to Ext.container.Container and add a config option of renderTo: 'ja-content-main'. You may also need to set a width and height.

I would also strongly advise against having autoEl: 'center'.

Kibui
24 Aug 2011, 12:16 AM
Thanks @skirtle

With this sample code I can now modify and try loading my application in Joomla using the Jumi plugin (http://extensions.joomla.org/extensions/edition/custom-code-in-content/1023)





Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Container', {
layout: 'anchor',
renderTo: 'ja-content-main',

items: [
{
title: 'Hello Ext',
html : 'This is to test Ext JS.'
}
]
});
}
});