function f_materi_list() {
	var file = "";
	var id_materi = "";
	
	var ds_grid = new Ext.data.JsonStore({
		proxy: new Ext.data.HttpProxy({
			url: BASE_URL + 'e_learning/c_tambahmateri/grid_list_materi',
			method: 'POST'
		}),
		root: 'data',
		totalProperty: 'results',
		id: 'photoid',
		remoteSort: true,
		autoLoad: true,
		waitMsg: 'Mengunduh..',
		baseParams: {
			start: 0,
			limit: 18,
		},
		fields: [{
			name: "idmateri",
			mapping: "idmateri"
		},
		{
			name: "idmk",
			mapping: "idmk"
		},
		{
			name: "nmmk",
			mapping: "nmmk"
		},
		{
			name: "idsesi",
			mapping: "idsesi"
		},
		{
			name: "nmsesi",
			mapping: "nmsesi"
		},
		{
			name: "userid",
			mapping: "userid"
		},
		{
			name: "pengguna",
			mapping: "pengguna"
		},
		{
			name: "subjek",
			mapping: "subjek"
		},
		{
			name: "deskripsi",
			mapping: "deskripsi"
		},
		{
			name: "tujuan",
			mapping: "tujuan"
		},
		{
			name: "catatan",
			mapping: "catatan"
		},
		{
			name: "idstpublish",
			mapping: "idstpublish"
		},
		{
			name: "nmstpublish",
			mapping: "nmstpublish"
		},
		{
			name: "tglpublish",
			mapping: "tglpublish"
		},
		{
			name: "jampublish",
			mapping: "jampublish"
		},
		{
			name: "file",
			mapping: "file"
		},
		{
			name: "file-path",
			mapping: "file-path"
		},
		{
			name: "tipe",
			mapping: "tipe"
		},
		{
			name: "download",
			mapping: "download"
		}]
	});
	
	
	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: 'Id',
			width: 30,
			dataIndex: 'idmateri',
			sortable: true
		},
		{
			header: 'Subjek/Judul',
			width: 120,
			dataIndex: 'subjek',
			sortable: true
		},
		{
			header: 'Sesi',
			width: 50,
			dataIndex: 'nmsesi',
			sortable: true
		},
		{
			header: 'Matakuliah',
			width: 120,
			dataIndex: 'nmmk',
			sortable: true
		},
		{
			header: 'Dosen Pengajar',
			width: 120,
			dataIndex: 'pengguna',
			sortable: true
		},
		{
			header: 'Status Publish',
			width: 100,
			dataIndex: 'nmstpublish',
			sortable: true
		},
		{
			header: 'Tanggal Publish',
			width: 100,
			dataIndex: 'tglpublish',
			sortable: true
		},
		{
			header: 'Jam Publish',
			width: 80,
			dataIndex: 'jampublish',
			sortable: true
		},
		{
			header: 'Download',
			width: 80,
			dataIndex: 'download',
			sortable: true
		}]
		
	});
	var vw = new Ext.grid.GridView({
		emptyText: '< Materi 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: 18,
		store: ds_grid,
		displayInfo: true,
		displayMsg: 'Data Materi Dari {0} - {1} of {2}',
		emptyMsg: 'Materi Belum Dipilih.'
	});
	
	var tplDetail = new Ext.XTemplate(
	'<div class="details">',  
	'<b>Mata Kuliah:</b> <br>', 
	'<span> {idmk}</span> <br><br>', 
	'<b>Dosen:</b> <br>', 
	'<span> {pengguna}</span> <br><br>', 
	'<b>Tanggal/Jam Publish:</b> <br>', 
	'<span> {tglpublish}/{jampublish}</span> <br><br>', 
	'<b>Subjek/Judul:</b> <br>', 
	'<span> {subjek}</span> <br><br>', 
	'<b>Sesi:</b> <br>', 
	'<span> {sesi}</span> <br><br>', 
	
	'<b>Tujuan:</b> <br>', 
	'<div class="det-font"><span><textarea readonly cols="37" rows="2">{tujuan}</textarea> </span> </div><br>', 
	'<b>Deskripsi:</b> <br>', 
	'<div class="det-font"><span><textarea readonly cols="37" rows="2">{deskripsi}</textarea> </span> </div><br>',  
	
	'<b>Telah Di Download Sebanyak:</b><span> {download} Kali</span> <br><br>', 
	'<b>File:</b> <br>', 
	'<span> {file}</span> <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: 'cbmk', 
				id: 'cbmk',
				listeners: {
						change: function () {
                                  if (Ext.getCmp('cbmk').getValue()==false) {
                                      Ext.getCmp('idmk').setValue("");
                                  }
								}
			   }
			},{
				text: 'Mata Kuliah'
			},
			{
				xtype: 'textfield',
				name: 'nmmk',
				id: 'nmmk',
				readOnly:true,
				width: 150 
			},
			{
                xtype: 'button',
                iconCls: 'silk-find',
                id: 'btn_data_matakuliah',
                width: 3,
				handler: function() {
                             find_x("Data Mata Kuliah", 10);
                }
            },
			{
				xtype:'checkbox',
				boxLabel: '', 
				name: 'cbdosen', 
				id: 'cbdosen',
				listeners: {
						change: function () {
                                  if (Ext.getCmp('cbdosen').getValue()==false) {
                                      Ext.getCmp('dosen').setValue("");
                                  }
								}
			   }
			},
			{
				text: 'Dosen'
			},
			{
				xtype: 'textfield',
				name: 'dosen',
				id: 'dosen',
				readOnly:true,
				width: 150 
			},
			{
                xtype: 'button',
                iconCls: 'silk-find',
                id: 'btn_data_dosen',
                width: 3,
				handler: function() {
                             find_x("Data Dosen", 7);
                }
            },
			{
				xtype:'checkbox',
				boxLabel: '', 
				name: 'cbjudul', 
				id: 'cbjudul',
				listeners: {
						change: function () {
                                  if (Ext.getCmp('cbjudul').getValue()==false) {
                                      Ext.getCmp('judul').setValue("");
                                  }
								}
			   }
			},
			{
				text: 'Subjek/Judul'
			},{
				xtype: 'textfield',
				name: 'judul',
				id: 'judul',
				width: 250,
				validator: function() {
						
							ds_grid.setBaseParam('cbmk', Ext.getCmp('cbmk').getValue());
							ds_grid.setBaseParam('cbdosen', Ext.getCmp('cbdosen').getValue());
							ds_grid.setBaseParam('cbjudul', Ext.getCmp('cbjudul').getValue());
							
							ds_grid.setBaseParam('idmk', Ext.getCmp('idmk').getValue());
							ds_grid.setBaseParam('dosen', Ext.getCmp('nidu').getValue());
							ds_grid.setBaseParam('judul', Ext.getCmp('judul').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('cbmk', Ext.getCmp('cbmk').getValue());
							ds_grid.setBaseParam('cbdosen', Ext.getCmp('cbdosen').getValue());
							ds_grid.setBaseParam('cbjudul', Ext.getCmp('cbjudul').getValue());
							
							ds_grid.setBaseParam('idmk', Ext.getCmp('idmk').getValue());
							ds_grid.setBaseParam('dosen', Ext.getCmp('dosen').getValue());
							ds_grid.setBaseParam('judul', Ext.getCmp('judul').getValue());
							ds_grid.load();
					}
				}]
			},
			{
				xtype: 'textfield',
				name: 'idmk',
				id: 'idmk',
				hidden:true,
				readOnly:true,
				width: 100 
			},
			{
				xtype: 'textfield',
				name: 'nidu',
				id: 'nidu',
				hidden:true,
				readOnly:true,
				width: 100 
			}],
		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 = {
                            idmk:rec.data["nmmk"],
							pengguna:rec.data["pengguna"], 	
							tglpublish:rec.data["tglpublish"],
							jampublish:rec.data["jampublish"],	
							subjek:rec.data["subjek"],
							sesi:rec.data["nmsesi"], 	
							tujuan:rec.data["tujuan"],
							deskripsi:rec.data["deskripsi"],
							download:rec.data["download"],
							file:rec.data["file"] 								
                    }
					panelRightBottom.expand(true);
						tplDetail.overwrite(panelRightBottom.body, datax);
					
					Ext.getCmp('btn_download').show();
					
					file = rec.data["file"];
					id_materi = rec.data["idmateri"];
			}
		}
	});

	var panelRightBottom = new Ext.Panel({});
	
	//=================================================== AWAL
	var materi = new Ext.Panel({
		layout: 'border',
		defaults: {
			collapsible: true,
			split: true
		},
		items: [{
			collapsible: false,
			title: "Daftar Materi",
			//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-materi',
			name: 'info-materi',
			title: 'Informasi Materi',
			items: [
			
			panelRightBottom,
				{
				buttons: [{
                    id:'btn_download',
					name:'btn_download',
                    text: 'DOWNLOAD',
					hidden:true,
                    handler: function() {
						 var win = window.open();
						 win.location.reload(); 
						 win.location = '/resources/materi_file/' + file;
						 Ext.Ajax.request({
                                    url: BASE_URL + 'e_learning/c_tambahmateri/update_download',
                                    method: 'POST',
									params: {
                                                idmateri:id_materi,
												pengguna:USERNAME
                                            },
                                    success: function(response) {   
										   ds_grid.reload();
										   tplDetailClear.overwrite(panelRightBottom.body, '');
										   Ext.getCmp('btn_download').hide();
										   
                                    }
                            });

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

			}
		}
	});
	
	get_content(materi);
}