I have aded extjs window as follows,
var popupWindow = me.popupWindow = new Ext.window.Window({
autoHeight: true,
itemId: 'popup',
cls: 'premier-window',
width: 550,
height: 280,
layout: {
pack: 'center'
},
shadow: false,
modal: true,
frame: false,
resizable: false,
isPremierPanel: true,
usePremierCloseButton: true,
closeAction: 'hide',
dockedItems: [
{
dock: 'bottom',
xtype: 'toolbar',
itemId: 'button_toolbar',
style: 'background:#F5F3F4;broder:0',
items: [
{
dock: 'bottom',
xtype: 'button',
itemId: 'btnOk',
style: 'margin-left:230px;background:#D3D3D3;',
text: 'OK',
width: 70,
handler: me.okClicked,
scope: me
}
]
}
],
style: 'background-color:#F5F3F4; font-size:11px; padding-bottom:10px; margin-left:10px;',
html: '<div style="padding-left: 7px;padding-right: 7px;padding-top: 7px;font-size:12px;">'
});
popupWindow.show();
popupWindow.setTitle('Restricted Access');
How to customize closeAction functionality of an extjs window?
I want to do something other than destroying or hiding the window when clicked on default close button of a window.
listeners:{
beforeclose:function() {
if(I_DONT_WANT_TO_CLOSE) {
doSomethingAndDontCloseTheWindow()
return false;
}
}
close:function() {
doSomethingAfterWindowHasBeenClosed();
}
}
beforeclose in the docs.
close in the docs.
Related
I have a panel which contains items in its body, and I would like the panel itself to be draggable, but only when the user drags the panelheader. (I don't want the user to be able to drag the panel by clicking and dragging in the body). Is there a simple way to do this?
Here is my code for creating the panel:
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: true,
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
EDIT: I was able to figure out the problem and correct it. The solution has to do with the handle property of the Ext.drag.Source object. You have to specify the CSS handle of the element you want to be able to initiate the drag. In My case, the corrected code is as follows.
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: {handle: 'x-panelheader'}, // <- This is the part that needed to be changed
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
I need some help about a form with a textarea field.
My problem.
I have a simple Ext.window in which I have put an Ext.FormPanel. In this Ext.FormPanel I have put an Ext.form.FieldSet in which I have put some fields. One of these field is a textarea (Ext.form.TextArea),
Now, my objective is to render responsive this textarea when I resize the Ext.window.
It is possible to obtain this behavior?
This is my current code:
Window in which reside the Ext.FormPanel
var win = new Ext.Window({
id:'winTest',
layout:'fit',
modal:true,
title:'Title',
width:590,
height:300,
closeAction:'close',
plain: true,
autoScroll: true,
items:[form],
listeners: {
'beforeclose': function (p) {
}
}
});
Ext.FormPanel in which reside the Ext.form.FieldSet
var form = new Ext.FormPanel({
id:'FormTest',
layout : 'form',
width:510,
labelAlign: 'right',
labelWidth: 120,
autoScroll:true,
bodyStyle:'padding:2px;background-color:#E9EFF8;',
monitorValid:true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad:true,
items: [fieldset]
});
Fieldset in which I have put some fileds
var fieldset = Ext.form.FieldSet({
id:'fsTest',
autoHeight: true,
defaultType: 'textfield',
items:[.....,textarea]
//boxMaxWidth:450
//border:true
})
Textarea putted in the fieldset (to shorted, I have reported only the textarea)
var textarea = new Ext.form.TextArea({
id:'textareaTest',
name:'TextArea',
fieldLabel:'Insert',
hidden:false,
width:310,
height:60,
maxLength:500,
allowBlank: true
});
Thanks for any precious help.
Lorenzo.
It should be like this:-
var win = new Ext.Window({
id: 'winTest',
layout: 'vbox',
modal: true,
title: 'Title',
width: 590,
height: 300,
closeAction: 'close',
plain: true,
autoScroll: true,
items: [{
xtype: 'form',
id: 'FormTest',
flex: 1,
layout: 'vbox',
width: 510,
labelAlign: 'right',
labelWidth: 120,
autoScroll: true,
bodyStyle: 'padding:2px;background-color:#E9EFF8;',
monitorValid: true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad: true,
items: [{
xtype: 'fieldset',
id: 'fsTest',
//autoHeight: true,
flex: 1,
layout: 'vbox',
//defaultType: 'textfield',
items: [{
xtype: 'textarea',
flex: 1,
id: 'textareaTest',
name: 'TextArea',
fieldLabel: 'Insert',
hidden: false,
width: 310,
//height: 60,
maxLength: 500,
allowBlank: true
}]
//boxMaxWidth:450
//border:true
}]
}]
}).show();
Please have a look at this example
I have an iframe (fit in a window) to load before showing it.
When I do :
window.show();
window.hide();
The window is not hidden. "window.show()" is used to render the iframe.
The loading of the iframe is about 10 sec.
How can I render the iframe without display the window?
My window :
var win = Ext.create('Ext.window.Window', {
height: '95%',
width: '95%',
modal: true,
header: false,
hideMode:'visibility',
constrain: true,
resizable:false,
itemId:'winIframeItemId....',
id:'winIframeId....',
baseCls: 'x-window-....',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'middle',
pack: 'end'
},
items: [{
xtype: 'button',
cls: 'x-button-close-window...',
height: 34,
width: 34
...
}]
}, {
xtype: 'container',
itemId:'conIframeWindow',
layout:"fit",
flex: 1,
items: [{
xtype: 'component',
autoScroll: true,
itemId:'IframeTest',
baseCls: 'x-component-w....',
autoEl: {
tag: "iframe",
domain: '....',
frameborder: 0,
src: url
}
}]
}]
});
Windows and menus are typically rendered to the document body. I was able to use the Ext.Component.renderTo configuration to render windows and menus without displaying them.
https://fiddle.sencha.com/#view/editor&fiddle/2f5h
// Render a hidden window.
var window = Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),
title: 'Window'
});
// Render a hidden menu.
var menu = Ext.create('Ext.button.Button', {
menu: {
items: [{
text: 'Item'
}],
renderTo: Ext.getBody()
},
text: 'Button'
});
I have an item like so (JSFiddle Demo):
{
region: 'west',
title: 'Instead of toolbar',
collapsible: true,
width: 250,
tbar: [{
xtype: 'button',
text: 'Button',
style: {
background: 'green'
},
handler: function() {}
}]
}
I want my tbar instead of the title like (1->2)
I tried to remove title but it's not working. How to do that thanks :).
Get rid of the header and add the same collapse tool to the toolbar:
{
region: 'west',
collapsible: true,
header: false,
width: 250,
tbar: [
{
xtype: 'button',
text: 'Button',
style: {
background: 'green'
},
handler: function (){}
},
'->',
{
type: 'left',
xtype: 'tool',
handler: function(t) {
this.up('panel').collapse();
}
}
]
}
I am using ExtJS HTMLEditor and set the properties as follows-
{ xtype: "htmleditor", width: 500, height: 250}
While entering the text, after reaching the specified height, the toolbar gets disappeared.
I tried removing the height and setting autoHeight: true but in both cases the HTML editor does not fit to the window (HTMLEditor is inside Ext.form.FormPanel).
Anyone having idea to solve it.
This is my code
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'This is Title',
resizable: false,
modal: true,
height: 300,
width: 500,
layout: 'fit',
closeAction: 'hide',
items: [
new Ext.form.FormPanel({
border: false,
autoHeight: true,
items: [
{ allowBlank: false, xtype:
"htmleditor", height: 250, width: 600, anchor:'100%'}
]
})
],
buttons: [
{text: 'Ok' },
{text: 'Cancel'}
]
}).show();
});
I have solved the problem- Added layout: 'fit' to Formpanel
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'This is Title',
resizable: false,
modal: true,
height: 300,
width: 500,
layout: 'fit',
closeAction: 'hide',
items: [
new Ext.form.FormPanel({
border: false,
layout: 'fit', // This fixed the issue
items: [
{ allowBlank: false,
xtype: "htmleditor",
height: 250,
width: 600
}
]
})
],
buttons: [
{text: 'Ok' },
{text: 'Cancel'}
]
}).show();
});