Blog Fariz

Script extjs 3.0 search with XML

2010-01-11T22:09:00.000-08:00

var fm = Ext.form;

var cmlistRealisasi = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({header:'No',width:30}),
{
id:'idRealisasi',
header:'Jenis Biaya',
dataIndex:'jenisbiaya',
width:250
},{
header:'Satuan Biaya',
dataIndex:'satuanBiaya',
width:100
},{
header:'Harga',
dataIndex:'harga',
width:100
},{
header:'Jumlah',
dataIndex:'jumlah',
width:100
},{
header:'Refer/Bukti',
dataIndex:'bukti',
witdh:150
},{
header:'Keterangan',
dataIndex:'keterangan',
witdh:200
}
]);

cmlistRealisasi.defaultSortable = true;

var realisasi = Ext.data.Record.create([
{name:'jenisBiaya', type:'string'},
{name:'satuanBiaya', type:'string'},
{name:'harga', type:'string'},
{name:'jumlah', type:'string'},
{name:'bukti', type:'string'},
{name:'keterangan', type:'string'}
]);

//var summary = new Ext.ux.grid.GridSummary();

var storelistRealisasi = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:"combo/realisasiGrid.xml"}),
reader:new Ext.data.XmlReader({
record:'row'
}, realisasi)//,
// sortInfo:{field: 'namaBiaya', direction: "ASC"},
// groupField:'kodeAkun'
})

var pagingBar = new Ext.PagingToolbar({
pageSize: 25,
store: storelistRealisasi,
displayInfo:true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[{
frame:true,
text:'Tambah',
iconCls: 'addButton',
tooltip:'Tambah Rancangan',
pressed: false,
enableToggle:true,
handler:function(){
// formBiayaRencanaRealisasi.getForm().load();
// formBiayaRencanaRealisasi.getForm().reset();
windowlistrealisasi.show();
}
},'-',{
text:'Edit',
tooltip:'Edit Rancangan',
pressed: false,
iconCls:'editButton',
enableToggle:true,
handler:function(){
if(listRealisasi.getSelectionModel().getSelected() == null) {
Ext.Msg.alert("Alert" ,"Choose The Data!");
}else{
// formBiayaRencanaRealisasi.getForm().loadRecord(listRealisasi.getSelectionModel().getSelected());
storelistRealisasi.remove(listRealisasi.getSelectionModel().getSelected());
//form.getForm().reset();
// windowbiayarencanarealisasi.show();
}
}
},'-',{
text:'Hapus',
pressed: false,
enableToggle:true,
tooltip:'Hapus Rancangan',
iconCls:'delButton',
handler:function(){
listRealisasi.stopEditing();
if(listRealisasi.getSelectionModel().getSelected() == null) {
Ext.Msg.alert("Alert" ,"Choose The Data!");
}else{
var s = listRealisasi.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
storelistRealisasi.remove(r);
}
}

}
},'-',{
text:'Lihat Rincian',
pressed: false,
enableToggle:true,
tooltip:'Lihat Rincian Biaya',
iconCls:'pilihButton',
handler:function() {
// storeBiayaRencana.load({params:{JSONFile:"[" +"{"+"\"kegiatanID\":\""+perencanaanform.getForm().findField("kegiatanID").getValue() +"\"" + "}" +"]"}})
storelistRealisasi.load({params:{kegiatanID:perencanaanform.getForm().findField("kegiatanID").getValue()}});
}
}]
})

var searchBar = new fm.ComboBox({
store: searchStore,
displayField: 'query',
setWidth: 50,
typeAhead: false,
// mode: 'local',
// triggerAction: 'all',
hideTrigger: true
});

var listRealisasi = new Ext.grid.GridPanel({
store: storelistRealisasi,
id:'listRealisasi-panel',
name:'listRealisasi',
cm: cmlistRealisasi,
//renderTo: 'grid-company',
width:1200,
height:280,
autoExpandColumn:'idRealisasi',
title:'List Realisasi',
// plugins: summary,
frame:true,
//clicksToEdit:1,
selModel:new Ext.grid.RowSelectionModel({singleSelect:false}),
bbar:pagingBar,
tbar:[
'Filter Data: ', ' ',
new Ext.ux.SelectBox({
listClass:'x-combo-list-small',
// width:75,
value:'User Nama',
store: new Ext.data.SimpleStore({
fields: ['query'],
expandData: true,
data : ['Jenis Biaya', 'Satuan Biaya', 'Harga', 'Jumlah', 'Refer/Bukti', 'Keterangan']
}),
displayField: 'query'
}),' ',searchBar,

],
// view: new Ext.grid.GroupingView({
// forceFit:true,
// groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
// }),
stripeRows: true,
collapsible: true,
animCollapse: false

});

// new Ext.Button({
// renderTo: 'toggleSummary',
// text: 'Toggle Summary',
// handler: function(btn, e) {
// summary.toggleSummary();
// }
// });

storelistRealisasi.load();

var searchStore = new Ext.data.SimpleStore({
fields: ['query'],
data: []
});

var searchRec = Ext.data.Record.create([
{name: 'query', type: 'string'}
]);

var onFilteringBeforeQuery = function(e) {
//grid.getSelectionModel().clearSelections();
if (this.getValue().length==0) {
storelistRealisasi.clearFilter();
} else {
var value = this.getValue().replace(/^\s+|\s+$/g, "");
if (value==" ")
return;
storelistRealisasi.filterBy(function(r) {
valueArr = value.split(/\ +/);
for (var i=0; i re = new RegExp(Ext.escapeRe(valueArr[i]), "i");
if (re.test(r.data['jenisBiaya'])==false
&& re.test(r.data['satuanBiaya'])==false
&& re.test(r.data['harga'])==false
&& re.test(r.data['jumlah'])==false
&& re.test(r.data['bukti'])==false
&& re.test(r.data['keterangan'])==false) {
return false;
};
}
return true;
});
}};
var onQuickSearchBeforeQuery = function(e) {
if (this.getValue().length==0) {
} else {
var value = this.getValue().replace(/^\s+|\s+$/g, "");
if (value=="")
return;
searchStore.clearFilter();
var vr_insert = true;
searchStore.each(function(r) {
if (r.data['query'].indexOf(value)==0) {
// backspace
vr_insert = false;
return false;
} else if (value.indexOf(r.data['query'])==0) {
// forward typing
searchStore.remove(r);
}
});
if (vr_insert==true) {
searchStore.each(function(r) {
if (r.data['query']==value) {
vr_insert = false;
}
});
}
if (vr_insert==true) {
var vr = new searchRec({query: value});
searchStore.insert(0, vr);
}
var ss_max = 4; // max 5 query history, starts counting from 0; 0==1,1==2,2==3,etc
if (searchStore.getCount()>ss_max) {
var ssc = searchStore.getCount();
var overflow = searchStore.getRange(ssc-(ssc-ss_max), ssc);
for (var i=0; i searchStore.remove(overflow[i]);
}
}
}
};
searchBar.on("beforequery", onQuickSearchBeforeQuery);
searchBar.on("beforequery", onFilteringBeforeQuery);
searchBar.on("select", onFilteringBeforeQuery);

// trigger the data store load
storelistRealisasi.load();