modal window unable to destroy

[zlevardy]

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.

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:

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

[scottmartin]

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

Scott.

[zlevardy]

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:

<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