-/*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.onReady(function() {\r
- Ext.QuickTips.init();\r
- \r
- // create some portlet tools using built in Ext tool ids\r
- var tools = [{\r
- id:'gear',\r
- handler: function(){\r
- Ext.Msg.alert('Message', 'The Settings tool was clicked.');\r
- }\r
- },{\r
- id:'close',\r
- handler: function(e, target, panel){\r
- panel.ownerCt.remove(panel, true);\r
- }\r
- }];\r
-\r
- var viewport = new Ext.Viewport({\r
- layout:'fit',\r
- items:[{\r
- xtype: 'grouptabpanel',\r
- tabWidth: 130,\r
- activeGroup: 0,\r
- items: [{\r
- mainItem: 1,\r
- items: [{\r
- title: 'Tickets',\r
- layout: 'fit',\r
- iconCls: 'x-icon-tickets',\r
- tabTip: 'Tickets tabtip',\r
- style: 'padding: 10px;',\r
- items: [new SampleGrid([0,1,2,3,4])]\r
- }, \r
- {\r
- xtype: 'portal',\r
- title: 'Dashboard',\r
- tabTip: 'Dashboard tabtip',\r
- items:[{\r
- columnWidth:.33,\r
- style:'padding:10px 0 10px 10px',\r
- items:[{\r
- title: 'Grid in a Portlet',\r
- layout:'fit',\r
- tools: tools,\r
- items: new SampleGrid([0, 2, 3])\r
- },{\r
- title: 'Another Panel 1',\r
- tools: tools,\r
- html: Ext.example.shortBogusMarkup\r
- }]\r
- },{\r
- columnWidth:.33,\r
- style:'padding:10px 0 10px 10px',\r
- items:[{\r
- title: 'Panel 2',\r
- tools: tools,\r
- html: Ext.example.shortBogusMarkup\r
- },{\r
- title: 'Another Panel 2',\r
- tools: tools,\r
- html: Ext.example.shortBogusMarkup\r
- }]\r
- },{\r
- columnWidth:.33,\r
- style:'padding:10px',\r
- items:[{\r
- title: 'Panel 3',\r
- tools: tools,\r
- html: Ext.example.shortBogusMarkup\r
- },{\r
- title: 'Another Panel 3',\r
- tools: tools,\r
- html: Ext.example.shortBogusMarkup\r
- }]\r
- }] \r
- }, {\r
- title: 'Subscriptions',\r
- iconCls: 'x-icon-subscriptions',\r
- tabTip: 'Subscriptions tabtip',\r
- style: 'padding: 10px;',\r
- layout: 'fit',\r
- items: [{\r
- xtype: 'tabpanel',\r
- activeTab: 1,\r
- items: [{\r
- title: 'Nested Tabs',\r
- html: Ext.example.shortBogusMarkup\r
- }] \r
- }] \r
- }, {\r
- title: 'Users',\r
- iconCls: 'x-icon-users',\r
- tabTip: 'Users tabtip',\r
- style: 'padding: 10px;',\r
- html: Ext.example.shortBogusMarkup \r
- }]\r
- }, {\r
- expanded: true,\r
- items: [{\r
- title: 'Configuration',\r
- iconCls: 'x-icon-configuration',\r
- tabTip: 'Configuration tabtip',\r
- style: 'padding: 10px;',\r
- html: Ext.example.shortBogusMarkup \r
- }, {\r
- title: 'Email Templates',\r
- iconCls: 'x-icon-templates',\r
- tabTip: 'Templates tabtip',\r
- style: 'padding: 10px;',\r
- html: Ext.example.shortBogusMarkup\r
- }]\r
- }]\r
- }]\r
- });\r
-});\r
+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.tip.QuickTipManager.init();
+
+ // create some portlet tools using built in Ext tool ids
+ var tools = [{
+ type:'gear',
+ handler: function(){
+ Ext.Msg.alert('Message', 'The Settings tool was clicked.');
+ }
+ },{
+ type:'close',
+ handler: function(e, target, panel){
+ panel.ownerCt.remove(panel, true);
+ }
+ }];
+
+ Ext.create('Ext.Viewport', {
+ layout:'fit',
+ items:[{
+ xtype: 'grouptabpanel',
+ activeGroup: 0,
+ items: [{
+ mainItem: 1,
+ items: [{
+ title: 'Tickets',
+ iconCls: 'x-icon-tickets',
+ tabTip: 'Tickets tabtip',
+ //border: false,
+ xtype: 'gridportlet',
+ height: null
+ },
+ {
+ xtype: 'portalpanel',
+ title: 'Dashboard',
+ tabTip: 'Dashboard tabtip',
+ border: false,
+ items: [{
+ flex: 1,
+ items: [{
+ title: 'Portlet 1',
+ html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
+ },{
+
+ title: 'Stock Portlet',
+ items: {
+ xtype: 'chartportlet'
+ }
+ },{
+ 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',
+ activeTab: 1,
+ items: [{
+ title: 'Nested Tabs',
+ html: Ext.example.shortBogusMarkup
+ }]
+ }]
+ }, {
+ title: 'Users',
+ iconCls: 'x-icon-users',
+ tabTip: 'Users tabtip',
+ style: 'padding: 10px;',
+ html: Ext.example.shortBogusMarkup
+ }]
+ }, {
+ expanded: true,
+ items: [{
+ title: 'Configuration',
+ iconCls: 'x-icon-configuration',
+ tabTip: 'Configuration tabtip',
+ style: 'padding: 10px;',
+ html: Ext.example.shortBogusMarkup
+ }, {
+ title: 'Email Templates',
+ iconCls: 'x-icon-templates',
+ tabTip: 'Templates tabtip',
+ style: 'padding: 10px;',
+ 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'}]
+ }
+ }]
+ }]
+ }]
+ });
+});