function cari_katalog() {
	var file = "";
	var id_materi = "";
	
	var ds_grid = new Ext.data.JsonStore({
		proxy: new Ext.data.HttpProxy({
			url: BASE_URL + 'e_katalog/c_cari/grid_list_katalog',
			method: 'POST'
		}),
		root: 'data',
		totalProperty: 'results',
		id: 'photoid',
		remoteSort: true,
		autoLoad: true,
		waitMsg: 'Mengunduh..',
		baseParams: {
			
		},
		fields: [{
			name: "id_katalog",
			mapping: "id_katalog"
		},
		{
			name: "kd_katalog",
			mapping: "kd_katalog"
		},
		{
			name: "id_pengarang",
			mapping: "id_pengarang"
		},
		{
			name: "id_kategori",
			mapping: "id_kategori"
		},
		{
			name: "isbn",
			mapping: "isbn"
		},
		{
			name: "judul_buku",
			mapping: "judul_buku"
		},
		{
			name: "deskripsi",
			mapping: "deskripsi"
		},
		{
			name: "tgl_terbit",
			mapping: "tgl_terbit"
		},
		{
			name: "thn_terbit",
			mapping: "thn_terbit"
		}]
	});
	
	
	var cm = new Ext.grid.ColumnModel({
		// specify any defaults for each column
		defaults: {
			sortable: true // columns are not sortable by default           
		},
		columns: [
		//new Ext.grid.RowNumberer(),
		{
			header: 'Kode Katalog',
			width: 70,
			dataIndex: 'kd_katalog',
			sortable: true
		},
		{
			header: 'Pengarang',
			width: 70,
			dataIndex: 'id_pengarang',
			sortable: true
		},
		{
			header: 'Kategori',
			width: 70,
			dataIndex: 'id_kategori',
			sortable: true
		},
		{
			header: 'No.Buku',
			width: 50,
			dataIndex: 'isbn',
			sortable: true
		},
		{
			header: 'Judul Buku',
			width: 150,
			dataIndex: 'judul_buku',
			sortable: true
		},
		{
			header: 'Deskripsi',
			width: 150,
			dataIndex: 'deskripsi',
			sortable: true
		},
		{
			header: 'Tanggal Terbit',
			width: 100,
			dataIndex: 'tgl_terbit',
			sortable: true
		},
		{
			header: 'Tahun Terbit',
			width: 70,
			dataIndex: 'thn_terbit',
			sortable: true
		}]
		
	});
	var vw = new Ext.grid.GridView({
		emptyText: '< Katalog Belum Dipilih  >'
	});
	var sm_nya = new Ext.grid.CheckboxSelectionModel({
		singleSelect:true,
		listeners: {
			//	rowselect: select_action,
			//	rowdeselect: deselect_action
		}
	});
	var cari_data = [new Ext.ux.grid.Search({
		iconCls: 'btn_search',
		minChars: 1,
		autoFocus: true,
		autoHeight: true,
		position: 'top',
		mode: 'local',
		width: 200
	})];
	var paging = new Ext.PagingToolbar({
		pageSize: 50,
		store: ds_grid,
		displayInfo: true,
		displayMsg: 'Data Katalog Dari {0} - {1} of {2}',
		emptyMsg: 'Katalog Belum Dipilih.'
	});
	
	var tplDetail = new Ext.XTemplate(
	'<div class="details">',  
	
	'<b>Judul Buku:</b> <br>', 
	'<span>{judul_buku}</span> <br><br>', 
	
	'<b>Kode Katalog:</b> <br>', 
	'<span>{kd_katalog}</span> <br><br>', 
	
	'<b>No.Buku:</b> <br>', 
	'<span>{isbn}</span> <br><br>', 
	
	'<b>Pengarang:</b> <br>', 
	'<span>{id_pengarang}</span> <br><br>', 
	
	'<b>Kategori:</b> <br>', 
	'<span>{id_kategori}</span> <br><br>', 
	
	'<b>Deskripsi:</b> <br>', 
	'<span>{deskripsi}</span> <br><br>',  
	 
	'<b>Tanggal Terbit:</b> <br>', 
	'<span>{tgl_terbit}</span> <br><br>',  
	 	
	'</div>');
	
	var tplDetailClear = new Ext.XTemplate();

	
	var grid_nya = new Ext.grid.EditorGridPanel({
		store: ds_grid,
		frame: true,
		//width: 1140,
		autoScroll: true,
		autoHeight: true,
		autoWidth: true,
		//plugins: cari_data,
		id: 'grid_det_product',
		buttonAlign: 'left',
		defaults: {
			anchor: '-10'
		},
		forceFit: true,
		tbar: [{
			xtype: 'buttongroup',
			title: 'Pencarian',
			columns: 4,
			width: 700,
			defaults: {
				scale: 'small'
			},
			items: [{
				xtype:'checkbox',
				boxLabel: '', 
				name: 'cpengarang', 
				id: 'cpengarang',
				listeners: {
						change: function () {
                                  if (Ext.getCmp('cpengarang').getValue()==false) {
                                      Ext.getCmp('id_pengarang').setValue("");
                                  }
								}
			   }
			},{
				text: 'Pengarang'
			},
			{
				xtype: 'textfield',
				name: 'id_pengarang',
				id: 'id_pengarang',
				readOnly:true,
				width: 250 
			},
			{
                xtype: 'button',
                iconCls: 'silk-find',
                id: 'btn_data_pengarang',
                width: 3,
				handler: function() {
                             find_x("Data Pengarang", 11);
                }
            },
			{
				xtype:'checkbox',
				boxLabel: '', 
				name: 'ckategori', 
				id: 'ckategori',
				listeners: {
						change: function () {
                                  if (Ext.getCmp('ckategori').getValue()==false) {
                                      Ext.getCmp('id_kategori').setValue("");
                                  }
								}
			   }
			},
			{
				text: 'Kategori'
			},{
				xtype: 'textfield',
				name: 'id_kategori',
				id: 'id_kategori',
				readOnly:true,
				width: 250 
			},
			{
                xtype: 'button',
                iconCls: 'silk-find',
                id: 'btn_data_kategori',
                width: 3,
				handler: function() {
                             find_x("Data Kategori", 12);
                }
            },
			{
				xtype:'checkbox',
				boxLabel: '', 
				name: 'cjudul', 
				id: 'cjudul',
				listeners: {
						change: function () {
                                  if (Ext.getCmp('cjudul').getValue()==false) {
                                      Ext.getCmp('judul_buku').setValue("");
                                  }
								}
			   }
			},
			{
				text: 'Judul'
			},{
				xtype: 'textfield',
				name: 'judul_buku',
				id: 'judul_buku',
				width: 250,
				validator: function() {
						
							ds_grid.setBaseParam('cpengarang', Ext.getCmp('cpengarang').getValue());
							ds_grid.setBaseParam('ckategori', Ext.getCmp('ckategori').getValue());
							ds_grid.setBaseParam('cjudul', Ext.getCmp('cjudul').getValue());
							
							ds_grid.setBaseParam('id_pengarang', Ext.getCmp('id_pengarang').getValue());
							ds_grid.setBaseParam('id_kategori', Ext.getCmp('id_kategori').getValue());
							ds_grid.setBaseParam('judul_buku', Ext.getCmp('judul_buku').getValue());
							ds_grid.load();
					}
			},
			{
				xtype: 'label',
				text: ''
			},
			{
				xtype: 'label',
				text: ''
			},
			{
						xtype: 'button',
						text: ' Cari ',
						iconCls: 'silk-find',
						id: 'btn_data',
						width: 3,
						handler: function() {
						
							ds_grid.setBaseParam('cpengarang', Ext.getCmp('cpengarang').getValue());
							ds_grid.setBaseParam('ckategori', Ext.getCmp('ckategori').getValue());
							ds_grid.setBaseParam('cjudul', Ext.getCmp('cjudul').getValue());
							
							ds_grid.setBaseParam('id_pengarang', Ext.getCmp('id_pengarang').getValue());
							ds_grid.setBaseParam('id_kategori', Ext.getCmp('id_kategori').getValue());
							ds_grid.setBaseParam('judul_buku', Ext.getCmp('judul_buku').getValue());
							ds_grid.load();
					}
				}]
			}],
		sm: sm_nya,
		vw: vw,
		cm: cm,
		bbar: paging,
		//autoExpandColumn: 'common',
		clicksToEdit: 1,
		listeners: {
			rowclick: function rowClick(grid, rowIdx) {
				var rec = ds_grid.getAt(rowIdx);
					datax = {
                            judul_buku:rec.data["judul_buku"],
							kd_katalog:rec.data["kd_katalog"],
							isbn:rec.data["isbn"],
							id_pengarang:rec.data["id_pengarang"], 	
							id_kategori:rec.data["id_kategori"],
							deskripsi:rec.data["deskripsi"],
							tgl_terbit:rec.data["tgl_terbit"]							
                    }
					panelRightBottom.expand(true);
						tplDetail.overwrite(panelRightBottom.body, datax);
					
					
					
					file = rec.data["file"];
					id_katalog = rec.data["id_katalog"];
			}
		}
	});

	var panelRightBottom = new Ext.Panel({});
	
	//=================================================== AWAL
	var katalog = new Ext.Panel({
		layout: 'border',
		defaults: {
			collapsible: true,
			split: true
		},
		items: [{
			collapsible: false,
			title: "Cari Katalog Buku",
			//bodyStyle: 'padding:0px',
			region: 'center',
			//cmargins: '5 0 0 0',
			id: 'images-view',
			//frame: true,
			//width: 640,
			//height:495,
			items: [grid_nya],
		},
		{
			region: 'east',
			minSize: 75,
			maxSize: 250,
			cmargins: '5 0 0 0',
			frame: true,
			width: 350,
			id: 'info-katalog',
			name: 'info-katalog',
			title: 'Informasi Buku',
			items: [
			
			panelRightBottom,
				{
				buttons: [{
                    id:'btn_download',
					name:'btn_download',
                    text: 'DOWNLOAD',
					hidden:true,
                    handler: function() {
						 
						 window.open('../resources/materi_file/' + file, '_self');
						 Ext.Ajax.request({
                                    url: BASE_URL + 'e_katalog/c_katalog/update_download',
                                    method: 'POST',
									params: {
                                                idkatalog:id_katalog,
												pengguna:USERNAME
                                            },
                                    success: function(response) {   
										   ds_grid.reload();
										   tplDetailClear.overwrite(panelRightBottom.body, '');
										   Ext.getCmp('btn_download').hide();
										   
                                    }
                            });

						}
					}]
				}
				
				],
			collapsed: false
		}],
		listeners: {
			'afterrender': function() {

			}
		}
	});
	
	get_content(katalog);
}