I want to show message box when user click (X) button of ext window, and on 'ok' button of message box window will close. I wrote the code but it closes window first than show message box. Here is the code:
var assignReportFlag = 0;
var assignReportLoader = function(title,url){
var panel = new Ext.FormPanel({
id: 'arptLoader',
height: 485,
border: false,
layout: 'fit',
autoScroll: true,
method:'GET',
waitMsg: 'Retrieving form data',
waitTitle: 'Loading...',
autoLoad: {url: url,scripts: true}
});
var cqok = new Ext.Button({
text:'OK',
id:'1',
handler: function(){
if(assignReportFlag == 1){
assignReportFlag = 0;
Ext.MessageBox.alert('Status', 'Changes has been saved successfully',showResult);
}else{
assignReportWindow.close();
}
}
});
var assignReportWindow = new Ext.Window({
layout:'fit',
title: title,
height:Ext.getBody().getViewSize().height - 60,
width:Ext.getBody().getViewSize().width-20,
closable: true,
modal:true,
resizable: false,
autoScroll:true,
plain: true,
border: false,
items: [panel],
buttons: [cqok],
listeners:{
beforeclose:function(){
if(assignReportFlag == 1){
assignReportFlag = 0;
Ext.MessageBox.alert('Status', 'Changes has been saved successfully',showResult);
}else{
assignReportWindow.destroy();
}
}
}
});
function showResult(btn){
assignReportWindow.destroy();
};
assignReportWindow.show();
};
Thanks
In your beforeclose listener return false to stop the close event being fired.
This works fine for me.Have a look
http://jsfiddle.net/DrjTS/266/
var cqok = new Ext.Button({
text:'OK',
id:'1',
handler: function(){
Ext.MessageBox.alert('Status', 'Changes has been saved successfully',showResult);
}
});
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
renderTo: Ext.getBody(),
items:[
{
xtype:'button',
text:'SUBMIT',
handler:function(thisobj)
{
Ext.create('Ext.window.Window', {
id:'W',
height: 200,
width: 400,
layout: 'fit',
buttons: [cqok],
listeners:{
beforeclose:function(){
Ext.MessageBox.alert('Status', 'Changes has been saved');
}
}
}).show();
}
}
]
});
function showResult(btn){
Ext.getCmp('W').destroy();
};
Related
I have tried below code its working fine for first time, but when I close popup and click on button again it stops working.
var myForm = new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable : true
});
//myForm.show();
Ext.create('Ext.Button', {
text: 'Click Me',
renderTo: Ext.getBody(),
listeners: {
click: function() {
myForm.show();
}
}
});
Because by default closeAction is equal to 'destroy', which means component will be destroyed on clicking the close button. After you destroy your myForm object, it won't be available on the second try.
solution:
1) You can change closeAction to 'hide' and after clicking the close button component will just hide in dom.
var myForm = new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable: true,
closeAction: 'hide'//<-------------
});
2) You can create new object on every click on the button.
Ext.create('Ext.Button', {
text: 'Click Me',
renderTo: Ext.getBody(),
listeners: {
click: function () {
new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable: true
}).show();
}
}
});
You can add the following to your panel. That would hide it after you close it
closeAction: 'hide'
If you were building a big screen though you'd be better off leaving it as is (it keeps the dom tidy) but you'll need to recreate the component then when you click the button again
I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?
Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2
I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.
I need to create a modal window in the other normal window. When I create a modal window is blocked mask.
Ext.application({
name : 'Fiddle',
launch : function() {
var win2 = null;
var win1 = Ext.create('Ext.window.Window', {
closeAction: 'hide',
width: 500,
height: 500,
resizable: false,
titleAlign: 'center',
items: {
xtype: 'button',
text: 'show modal',
handler: function() {win2.show()}
},
title: 'Simple window'
});
Ext.create('Ext.panel.Panel', {
items: {
xtype: 'button',
text: 'show window',
handler: function() {
var isRendered = win1.rendered;
win1.show(null, function() {
if (!isRendered) {
win2 = Ext.create('Ext.window.Window', {
closeAction: 'hide',
resizable: false,
titleAlign: 'center',
width: 200,
height: 200,
renderTo: win1.getEl(),
modal: true,
title: 'Modal window'
})
}
});
}
},
renderTo: Ext.getBody()
});
}});
z-index is right:
Mask component is 19006
Modal window component is 19010
Simple window component is 19000
I don't understand where I was wrong.
The problem is that you render win2 into win1.getEl(). Normally, you don't render a window into anything, and let it take care of itself.
Indeed, if you remove
renderTo: win1.getEl(),
from your fiddle, the modal window is working.
If, for some reason, you want win2 to be modal only inside win1, you can use
floatParent : win1,
on win2 instead.
Below is the code I am using to create a modal -
var thumbImage = new Array();
var me = this;
for (var i = 0; i < thumbnail.length; i++) {
thumbImage[i] = {
xtype: 'panel',
html: '<img class="thumbView" src="' + thumbnail[i].thumb + '"/>',
thumbIndex: i,
listeners: {
initialize: function(thisID) {
this.element.on('tap', function(e, t) {
me.setActiveCarouselItem(thisID.thumbIndex);
});
}
}
};
}
Ext.Viewport.add({
xtype: 'panel',
itemId: 'thumbmodal',
centered: true,
cls: 'thumb-panel',
float: true,
modal: true,
hideOnMaskTap: true,
scrollable: true,
items: thumbImage
});
In this modal, there are thumbnail images. Clicking on any from these image will set the tapped imaeg as carousel's active item and the modal will be closed/hidden. But I am unable to close/hide the modal. How can I do this? Thanks in advance.
Basically get the reference of thumbmodal and call hide method.
// same code
initialize: function(thisID) {
this.element.on('tap', function(e, t) {
me.setActiveCarouselItem(thisID.thumbIndex);
Ext.Viewport.down('#thumbmodal').hide();
});
}
// same code
I'm new in ExtJS and I'm trying to display a window with a combo, a cancel and an OK button but the combo does not seem to be working properly: It's not showing the label and when I click the picker (or the trigger) it does not show the list.
I need the combo to either accept free text and selected values but I don't know what I'm doing wrong. I went over Sencha api and forums but I can't work this out.
I hope you guys have a solution for this. Thanks and sorry if my English is not good enough.
function new_filter()
{
var ds_filter2 = new Ext.data.JsonStore({
url: 'forms-combobox-data-filters.php?user='+user_id,
fields: ['id', 'name'],
autoLoad: true/*,
totalProperty: "results"*/
});
var dlg = new Ext.Window(
{
title: 'Save Current Settings as a Filter',
id: 'frmFilter',
width: 350,
y: 200,
height: 120,
minWidth: 350,
minHeight: 100,
iconCls: 'save',
bodyStyle:'padding:0px 0px 0px 0px; background-color:#F5F5F5;',
modal: true,
resizable: false,
maximizable: false,
draggable:false,
closable: true,
closeAction: 'close',
hideMode: "offsets",
constrainHeader: true,
//autoLoad: { url : 'filter_form2.php', scripts: true},
keys: [
{ key: [Ext.EventObject.ENTER], handler: function() {
create_new_filter();
}
},
{ key: [Ext.EventObject.ESCAPE], handler: function() {
dlg.close();
}
}],
buttons:[
{
text : 'OK',
handler: function()
{
var selectedValue = Ext.getCmp('combo-new-filter').value; //selectedValue => Nombre
var rec = ds_filter2.getById(selectedValue); //rec => ID
//alert('rec: '+rec+'\nselected value: '+selectedValue);
if (rec == undefined ) //si el valor seleccionado no se encuentra en combo
{
create_new_filter(selectedValue);
dlg.close();
}
else
{
//alertar con el message box si se desea sobre escrbir el filtro
//ok---> grabar
//cancel--->cancelar
var selected_text = rec.get('name');
var id = rec.get('id');
//alert("selected text: "+selected_text);
Ext.MessageBox.confirm('Confirm','Are you sure you want to overwrite this filter "'+selected_text+'"?', function(btn)
{
if (btn=='yes')
{
var url = 'deleteFilter.php?filter='+id;
var mnmxmlhttp = Array ();
mnmxmlhttp = new myXMLHttpRequest ();
if (mnmxmlhttp)
{
mnmxmlhttp.open ("POST", url, true);
mnmxmlhttp.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
mnmxmlhttp.send ("");
mnmxmlhttp.onreadystatechange = function ()
{
if (mnmxmlhttp.readyState == 4)
{
create_new_filter(selected_text);
}
}
}
}
});
}
}
},
{
text : 'Cancel',
handler: function() {
dlg.close();
}
}
],
items:[
/*{
xtype: 'label',
forId: 'myFieldId',
text: 'Name of saved filter:',
},*/
{
id:'combo-new-filter',
labelAlign: 'left',
fieldLabel: 'Filter Name:',
xtype: 'combo',
store: ds_filter2,
//queryMode: 'local',
displayField:'name',
valueField: 'id',
//editable: true,
x: 110,
y: 20,
listeners: {
/*beforerender: function(combo){
combo.setValue("Select saved filter to apply");
},
select:{fn:function(combo, value) {
if (combo.getValue()>0){onSelectFilter(combo.getValue());}
}
}*/
}
}
]
});
dlg.show();
}
Your window needs to have the layout: 'form' configuration. In order to display fields, combos, etc, the layout that contains them needs to be a form one.