How to integrate Extjs Widgets into JQPortal
- First edit the header.tpl file that you will find in the includes/templates folder.
- There add the reference to the extjs environment in the head tag
<script type='text/javascript' charset="utf-8" src="http://cdn.sencha.io/ext-4.0.2/ext-all.js"></script> - Then add a reference to the css file
<link rel="stylesheet" rev="stylesheet" type="text/css" href="css/ext-all.css" / > - Make sure the css code doesn't conflict with the jqbuilder css code by adding a custom class name that you will later use in your portlet.
For example
let's say you decided to use ext-widget as your custom class:
table{border-collapse:collapse;border-spacing:0}
will become:
.ext-widgettable{border-collapse:collapse;border-spacing:0} - Make sure the css code doesn't conflict with the jqbuilder css code by adding a custom class name that you will later use in your portlet.
For example
if you copied the themes folder in the css/ext folder then
: background-image:url('../../resources/themes/images/default/shared/shadow.png')
becomes:
background-image:url('ext/themes/images/default/shared/shadow.png') - Now follow these steps to build a Custom Extjs widget. you can add an Extjs Tab widget
- Add the meta-data in the jportal_portlets table:
INSERT INTO `jportal_portlets` (`name`,`portlet_data`,`date`)
VALUES (
'Ext Tab Widget',
'{
"title": "Ext Tab Widget",
"class": "",
"functionality": "Widgets",
"type": "myExtTabWidget",
"portletActions": { "remove": true, "info": "Ext Tab Widget" },
"widgetSource": "js/widgets/ext.js"
}',
NOW( )
);
I am going to use the tabs example provided by Extjs. First add the html code:
Ext.require('Ext.tab.*');
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs1',
width: 450,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [{
contentEl:'script',
title: 'Short Text',
closable: true
},{
contentEl:'markup',
title: 'Long Text'
}]
});
// second tabs built from JS
var tabs2 = Ext.createWidget('tabpanel', {
renderTo: 'tabs2',
activeTab: 0,
width: 600,
height: 250,
plain: true,
defaults :{
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Normal Tab',
html: "My content was added during construction."
},{
title: 'Ajax Tab 1',
loader: {
url: 'info.html',
contentType: 'html',
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
},{
title: 'Ajax Tab 2',
loader: {
url: 'info.html',
contentType: 'html',
autoLoad: true,
params: 'foo=123&bar=abc'
}
},{
title: 'Event Tab',
listeners: {
activate: function(tab){
alert(tab.title + ' was activated.');
}
},
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled: true,
html: "Can't see me cause I'm disabled"
}
]
});
});
