PDA

View Full Version : In ExtJS 4.2.2, how can I create a floating window initially rendered off-screen?



xjscrafter
24 Jun 2014, 4:07 PM
I want a notifications window to be 200px high, and width of application.

Initially it should render just below the app, so it is basically off-screen.

When a "notification" is received by the app, I want this notifications window to move up from the bottom into view.

After 20 seconds I will move the window back down out of view.

Currently I am using Ext.window.Window, but when the window is hidden, a scroll bar displays, because it is not hidden, just positioned off screen.

What is the best way to achieve what I want? Should it be hidden and positioned off-screen, and then when I want it to display, animate the showing and moving of the window?

I don't necessarily need to use a window, it could be a panel or container.

xjscrafter
25 Jun 2014, 8:31 AM
Can anyone provide insight on this?

Mthor
25 Jun 2014, 4:51 PM
why not just use a border layout and have the bottom panel do your magic

xjscrafter
25 Jun 2014, 6:44 PM
I need it to be off-screen unless I want to display it.

xjscrafter
26 Jun 2014, 8:53 AM
The following code seems like a good start. If you click the button repeatedly the bottom container moves upward into view.

But is this a fundamentally flawed approach, because I am setting the width and height of UI containers manually using document.body.clientWidth and clientHeight?

At least now you can see what I am trying to achieve.


Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
autoScroll: false,
items: [{
xtype: 'container',
autoScroll: false,
layout: {
type: 'vbox',
align: 'start'
},
setSizes: function(newWidth, newHeight) {
this.down('#topContainer').setWidth(newWidth);
this.down('#middleContainer').setHeight(newHeight - 60);
this.down('#middleContainer').setWidth(newWidth);
this.down('#middleCenterContainer').setWidth(newWidth-100);
this.down('#bottomContainer').setWidth(newWidth);
},
listeners: {
afterrender: function(){
Ext.EventManager.onWindowResize(function(newWidth, newHeight) {
this.setSizes(newWidth, newHeight);
}, this);
this.setSizes(document.body.clientWidth, document.body.clientHeight);
}
},
items: [{
xtype: 'container',
itemId: 'topContainer',
autoScroll: false,
height: 60,
border: 5,
style: {
borderStyle: 'solid',
borderWidth: 10,
backgroundColor: '#999999'
},
items: [{
xtype: 'label',
text: 'top container'
}, {
xtype: 'button',
text: 'Notification',
handler: function(){
Ext.getCmp('bottomContainer').setY(Ext.getCmp('bottomContainer').getY() - 10);
}
}]
}, {
xtype: 'container',
itemId: 'middleContainer',
layout: {
type: 'hbox',
align: 'stretch'
},
autoScroll: false,
items: [{
xtype: 'container',
itemId: 'middleLeftContainer',
autoScroll: false,
width: 100,
border: 5,
style: {
borderStyle: 'solid',
borderWidth: 10,
backgroundColor: '#00ff00'
},
items: [{ xtype: 'label', text: 'middle left container' }]
}, {
xtype: 'container',
itemId: 'middleCenterContainer',
autoScroll: false,
border: 5,
style: {
borderStyle: 'solid',
borderWidth: 10,
backgroundColor: '#0000ff'
},
items: [{ xtype: 'label', text: 'middle center container' }]
}]
}, {
xtype: 'container',
id: 'bottomContainer',
autoScroll: false,
height: 150,
border: 5,
style: {
borderStyle: 'solid',
borderWidth: 10,
backgroundColor: '#ff0000'
},
items: [{
xtype: 'label',
text: 'bottom container'
}]
}]
}]
});
});

Phil Guerrant
26 Jun 2014, 9:25 AM
Have a look at Ext.window.Toast - it might be just what you need :)

Phil Guerrant
26 Jun 2014, 9:28 AM
Have a look at Ext.window.Toast - it might be just what you need :)

Oops, I forgot this is the 4.x forum. The Toast component was introduced in 5.0.

You might find this user extension useful http://www.sencha.com/forum/showthread.php?145503-Ext.ux.window.Notification

xjscrafter
26 Jun 2014, 9:31 AM
Great info. Thanks very much. I looked at the Notification feature, but it was a bit complex for me at this time.

Is the approach I am using in my updated code reasonable?