Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Dialog close leaves shadow???

  1. #1
    Ext User
    Join Date
    Aug 2007
    Location
    London, UK
    Posts
    58

    Default Dialog close leaves shadow???

    Hi guy's,

    I have a dialogLayout box that contains a form. When the Close button is pressed the dialog box becomes hidden but the shadow is left on the screen? Does anyone know what I am doing wrong?
    Here is the code (the dialog argument is the dialogLayout):
    Code:
    var showForm = function(dialog){
    		var tutForm = new Ext.form.Form({
    				url : 'new_tutorial'
    			});
    			tutForm.add(
    				new Ext.form.TextField({
    					fieldLabel : 'Tutorial Title',
    					name : 'tutorial_title'
    				})
    				/*,
    				new Ext.form.ComboBox({
    					fieldLabel : 'Category',
    					emptyText : 'Select Category'
    				})
    				*/
    			);
    			
    			tutForm.addButton('Save', function(){
    		
    					tutForm.submit({
    						url: 'create_category/',
    						
    						failure: function(form, action){
    							Ext.MessageBox.alert('Error Message', 'There has been a problem saving the new category');
    							
    						},
    						success: function(form, action){
    							Ext.MessageBox.alert('Server Response:', 'Your amendments have been saved');					
    							
    						}
    					});
    			});
    			tutForm.addButton('Close', dialog.hide, dialog);
    			
    			tutForm.render('tutorial-form');
    	};
    Any help would be much appreciated.

    Tim

  2. #2
    Ext User
    Join Date
    Aug 2007
    Location
    London, UK
    Posts
    58

    Default

    Sorry I'm not bumping the thread but I thought some illustrative images would help deomnstrate the issue.

    Any comments will be much appreciated.

    Tim
    Attached Images Attached Images

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    None of the code you posted shows anything about the dialog, so we're guessing. Is the dialog a direct child of the body, per the doc? If you don't put the form in the dialog (e.g. just use plain text), does the shadow go away when you close the dialog?

  4. #4
    Ext User
    Join Date
    Oct 2007
    Posts
    98

    Default

    I have also experienced this. I believe it only happened when using the escape key to close the dialog. Do you use a key listener for the escape button? I took the code out of my dialog that I believe was causing this, I'll add it back in to see if I can get it to happen again..

  5. #5
    Ext User
    Join Date
    Aug 2007
    Location
    London, UK
    Posts
    58

    Default

    Thanks for the replies,
    I'm not using any key listeners, it's just the 'x' top right, and the close button.

    Here is the full code so you can see the dialogLayout:

    Code:
    var CreateTutorial = function(){
    
    	var alreadyExists = false;
    	
    	var showForm = function(dialog){
    		
    		var categoryComboBoxStore = new Ext.data.Store({
    						proxy : new Ext.data.HttpProxy({url : 'categories'}),
    						reader : new Ext.data.XmlReader({record : 'category'}, ['name'])
    					});
    		categoryComboBoxStore.load();
    		console.log(categoryComboBoxStore);
    		var tutForm = new Ext.form.Form({
    				url : 'new_tutorial'
    			});
    			tutForm.add(
    				new Ext.form.TextField({
    					fieldLabel : 'Tutorial Title',
    					name : 'tutorial_title'
    				})
    				,
    				new Ext.form.ComboBox({
    					hiddenName : 'categoryCombo',
    					fieldLabel : 'Category',
    					emptyText : 'Select Category',
    					store : categoryComboBoxStore,
    					displayField : 'name',
    					editable : false,
    					mode : 'local',
    					triggerAction : 'all',
    					selectOnFocus : true
    				})
    				
    			);
    			
    			tutForm.addButton('Save', function(){
    				
    					tutForm.submit({
    						url: 'create_tutorial/',
    						
    						failure: function(form, action){
    							Ext.MessageBox.alert('Error Message', 'There has been a problem saving the new category');
    							
    						},
    						success: function(form, action){
    							Ext.MessageBox.alert('Server Response:', 'Your amendments have been saved');					
    							
    						}
    						
    					});
    					
    			});
    			tutForm.addButton('Close', dialog.hide, dialog);
    			
    			tutForm.render('tutorial-form');
    	};
    	
    	var showDialog = function(){
    	var dialogLayout = new Ext.LayoutDialog("new-tutorial-form",{
    					 width:320,
    		                        height:210,
    		                        shadow:true,
    		                        minWidth:300,
    		                        minHeight:300,
    								resizeable :"false",
    									center : {
    										autoScroll:true,
    				                        closeOnTab: true,
    				                        alwaysShowTabs: false
    									}
    					});// end dialogLayout
    					var layout = dialogLayout.getLayout();
    					layout.beginUpdate();
    						layout.add('center', form = new Ext.ContentPanel('tutorial-centre-div', {title:'Create a new category'}));
    					layout.endUpdate();
    					
    					if(alreadyExists == false){
    						showForm(dialogLayout);
    					} else {						
    					dialogLayout.show();
    					}
    	}
    	return {
    		create : function(){
    			showDialog();
    			alreadyExists = true;
    		}
    	}
    }();
    I call this with CreateTutorial.create();

    Again, any help will be much appreciated.

    Tim

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4

    Default

    This is actually done by design. When you reopen windows, you should see the shadow element(s) being reused. They are created on demand and treated as a pool. The assumption is that if you are opening and closing windows frequently, keeping a cache of shadow elements will be a little more efficient than recreating them each time (you'll never have more than the total number of windows you have open at any time).

  7. #7
    Ext User
    Join Date
    Aug 2007
    Location
    London, UK
    Posts
    58

    Default

    So is there a way to ensure that the shadow gets hidden along with the dialog when that closes?
    One other thing that I forgot to mention is that if you close the dialog using the 'x' at the top right, the shadow is hidden along with the dialog. However, if the dialog is closed using the 'Close' button the shadow persists on the screen.

    Any ideas/pointers would be much appreciated?

  8. #8
    Ext User
    Join Date
    Oct 2007
    Posts
    98

    Default

    try using an anonymous function in your close button's handler, like this:
    Code:
                thisDialog.addButton('Close', function() { thisDialog.hide(); });

  9. #9
    Ext User
    Join Date
    Aug 2007
    Location
    London, UK
    Posts
    58

    Default

    I tried:
    Code:
    catForm.addButton('Close', function(){layout.hide();});
    and even getting and hiding the div element:
    Code:
    catForm.addButton('Close', function(){Ext.get('new-category-div').hide();});
    same problem.

    The only solution that seems to work is to remove the button, or remove the shadow.

    Thanks for all the help anyway.

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    The layout dialog example doesn't exhibit this behavior, so I suspect there's something else going on with your code. You never answered my previous question regarding removing the form and trying this - simplify your example and see if the problem goes away, then add things back.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •