Mar 162015
 

Assalamu’ alaikum wr wb

Tutorial ExtJs 4 Bagian 2 (Load data grid)

Kalo pada tutorial pertama kita membahas tentang bagaimana membuat panel menu (Tutorial ExtJs 4 Bagian 1 (Panel and menu)) , pada tutorial kali ini kita akan belajar bagaimana cara load data pada grid extjs.

Baiklah mari kita mulai, untuk pertama yang kita lakukan adalah membuat view pada halaman html kita. berikut adalah script nya :

</p>
//Grid
Ext.define('AgamaModel', {
 extend: 'Ext.data.Model',
 fields: [
 {name: 'a_code', type: 'string'},
 {name: 'a_name', type: 'string'},
 {name :'a_status', type: 'integer'},
 {name :'user_entry', type : 'string'},
 {name :'date_entry',type :'string'},
 {name :'date_edit',type :'string'}
 ]
});
//Define the store below, providing it the Model and the URL of PHP file

var storeAgama = Ext.create('Ext.data.Store', {
 pageSize: 50,
 model: 'AgamaModel',
 proxy: {
 type: 'ajax',
 url : '<?php echo site_url('agama/getdata'); ; ?>',
 reader: {
 type: 'json',
 totalProperty: 'jumlah',
 root: 'data'
 },
 extraParams:{
 action:'pagingTestGrid'
 }
 },
 autoLoad: true
});

function setAktif(v){
 if (v==1){
 return 'Aktif';
 }else if(v==0){
 return 'Tidak Aktif';
 }else{
 return 'NA';
 }
}

var smAgama = Ext.create('Ext.selection.CheckboxModel');

var gridAgama = Ext.create('Ext.grid.Panel', {
 store: storeAgama,
 frame : true,
 //layout : 'fit',
 //autoheight: true,
 selModel : smAgama,
 verticalScrollerType: 'paginggridscroller',
 loadMask: true,
 //disableSelection: true,
 invalidateScrollerOnRefresh: false,

columns: [
 {
 text : 'ID',
 width: 50,
 dataIndex: 'a_code',
 field: {
 type: 'textfield',
 allowBlank: false
 },
 filter: {
 xtype: 'textfield',
 filterName: 'a_code'
 }
 },
 {
 text : 'Nama',
 sortable : true,
 width : 100,
 flex: 1,
 dataIndex: 'a_name',
 field: {
 type: 'textfield',
 allowBlank: false
 },
 filter: {
 xtype: 'textfield',
 filterName: 'a_name'
 }
 },{
 text : 'Status',
 sortable : true,
 width : 100,
 dataIndex: 'a_status',
 renderer : setAktif,
 field: {
 type: 'textfield',
 allowBlank: false
 },
 filter: {
 xtype: "combo",
 mode: "local",
 store: [['','All'],["0","Tidak Aktif"],["1","Aktif"]],
 triggerAction: "all",
 fieldName : 'a_status'
 }

 },{
 text : 'User Entry',
 sortable : true,
 width : 100,
 dataIndex: 'user_entry',
 field: {
 type: 'textfield',
 allowBlank: false
 },
 filter: {
 xtype: 'textfield',
 filterName: 'user_entry'
 }
 },{
 header : 'Date Entry',
 renderer : formatDate,
 sortable : true,
 width : 300,
 dataIndex: 'date_entry',
 field: {
 type: 'date',
 allowBlank: false
 },
 filter: [
 {
 xtype: 'datefield',
 filterName: 'date_entry'
 }
 ]
 },{
 header : 'Date Edit',
 sortable : true,
 renderer : formatDate,
 width : 300,
 dataIndex: 'date_edit',
 field: {
 type: 'date',
 allowBlank: false
 },
 filter: {
 xtype: 'datefield',
 filterName: 'date_edit'
 }
 }
 ],
 tbar: [
 {
 text: 'Tambah',
 //cls : 'button',
 iconCls: 'new_kecil',
 handler: function(btn, e) {
 e.preventDefault();
 frmAgama.getForm().reset();
 frmAgama.getForm().findField('a_code').setDisabled(false);
 winAgama.show();
 }
 }, {
 text: 'Edit',
 iconCls: 'edit_kecil',
 handler: function() {
 var s = gridAgama.getSelectionModel().getSelection()[0];
 frmAgama.getForm().loadRecord(s);
 frmAgama.getForm().findField('a_code').setDisabled(true);
 winAgama.show();
 }
 }, {
 text: 'Hapus',
 iconCls: 'tombolHapusKecil',
 handler: function() {
 Ext.MessageBox.confirm('Message', 'Apakah anda ingin menghapus data ini?', deleteAgama);
 }
 }
 , {
 text: 'Cetak',
 iconCls: 'print_kecil',
 id: 'btnPrint',
 handler: function() {
 new Ext.Window({
 title : 'Print Preview',
 frame : false,
 width: 700,
 height: 600,
 modal: true,
 y : 10,
 html:'<div align="center"><img src="/assets/images/loading-blue.gif" style="padding-right:10px;padding-left:6px;"/></div>' ,
 items: {
 xtype: 'component',
 autoEl: {
 tag: 'iframe',
 waitMsg : 'Loading ...',
 style: 'height: 100%; width: 100%; border: none',
 src: "<?php echo site_url('agama/exportpdf'); ?>"
 }
 }
 }).show();
 }
 },'-',
 {
 xtype: 'button',
 text: 'Reset Filters',
 iconCls :'icon-reset',
 handler: function(){
 gridAgama.resetHeaderFilters();
 }
 },
 {
 xtype: 'button',
 text: 'Clear Filters',
 iconCls :'icon-clear',
 handler: function(){
 gridAgama.clearHeaderFilters();
 }
 },
 {
 xtype: 'button',
 text: 'Apply Filters',
 iconCls :'icon-filter',
 handler: function(){
 gridAgama.applyHeaderFilters();
 }
 },
 '->','Export Data :','-',{
 iconCls :'pdf'
 ,text : 'pdf'
 ,tooltip : 'Export data ke pdf'
 ,handler : function() {
 window.open('<?php echo site_url('agama/exportpdf'); ?>', 'Report','width=600,height=500,toolbar=yes,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
 }
 },{
 iconCls : 'xls'
 ,text : 'xls'
 ,tooltip : 'Export data ke Excel'
 ,handler : function() {
 window.open('<?php echo site_url('agama/exportxls'); ?>', 'Report','width=600,height=500,toolbar=yes,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
 }
 },{
 iconCls : 'doc'
 ,text : 'doc'
 ,tooltip : 'Export data ke MS Word'
 ,toolsTip : 'Word'
 ,handler : function() {
 window.open('<?php echo site_url('agama/exportdoc'); ?>', 'Report','width=600,height=500,toolbar=yes,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
 }
 }
 ],
 bbar: Ext.create('Ext.PagingToolbar', {
 pageSize : 50
 ,store : storeAgama
 ,displayInfo: true
 ,displayMsg : 'Data yang ada {0} - {1} Dari {2}'
 ,emptyMsg : "Tidak ada data"
 }),
 plugins: [
 Ext.create('Ext.ux.grid.GridHeaderFilters'),
 Ext.create('Ext.grid.plugin.RowEditing', {
 clicksToMoveEditor: 1,
 autoCancel: true
 })
 ],
 headerFilters: {}
});
<p style="text-align: justify;">

Wassalamu’alaikum wr wb

Facebook Comments

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)