I want to display a modal info window by clicking a button in a toolbar. I dont know why, but nothing happens when i click the button.
heres my code:
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'button',
text: 'Infos anzeigen',
handler: function(){
var panel = new Ext.Panel({
modal: true,
left: 0,
top: 0,
width: 220,
height: 356,
layout: 'fit',
html: 'Testing'
});
panel.show();
}
}]
You're probably looking for an Ext.Window:
var win = new Ext.Window({
modal: true,
left: 0,
top: 0,
width: 220,
height: 356,
layout: 'fit',
html: 'Testing'
});
win.show();
Related
I want to open a panel window under the button i click which is located in the header. The panel should be displayed under the button (aligned with the header) : i try :
{
xtype:'button',
height: '100%',
text: Strings.Notifications,
glyph: 'xf142#FontAwesome',
reference: 'settingsNotificationsButton',
cls :'headerButtonsCls',
listeners: {
click: function () {
new Ext.form.Panel({
width: 200,
height: 200,
title: 'Foo',
floating: true,
closable: false
}).show();
}
}
}
But the above code displays the panel in middle of the screen as a modal which i don't want (as i said i want it right under the header)
So how to achieve that ?
Thanks .
I took Muzaffers answer as base and added the feature to use the event coordinates here:
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
floating:true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function (btn, event) {
windowPanel.showAt(event.getXY())
}
}
]
});
Here is the fiddle: https://fiddle.sencha.com/#fiddle/3a8j&view/editor
Is that useful for you?
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
hidden: true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function () {
if (windowPanel.isHidden()) {
windowPanel.show();
} else {
windowPanel.hide();
}
}
},
windowPanel
]
});
https://fiddle.sencha.com/#fiddle/3a8c
I need to resize my popup created by using Ext.Window based on the controls render on it.
I popup an aspx page and dynamically creating control on it. So i can't hard code the height of the window.
How can I resize the popup window height. Please help me with your valueable information.
My code is as follows.
Ext.onReady(function () {
var myWin = new Ext.Window({
title: 'Add to Favourit',
width: 380,
height: 300,
closable: true,
buttonAlign: 'center',
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'box',
itemId: 'iFrameInWindow',
title: 'IFrame',
autoEl: {
tag: 'iframe',
src: 'forms/test.aspx?id=1'
},
flex: 1,
width: 380,
height: 300,
}],
listeners: {
afterrender: function () {
//
},
}
}]
});
myWin.show();
});
Thanks in advance.
I want to create a popup pdf viewer with ext js.
I have tried some panel examples like :
Ext.onReady(function() {
Ext.widget('panel', {
title: 'My PDF',
width: 600,
height: 400,
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%; border: none',
src: './test.pdf'
}
},
renderTo: 'selection'
});
});
I want Some think similar to this
the difference between my need and this one is that i want a close and print button on the top right og the screen. and i dont need a pagination
Any leads ?
Thanks in advance :)
Try This...
var showss = Ext.create('Ext.window.Window' {
title: 'PDF Content',
width: 400,
height: 600,
modal : true,
closeAction: 'hide',
items: [{
xtype: 'component',
html : '<iframe src="./test.pdf" width="100%" height="100%"></iframe>',
}]
});
showss.show();
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();
});
I am placing Ext JS Grid Panel in a iFrame. Do anybody know how can I place it in the center of the iFrame.
Currently It look like this -
I want it to be like this -
The contents of your IFrame can use a border layout as above or no layout, like this:
var viewPort = new Ext.Viewport({
renderTo:'body',
width: 400,
height: 400,
items:[new Ext.Panel({
title: 'hi',
width: 200,
height: 200,
style: 'margin:0 auto;margin-top:100px;'
})]
});
In the examples site there is an example that does this you may want to look at.
layout:'ux.center',
items: {
title: 'Centered Panel',
widthRatio: 0.75,
html: 'Some content'
}
Another way, not as elegant, is a cludge of VBox and HBox layouts but is pure ExtJS and doesn't rely on UX:
Ext.create('Ext.container.Viewport',{
style: 'background-color: white;',
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items: [{
flex: 1,
border: false
},{
height: 200,
border: false,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [{
flex: 1,
border: false
},{
html:'Centered Panel',
width: 400
},{
flex: 1,
border: false
}]
},{
flex: 1,
border: false
}]
//items: [login_panel],
});
simply use:
this.center()
where as "this" is the object you want to put in the center (let's say grid).
Something like
grid:
region: center;
panel:
layout: border;
css: "padding: 40px"