PDA

View Full Version : Grid Column Sort not works!



stvhui
27 Apr 2010, 8:06 PM
Hello to you,

I'm newbie using extjs 3.2.0

I download sample code from internet, purpose is displaying data into grid using simpledatastore.

If I use extjs library version 2.3.0 its works well, means when I click the grid column header, it can do sorting
but
If I use extjs library version 3.0.0 its not works, means when I click the grid column header, it is no-action

Please help and thanks in advance.

The source code is as show below:


Ext.onReady(function(){

Ext.QuickTips.init();


var Checkbox = new Ext.grid.CheckboxSelectionModel();
var SimpleDataStore = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
{
url: 'pesan.php',
method: 'POST'
}),

baseParams:
{
orderby:'Nota',
sort:'DESC'

},

reader: new Ext.data.JsonReader(
{
root: 'results',
totalProperty: 'total'
},
[
{name: 'Nota', type: 'int'},
{name: 'Nama', type: 'string'},
{name: 'Status', type: 'string'}

]),

sortInfo:{field: 'Nota', direction: "DESC"}
});

SimpleDataStore.load({params:{start:0,limit:11,orderby:'Nota',sort:'ASC'}});


var TampilanDepan = new Ext.grid.ColumnModel
([
Checkbox,
{
header: 'Nota',
readOnly: true,
dataIndex: 'Nota',
width: 100,
hidden: false

},
{
header: 'Nama',
dataIndex: 'Nama',
width: 240

},
{
header: 'Status',
dataIndex: 'Status',
width: 230
}

]);

TampilanDepan.defaultSortable= true;


//==================================================//
// FORM TAMBAH DATA //
//==================================================//
var tambah = new Ext.FormPanel({
url:'pesan.php?act=add',
baseParams:{
act:"add"
},
width: 380,
height:170,
frame: true,
labelWidth: 95,
defaults: {allowBlank: false},

items: [
{
xtype: 'textfield',
fieldLabel: 'Nama',
anchor: '70%',
name: 'Nama'
},

new Ext.form.ComboBox ({
name: 'Status',
fieldLabel:'Status',
store:new Ext.data.SimpleStore({
fields:['statusValue','statusNama'],
data: [['1','Sedang Dikerjakan'],['2','Sudah Selesai'],['3','Sudah Diambil']]
}),
mode:'local',
displayField: 'statusNama',
valueField: 'statusValue',
anchor:'90%',
triggerAction: 'all'
})

],
buttons: [{
text: 'Save Data',
handler: function(){

tambah.getForm().submit({

success: function(tambah, o)
{
SimpleDataStore.reload();
TambahForm.hide();
},

failure: function(tambah, o)
{
Ext.MessageBox.alert('Warning','Failur');
}
});

}
},{
text: 'Reset',
handler: function()
{
tambah.getForm().reset();
}
}]
});


var TambahForm = new Ext.Window({
title: 'Tambah Data',
closable:true,
closeAction:'hide',
width: 380,
height:170,
layout: 'fit',
listeners : {
show : function () {
tambah.getForm().reset();
}
},
modal: true,
items: tambah
});

function displayTambahForm(){
if(!TambahForm.isVisible())
{
TambahForm.show();
}
else
{
TambahForm.toFront();
}
}

//===================================================
// FORM EDIT DATA //
//===================================================
var Edit = new Ext.form.FormPanel({
url:'pesan.php?act=edit',
baseParams:{
act:"edit"
},
width: 380,
height:170,
labelWidth: 95,
frame:true,
reader: new Ext.data.JsonReader ({
root: 'results',
totalProperty: 'total',
id: 'Nota',
fields: [
'Nota','Nama','Status',
]
}),
items:
[
new Ext.form.Hidden
({
name: 'Nota'
}),
{
xtype: 'textfield',
fieldLabel: 'Nama',
anchor: '70%',
name: 'Nama'
},

new Ext.form.ComboBox ({
name: 'Status',
fieldLabel:'Status',
store:new Ext.data.SimpleStore({
fields:['statusValue','statusNama'],
data: [['1','Sedang Dikerjakan'],['2','Sudah Selesai'],['3','Sudah Diambil']]
}),
mode:'local',
displayField: 'statusNama',
valueField: 'statusValue',
anchor:'90%',
triggerAction: 'all'
})

],

buttons: [{
text: 'SAVE',
handler:function()
{
Edit.getForm().submit
({
waitMsg:'Simpan Data...',

success: function(form, action)
{
Ext.MessageBox.alert('Succcess', 'Edit Data Berhasil');
SimpleDataStore.load({params:{start:0,limit:11}});
EditForm.hide();
Edit.getForm().reset();
},

failure: function(form, action)
{
Ext.MessageBox.alert('Error', 'Edit Data Gagal');
Edit.getForm().reset();
}

})
}
},
{
text: 'Cancel',
handler: function()
{
EditForm.hide();
}
}]
});
var EditForm = new Ext.Window({
title: 'Edit Input',
closable:true,
closeAction:'hide',
width: 380,
height:170,
layout: 'fit',
modal: true,
items: [
Edit
]
});

function del(btn)
{
if(btn == 'yes')
{
var m = EditorGrid.getSelectionModel().getSelections();
var store = EditorGrid.getStore();

for(var i=0; i< m.length; i++){
var rec = m[i];
if(rec){
SimpleDataStore.load({
params:{del:rec.get("Nota"),start:0,limit:10},
callback: function(){

}
});store.remove(rec);
}
}

}
}


var EditorGrid = new Ext.grid.GridPanel({
store: SimpleDataStore,
closable: true,
loadMask: true,
layout:'fit',
autoWeidth:true,
autoHeight:true,
stripeRows: true,
cm: TampilanDepan,
sm: Checkbox,

tbar:[
{
text: 'Tambah',
iconCls:'add',
handler: displayTambahForm
},'-',

{
text:'Edit1',
iconCls:'edit',
handler: function()
{
var m = EditorGrid.getSelectionModel().getSelections();
if(m.length > 0)
{
Edit.getForm().load({url:'pesan.php?act=get&Nota='+ m[0].get('Nota'), waitMsg:'Loading'});
EditForm.show();
}
else
{
Ext.MessageBox.alert('Warning', 'Pilih Salah Satu Yang Mau Anda Edit');
}
}

},'-',

{
text:'Hapus',
iconCls:'remove',
handler: function()
{
var m = EditorGrid.getSelectionModel().getSelections();
if(m.length > 0)
{
Ext.MessageBox.confirm('Konfirmasi', 'Apakah Anda Yakin Menghapus Field Ini?' , del);
}
else
{
Ext.MessageBox.alert('Warning', 'Pilih Salah Satu Yang Mau Anda Hapus');
}
}

}

],
viewConfig: {
forceFit:true
},

collapsible: true,
animCollapse: true,



bbar: new Ext.PagingToolbar({
pageSize: 11,
store: SimpleDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})

});

EditorGrid.render('costomer');

});
Regards,

Steven