PDA

View Full Version : Extjs 4 Portal Custom changes



AtulDawkhare
12 Apr 2012, 8:27 AM
I am referring ExtJS 4 portal example.

http://docs.sencha.com/ext-js/4-0/#!/example/portal/portal.html

I want to Create something like , adding toolbar just above to the "Ext Portal" text as show in the example
Or something like as shown in the below image.

33932
It is possible to do that ?
If it is possible Please suggest best way to achieve this.

Please suggest How to do this ?

scottmartin
12 Apr 2012, 9:00 AM
Simply create the toolbar and add it like any other item:

toolbar create from API docs, added to portal.js (~L:115) per screenshot
33935

Regards,
Scott.

AtulDawkhare
12 Apr 2012, 9:23 PM
Thanks for the Reply.

But I want create just above the text "Ext Portal"

i.e.

33964

As shown in above image, Just above the "Ext Portal".

Please suggest what changes that I need to do for this?

scottmartin
13 Apr 2012, 6:00 AM
Create the toolbar and add it as the first item in your north region:




var mytoolbar = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
items: [
{
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});

... ~L: 43

id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [

mytoolbar, // <-- new toolbar

{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{



Regards,
Scott.

34003

AtulDawkhare
13 Apr 2012, 6:43 AM
I have followed your suggestion still I am getting error



Uncaught TypeError: Cannot call method 'substring' of undefined



Here is my code



Ext.define('Ext.app.Portal', {


extend: 'Ext.container.Viewport',


uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],


getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Working...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
var mytoolbar = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
items : [
{
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});

Ext.apply(this,
{
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [
mytoolbar,
{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html:'Ext',
}


Please suggest what is missing here ?

scottmartin
13 Apr 2012, 7:08 AM
Create your toolbar at the very top of your code, above "Ext.define('Ext.app.Portal', {"

Scott.

AtulDawkhare
13 Apr 2012, 10:42 PM
Even through I created toolbar at the top still I got the same error.

Do I need to add anything else ?

Now I am getting





Uncaught TypeError: Cannot call method 'substring' of undefined



ext-core-debug.js:8460 (http://localhost:9001/ExtJS/Grid/js/ext-core-debug.js)Uncaught Ext.Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.app.Portal




I tried to add




Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', '/ExtJS/Grid/js/ux');Ext.require([ 'Ext.panel.*', 'Ext.fx.*', 'Ext.toolbar.*', 'Ext.button.*', ]);


My final code is as below




var mytoolbar = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
items : [
{
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});
Ext.define('Ext.app.Portal', {


extend: 'Ext.container.Viewport',


uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],


getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Working...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';



Ext.apply(this,
{
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [
mytoolbar,



I am really not understanding what is missing here. Please suggest me what is the problem here.

scottmartin
14 Apr 2012, 6:58 AM
I am not sure where the problem is .. Here are my steps and final code: (changes in bold)

ExtJS4-RC3

/examples/portal/portal.js




/**
* @class Ext.app.Portal
* @extends Object
* A sample portal layout application class.
*/
// TODO: Fill in the content panel -- no AccordionLayout at the moment
// TODO: Fix container drag/scroll support (waiting on Ext.lib.Anim)
// TODO: Fix Ext.Tool scope being set to the panel header
// TODO: Drag/drop does not cause a refresh of scroll overflow when needed
// TODO: Grid portlet throws errors on destroy (grid bug)
// TODO: Z-index issues during drag

var mytoolbar = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
items: [
{
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});

Ext.define('Ext.app.Portal', {

extend: 'Ext.container.Viewport',
//requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],

getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Loading...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},

initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';

Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [

mytoolbar,

{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout:{
type: 'accordion',
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
});
this.callParent(arguments);
},

onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},

showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();

this.msgId = msgId;
el.update(msg).show();

Ext.defer(this.clearMsg, 3000, this, [msgId]);
},

clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});


Scott.

AtulDawkhare
14 Apr 2012, 7:43 AM
What do you mean by "ExtJS4-RC3" ??

Do I need to execute some command ?

and I am using Ext 4.0.7 version

scottmartin
15 Apr 2012, 7:31 AM
RC3 is the version of ExtJS4 that I am using:
http://www.sencha.com/forum/showthread.php?194793-Ext-JS-4.1-RC3-Now-Available

I will test this in 4.07, but I highly recommend you upgrade. GA is just around that corner and their are many fixes.

Regards,
Scott.

madhans
21 May 2012, 1:41 AM
hi i want to maximize each widget in exrt portal by double clicking the widget any one having the idea