var Control={
		search:	function(str){
		
			Ext.getCmp('myGrid').getSelectionModel().clearSelections()
			Ext.getCmp('keyword').setValue(str);
			Ext.getCmp('myGrid').expand()
			Ext.getCmp('myGrid').store.load({params:{start: 0, limit: 10}})
			
		},
		loadInfo:	function(id){
				$.get('server/index.php?action=iphonedetail&idproduct='+id, Control.loadInfo_exec)
				
		},
		toGrid: function(){Ext.getCmp('myGrid').expand();},
		loadInfo_exec:	function(resp){
				var detailPanel = Ext.getCmp('detailPanel');
				detailPanel.body.update(resp);
				detailPanel.expand();
				 new Ext.ToolTip({
									target: 'nom_search',
									html: 'Search this NOM',
									 trackMouse:true,
									   showDelay:100

								});	
		},
		
		form_products_get: function(){
			//Loading grid
			$('#main_grids').html('<div class=loading_temp><img src="images/loading_1.gif" /></div>');
			//Call
			$.get('server/index.php?action=iphone_grid&start=0&limit=10',Control.form_products_get_exec)
			},
			
		form_products_get_exec: function(resp){
			//Get Html
			var resp=Ext.decode(resp)
			resp.rows=resp.data
			resp.data=null
					
					var search_bar=[
							{xtype:'tbtext',text:'Keyword or NOM :'},
							{xtype:'textfield',id:'keyword'},
							{xtype:'tbbutton',text:'Find',
								handler:function(){
										var ds=Ext.getCmp('myGrid').store
										ds.load(
											{params: {start: 0, limit: 10 }}
											);

								}}
						
					]
					
		
				
	
					
				var $grid=ext_grid_creator(resp,
						{id:'myGrid',
							pageSize:10,
							tbar:search_bar,
							url:'server/index.php?action=iphone_grid',
							title:'Search Result',
							sortInfo:{field: "col_1_Brand_250", direction: "ASC"},
							height:280});
				//$grid.render('main_grid')
				
				$grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {Control.loadInfo(r.id)});
				
				
				var accordion = new Ext.Panel({
				   width:320,
					height:360,
					title: 'Tequila.net NOM Database',
					layout:'accordion',
					
					defaults: {
						// applied to each contained panel
						//bodyStyle: 'padding:15px'
					},
					layoutConfig: {
						// layout-specific configs go here
						titleCollapse: true,
						animate: true,
						activeOnTop: false
					},
					items: [
					
					
							
							$grid
							
					,{
						title: 'Info Window',
						id:'detailPanel',
						bodyStyle:'padding:15px',
						html: '<p>This window will show additional information on a product once selected.</p>'
					}]
				});
				accordion.render('main_grid');
					var ds=Ext.getCmp('myGrid').store
					ds.load({params:{start: 0, limit: 10}});
					$('#keyword').keyup(function(e){ds.load({params:{start: 0, limit: 10}});})
					
					
				
			}
			}
			
			
		

			
			$(function(){Control.form_products_get();})