function cari_katalog() {
	var file = "";
	var id_materi = "";

    Ext.Ajax.defaultHeaders = {
        'Authorization': 'Bearer ' + localStorage.getItem('access_token')
    };

    var ds_grid = new Ext.data.JsonStore({
      proxy: new Ext.data.HttpProxy({
       url: BASE_URL + 'e_katalog/c_cari/grid_list_katalog',
       method: 'POST',
       success: function(response) {
        var x = Ext.decode(response.responseText);

        if(x.status == false){
            Ext.Ajax.request({
                url: BASE_URL + 'user/ext_logout',
                method: 'POST',
                success: function(xhr) {
                    localStorage.removeItem('access_token');
                    window.location = BASE_URL + 'user/login';
                }
            });
        }
    }
}),
      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: "nama_pengarang",
       mapping: "nama_pengarang"
   },
   {
       name: "nama_kategori",
       mapping: "nama_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: 90,
			dataIndex: 'kd_katalog',
			sortable: true
		},
		{
			header: 'Pengarang',
			width: 70,
			dataIndex: 'nama_pengarang',
			sortable: true
		},
		{
			header: 'Kategori',
			width: 70,
			dataIndex: 'nama_kategori',
			sortable: true
		},
		{
			header: 'No.Buku',
			width: 50,
			dataIndex: 'isbn',
			sortable: true
		},
		{
			header: 'Judul Buku',
			width: 200,
			dataIndex: 'judul_buku',
			sortable: true
		},
		{
			header: 'Deskripsi',
			width: 300,
			dataIndex: 'deskripsi',
			sortable: true
		},
		{
			header: 'Tanggal Terbit',
			width: 90,
			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>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: 'idmk',
    id: 'idmk',
    readOnly:true,
    width: 250 
},
{
    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: 250 
},
{
    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('dosen').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();
 }
}]
}],
   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["idmk"],
            pengguna:rec.data["pengguna"], 	
            tglpublish:rec.data["tglpublish"],
            jampublish:rec.data["jampublish"],	
            subjek:rec.data["subjek"],
            sesi:rec.data["idsesi"], 	
            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],
     }],
     listeners: {
         'afterrender': function() {

         }
     }
 });

    get_content(materi);
}