Portal How to get state of individual portal [Archive]

AtulDawkhare

12 Apr 2012, 10:55 PM

I am using Extjs 4 portal example.

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

I want to save the state of the individual portal.

1] After drag - the new column position
2] after close - portal from which column close
etc

Please suggest how can I get this information.

tvanzoelen

13 Apr 2012, 2:01 AM

You could implement the dragend event in the draggable property, put a listener there for the componentDragger. See http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.ComponentDragger

The doClose is also there. Only thing to do ia create a saveState function

Ext.define('Ext.app.Portlet', {
extend: 'Ext.panel.Panel',
alias: 'widget.portlet',
layout: 'fit',
anchor: '100%',
frame: true,
closable: true,
collapsible: true,
animCollapse: true,
draggable: {
moveOnDrag: false
listeners: {
dragend: {
fn: saveState
}
}
},
cls: 'x-portlet',

// Override Panel's default doClose to provide a custom fade out effect
// when a portlet is removed from the portal
doClose: function() {
if (!this.closing) {

saveState();
this.closing = true;
this.el.animate({
opacity: 0,
callback: function(){
this.fireEvent('close', this);
this[this.closeAction]();
},
scope: this
});
}
}
});

AtulDawkhare

13 Apr 2012, 3:44 AM

Thanks for the reply.

But I am not getting where to write this code?

I mean my html is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portal Layout Sample</title>

<link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="portal.css" />

<script type="text/javascript" src="../js/ext-core-debug.js"></script>


<script type="text/javascript" src="../js/examples.js"></script>
<script type="text/javascript" src="classes.js"></script>

<script type="text/javascript" src="portal.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.app.Portal');
});
</script>
</head>
<body>
<span id="app-msg" style="display:none;"></span>
</body>
</html>

and in the portal.js

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);
}
}];
},
.
.
.
.

So I tried to write in the portal.js but it was showing me blank page.
as i tried to extend with panel instead of Viewport.

Please suggest where exactly I need to write this code.

tvanzoelen

13 Apr 2012, 3:49 AM

Just modify the Portlet.js in examples/portal/classes directory.

That was the file I posted

AtulDawkhare

13 Apr 2012, 4:55 AM

Sorry to say but still It didnt work for me.

Let me tell the steps that I have followed

1] Changed the portal.js from the classes folder
2] Changed the classes.js [I dont think the is the correct way, but my code works after this changes ]
3] added saveState function in the portal.html

function saveState(){
alert('ss');
}

when I drag the portlet from one place/ column to other I should get alert as 'ss' But I am not getting it.

I have added my complete working code here.

Please suggest what is wrong here.

AtulDawkhare

13 Apr 2012, 10:44 PM

Please suggest me what is missing here.

badallen

20 Apr 2012, 1:56 PM

Please suggest me what is missing here.

Hi,

This is how I get it to work:

Ext.define('Ext.ctWidget.PortalPanel', {
extend: 'Ext.Panel',
position: 0,
layout: 'fit',
anchor: '100%',
frame: true,
closable: true,
collapsible: true,
animCollapse: true,
draggable: {
moveOnDrag: false,
endDrag: function (e) {
this.panel.fireEvent('endDrag',
{
event: e,
position: this.panel.position
});
}
}
});

I attached to the endDrag event.

AtulDawkhare

9 May 2012, 6:27 AM

Hi

Thanks for the reply, I was not able to implement this so didn't reply on this.

I got the alert 'ss' as show in the BOLD below

Ext.define("Ext.app.Portlet", {
extend : "Ext.panel.Panel",
alias : "widget.portlet",
layout : "fit",
anchor : "100%",
frame : true,
closable : false,
collapsible : false,
animCollapse : true,
draggable: {
moveOnDrag: false,
endDrag: function (e) {
alert('ss');
this.panel.fireEvent('endDrag',
{
event: e,
position: this.panel.position,

});
}
}

But I am not getting how to get the new Drag position? i.e. if I am in first column then moved my portlet to second position, How will I get the new position , i.e. Second column may be first position.

Please suggest what can be done here.