1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    131
    Vote Rating
    5
    zlevardy is on a distinguished road

      1  

    Default Unanswered: modal window unable to destroy

    Unanswered: modal window unable to destroy


    hi,

    I am trying to make a modal window having a grid, with a ajax store. All looks good, data loaded. Window can be closed, but the thing indicating something is no good that a listener attached to row selection is not remade once the window created again. If i
    I directly calling this.destroy(); it says: this store is null
    So I think somewhere there is the point, with the store does not allow to deallocated my window from DOM. Also tried to play around with initComponenet to initialize store, but no difference.

    Code:
    Ext.define('MyApp.view.createSearch',{
    	extend: 'Ext.container.Container',
    	alias: 'widget.createSearch',
    	
        id: 'createSearchContainer',
        
        width: 800,
        height: 200,
        layout: {
            align: 'stretch',
            type: 'table',
            columns: 1,
            tableAttrs: { width: '100%', height: '100%' }
        },
        
        region: 'north',
        
        items: [
                {
                	xtype: 'form',
                	title: 'Please enter search term',
                	width: 490,
                	height: 60,
                	layout: { type: 'hbox' },
                	items: [
                	    { xtype: 'textfield', width: 390, style: { marginRight: 5 }, name: 'raasIsrc' },
                	    { 
                	    	xtype: 'button', text: 'Search', width: 80, style: { marginBottom: 5 },
                	    	handler: function() {
                            	console.log('search-btn');
                            	
                            	var myId = this.up('form').getForm().getValues().myId;
                            	
                            	if (myId!='') { 
    	                        	Ext.StoreMgr.get('SearchMy').load({params: {myId: myId } });
    	                        	
    	                        	var searchWin;
    	                        	if (!searchWin){
    	                        		console.log('search-win: NEW');
    	                        		searchWin = Ext.create('MyApp.view.searchWindow',{refOwner:this});
    	                        	} else {
    	                        		console.log('search-win: EXISTS'); //never happens!!!!!
    	                        	}
    	                        	searchWin.title = 'Search Result of '+myId;
    	                        	searchWin.show();
                            	} else {
                            		Ext.Msg.alert('Empty search term','Cannot search empty criteria!');
                            	}
    
    
                	    	}
                	    }
    
    
                	]
                },
                {
                	colspan: 4, 
                	xtype: 'form',
                	id: 'myDummyOne',
                	height: 60,
                	title: 'Selected item'
                },
        ]
    
    
    });
    and the window.js:
    Code:
    Ext.define('MyApp.view.searchWindow', {
    	extend: 'Ext.window.Window',
    	alias: 'widget.searchWindow',
        title: 'My Search Results',
        height: 400, //autoHeight: true,
        width: 600,
        layout: 'fit',
        modal : true,
        closeAction: 'destroy',
        
        items: { 
            xtype: 'grid',
            border: false,
            selModel: Ext.create('Ext.selection.RowModel', {}),
            columns: [
                {text: "ID", width: 100, dataIndex: 'myId', sortable: true},
                {text: "Customer", width: 100, dataIndex: 'myParticip', sortable: true}
            ],   
            
            //store: 'SearchMy',
            listeners: {
            	select: { fn: function(rowmodel, record, rowindex, options) { 
            		this.rowSelect(rowmodel, record, rowindex, options);
            	} }
            },
            
            initComponent: function() {
            	this.store = 'SearchMy';
                this.superclass.initComponent.call(this);
            }
            
            rowSelect: function(rowmodel, record, rowindex, options) {
        		
        		var myText = record.get('myParticip').participFullName;
        		
        		Ext.getCmp('myDummyOne').update(myText);
    
    
        		//this.close();
        	}
    
    
        }
    
    
    });
    any idea how to make search results in a modal window, and search as many times as user wants?

    thx,
    Zol

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,080
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please try remove this : id: 'createSearchContainer',
    and any hard id from your code and report back.

    Scott.

  3. #3
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    131
    Vote Rating
    5
    zlevardy is on a distinguished road

      0  

    Default


    thanks Scott

    I have already found the problem, and that was the listeners at the wrong place. Mainly the solution is: add listener to the RowSelection, and encapsulate into an apply-me part to avoid. (My original attempt was only "working" with a wrapper function, a simple listeners: select: this.rowSelect was not called back.)
    A fixed fully working example:

    Code:
    <html>
    <head>
    	<title>Test grid</title>
    <linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all-gray-debug.css"/>
    
    
    <scripttype="text/javascript"src="extjs/ext-all-debug.js"></script>
    	
    <scripttype="text/javascript">
    		Ext.require([ 
    			'Ext.form.*', 
    			'Ext.grid.*', 
    			'Ext.data.*', 
    			'Ext.selection.*',
    			'Ext.tab.*',
    			'Ext.layout.*',
    			'Ext.container.*',
    			'Ext.button.*',
    			'Ext.window.*'
    		]);
    		
    		Ext.Loader.setConfig({enabled:true});
    		
    		Ext.define('Track',{
    			extend: 'Ext.data.Model',
    		
    			fields: ['trackNo','trackName']
    		});
    		
    		Ext.define('Search',{
    			extend: 'Ext.data.Store',
    			model: 'Track',
    			data: [
    			    {
    			    	'trackNo': 'mytrackno',
    			    	'trackName': 'mytrackname'
    			    }
    			]
    		
    		});
    		
    		
    		
    		Ext.define('searchWindow', {
    			extend: 'Ext.window.Window',
    			alias: 'widget.searchWindow',
    		    title: 'Search Results',
    		    height: 200, 
    		    width: 400,
    		    layout: 'fit',
    		    modal : true,
    		    closeAction: 'destroy',
    		    
    		    initComponent: function() {
    		        var me = this;
    		
    		        Ext.applyIf(me, {
    				    
    				    items: {  
    				        xtype: 'grid',
    				        border: false,
    				        selModel: Ext.create('Ext.selection.RowModel', {
    				        	listeners: {
    					        	select: {fn: me.rowSelect, scope: me }
    					        }
    				        }),
    				        columns: [
    				            {text: "No", width: 100, dataIndex: 'trackNo', sortable: true},
    				            {text: "Track Title", flex: 1, dataIndex: 'trackName', sortable: true}
    				        ],   
    				        
    //store: 'Search',
    //viewConfig: { emptyText: 'No entries', deferEmptyText: false },
    				        /*
    				        listeners: {
    				        	//select: function(rowmodel, record, rowindex, options) { 
    				        	//	console.log('select rowSelect registered'); 
    				        	//	this.rowSelect(rowmodel, record, rowindex, options);
    				        	//}
    				        	select: {fn: this.rowSelect, scope: this }
    				        },*/
    				        
    				        initComponent: function() {
    				        	var searchStore = Ext.create('Search');
    				        	this.store = searchStore;
    //this.store = 'Search';
    				            this.superclass.initComponent.call(this);
    				        }, 
    				        
    				        /*
    				        rowSelect: function(rowmodel, record, rowindex, options) {
    				    		console.log('search-win rowSelect');
    
    				    		var targetText = record.get('trackName') + '  @ ' + (new Date().getTime());
    				    		Ext.ComponentQuery.query('#targetForm')[0].update(targetText);
    				    	}
    				    	*/
    				
    				    }
    		    
    			    });
    	
    		        me.callParent(arguments);
    		    },
    		    
    		    rowSelect: function(rowmodel, record, rowindex, options) {
    	    		console.log('search-win rowSelect');
    	    		
    	    		var targetText = record.get('trackName') + '  @ ' + (new Date().getTime());
    	    		Ext.ComponentQuery.query('#targetForm')[0].update(targetText);
    	    	}
    		
    		});
    
    
    
    
    		Ext.application ( {
    			name: 'HelloExt',
    			launch: function() {
    				Ext.create('Ext.container.Viewport', {
    					layout: 'fit',
    					items: [ 
    						{
    							title: 'Test Grid App',
    							
    							items: [
    								{
    					            	xtype: 'form',
    					            	title: 'search term',
    					            	width: 490,
    					            	height: 60,
    					            	layout: { type: 'hbox' },
    					            	items: [
    										{ xtype: 'textfield', width: 390, style: { marginRight: 5 }, name: 'myid' },
    					            	    { 
    					            	    	xtype: 'button', text: 'Search', width: 80, style: { marginBottom: 5 },
    					            	    	handler: function() {
    					                        	console.log('search-btn');
    					                        	
    					                        	var myId = this.up('form').getForm().getValues().myid;
    					                        	
    					                        	if (myId!='') { 
    						                        	
    						                        	var searchWin;
    						                        	if (!searchWin){
    						                        		console.log('search-win: NEW');
    						                        		searchWin = Ext.create('searchWindow',{refOwner:this});
    						                        	} else {
    						                        		console.log('search-win: EXISTS');
    						                        	}
    						                        	searchWin.title = 'Search Result of '+myId;
    						                        	searchWin.show();
    					                        	} else {
    					                        		Ext.Msg.alert('Empty search term','Cannot search empty criteria!');
    					                        	}
    					
    					            	    	}
    					            	    }
    									]
    								},
    					            {
    					            	colspan: 4, 
    					            	xtype: 'form',
    					            	itemId: 'targetForm',
    					            	height: 60,
    					            	title: 'target text'
    					            }
    							]
    						},
    					]
    				});
    			}
    		});
    
    
    	
    </script>
    
    
    </head>
    <body>
    </body>
    </html>
    the commented out block is the wrong way.

    thx

Thread Participants: 1