PDA

View Full Version : Simple dialog window in Ext JS 4



masm
22 Jan 2012, 10:23 PM
Is there in Ext JS 4 something similar to jQuery Dialog window - ability to pop up custom div element which will behave like dialog window? I want to rid of title bar, close button and border.

icemanovich
22 Jan 2012, 10:35 PM
May be MessageBox (http://docs.sencha.com/ext-js/4-0/#!/example/message-box/msg-box.html) can help you. Otherwise you can build you custom panel dialog.
(http://docs.sencha.com/ext-js/4-0/#!/example/message-box/msg-box.html)

masm
22 Jan 2012, 11:13 PM
Unfortunately MessageBox isn't an option - it behaves the same way as Window, but additionally provides handy stuff typical for MessageBoxes (buttons, messages, etc).

Not aware about custom panel dialog approach. Is it possible to inherit all popup features and behavior from Ext.window.Window and at the same time completely override look and feel? Could you provide any links to samples?

Anyway, I think it's easier manipulate *Cls-like properties (baseCls, bodyCls, etc.) to achieve completely custom UI, but it's the last line of defense in my case.

icemanovich
23 Jan 2012, 12:10 AM
If you want dialog window you should create Ext.window with properties "modal: true"

Ext.define('confirmUpdatePanel', {
extend: 'Ext.window.Window',

id: 'confirmWindow',
border: 0,
height: 142,
width: 270,
resizable: false,
modal: true,
layout: {
type: 'fit'
},
closable: false,
title: 'Login',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
...
}
]
});

me.callParent(arguments);
}
});

For additional functionality use Form in "items" section where you can add buttons, checkboxes and other fields.
Unfortunately you can't override *Cls for MessageBox (e.g.), because it will affect to other fields in your main form.

jay@moduscreate.com
23 Jan 2012, 12:42 PM
If you want dialog window you should create Ext.window with properties "modal: true"

Ext.define('confirmUpdatePanel', {
extend: 'Ext.window.Window',

id: 'confirmWindow',
border: 0,
height: 142,
width: 270,
resizable: false,
modal: true,
layout: {
type: 'fit'
},
closable: false,
title: 'Login',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
...
}
]
});

me.callParent(arguments);
}
});

For additional functionality use Form in "items" section where you can add buttons, checkboxes and other fields.
Unfortunately you can't override *Cls for MessageBox (e.g.), because it will affect to other fields in your main form.


Just a small nit, constructors should be named with a Capital letter.