-/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+ 'Ext.Viewport',
+ 'Ext.tip.QuickTipManager',
+ 'Ext.tab.Panel',
+ 'Ext.ux.GroupTabPanel',
+ 'Ext.grid.*'
+]);
+
Ext.onReady(function() {
- Ext.QuickTips.init();
+ Ext.tip.QuickTipManager.init();
// create some portlet tools using built in Ext tool ids
var tools = [{
- id:'gear',
+ type:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
- id:'close',
+ type:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];
- var viewport = new Ext.Viewport({
+ Ext.create('Ext.Viewport', {
layout:'fit',
items:[{
xtype: 'grouptabpanel',
- tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 1,
items: [{
title: 'Tickets',
- layout: 'fit',
iconCls: 'x-icon-tickets',
tabTip: 'Tickets tabtip',
- style: 'padding: 10px;',
- items: [new SampleGrid([0,1,2,3,4])]
+ //border: false,
+ xtype: 'gridportlet',
+ height: null
},
{
- xtype: 'portal',
+ xtype: 'portalpanel',
title: 'Dashboard',
tabTip: 'Dashboard tabtip',
- items:[{
- columnWidth:.33,
- style:'padding:10px 0 10px 10px',
- items:[{
- title: 'Grid in a Portlet',
- layout:'fit',
- tools: tools,
- items: new SampleGrid([0, 2, 3])
+ border: false,
+ items: [{
+ flex: 1,
+ items: [{
+ title: 'Portlet 1',
+ html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
},{
- title: 'Another Panel 1',
- tools: tools,
- html: Ext.example.shortBogusMarkup
- }]
- },{
- columnWidth:.33,
- style:'padding:10px 0 10px 10px',
- items:[{
- title: 'Panel 2',
- tools: tools,
- html: Ext.example.shortBogusMarkup
- },{
- title: 'Another Panel 2',
- tools: tools,
- html: Ext.example.shortBogusMarkup
- }]
- },{
- columnWidth:.33,
- style:'padding:10px',
- items:[{
- title: 'Panel 3',
- tools: tools,
- html: Ext.example.shortBogusMarkup
+
+ title: 'Stock Portlet',
+ items: {
+ xtype: 'chartportlet'
+ }
},{
- title: 'Another Panel 3',
- tools: tools,
- html: Ext.example.shortBogusMarkup
+ title: 'Portlet 2',
+ html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
}]
- }]
+ }]
}, {
title: 'Subscriptions',
iconCls: 'x-icon-subscriptions',
tabTip: 'Subscriptions tabtip',
style: 'padding: 10px;',
+ border: false,
layout: 'fit',
items: [{
xtype: 'tabpanel',
iconCls: 'x-icon-templates',
tabTip: 'Templates tabtip',
style: 'padding: 10px;',
- html: Ext.example.shortBogusMarkup
+ border: false,
+ items:{
+ xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
+ id: 'form-panel',
+ labelWidth: 75,
+ title: 'Form Layout',
+ bodyStyle: 'padding:15px',
+ labelPad: 20,
+ defaults: {
+ width: 230,
+ labelSeparator: '',
+ msgTarget: 'side'
+ },
+ defaultType: 'textfield',
+ items: [{
+ fieldLabel: 'First Name',
+ name: 'first',
+ allowBlank:false
+ },{
+ fieldLabel: 'Last Name',
+ name: 'last'
+ },{
+ fieldLabel: 'Company',
+ name: 'company'
+ },{
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }
+ ],
+ buttons: [{text: 'Save'},{text: 'Cancel'}]
+ }
}]
}]
}]