PDA

View Full Version : Search grid plugin and desktop example



gsfipa
20 Sep 2009, 11:20 AM
Hi,
I'm using Ext.ux.grid.Search.js (http://gridsearch.extjs.eu/source.php?file=js/Ext.ux.grid.Search.js) plugin in a desktop application. The plugin works well in Ie but not in firefox. With Firefox i can't render the search field near the zoom icon.
The code is


Ext.ux.SettingsGrid = Ext.extend(Ext.grid.EditorGridPanel, {
layout:'fit'
,border:false
,stateful:false
,url: '/admin/cms_settings/index2'
,deleteUrl: '/admin/cms_settings/delete'
,saveUrl: '/admin/cms_settings/save'
,objName:'settings'
,idName:'id'
,stripeRows: true
// {{{
,initComponent:function() {
this.recordForm = new Ext.ux.grid.RecordForm({
title:'Variabili d\'ambiente'
,iconCls:'icon-edit-record'
,columnCount:2
//,ignoreFields:{id:true}
//,readonlyFields:{data[CmsSetting][created]:true}
//,disabledFields:{data[CmsSetting][modified]:true}
,formConfig:{
labelWidth:80
,buttonAlign:'right'
,bodyStyle:'padding-top:10px'
}
});

Ext.apply(this, {
// {{{
store:new Ext.data.Store({
reader:new Ext.data.JsonReader({
id:'id'
,totalProperty:'total'
,root:'data'
,fields:[
{name: 'id', mapping: "id", type:'int'}
,{name: 'key', mapping: "key", type:'string'}
,{name: 'pair', mapping: "pair", type:'string'}
,{name: 'description', mapping: "description", type:'string'}
]
})
,proxy:new Ext.data.HttpProxy({url:this.url})
//,baseParams:{cmd:'getData', objName:this.objName}
,sortInfo:{field:'key', direction:'ASC'}
,remoteSort:true
,listeners:{
load:{scope:this, fn:function(store) {

// keep modified records accros paging
var modified = store.getModifiedRecords();
for(var i = 0; i < modified.length; i++) {
var r = store.getById(modified[i].id);
if(r) {
var changes = modified[i].getChanges();
for(p in changes) {
if(changes.hasOwnProperty(p)) {
r.set(p, changes[p]);
}
}
}
}
}}
}
})
// }}}
// {{{
,autoExpandColumn: 'data[CmsSetting][description]'
,columns:[{
header:'ID'
,id:'id'
,dataIndex:'id'
,width:10
,sortable:true
,readOnly:true
},{
header:'Variabile'
,dataIndex:'key'
,width:60
,sortable:true
,align:'left'
,editor:new Ext.form.TextField({
allowBlank:false
,selectOnFocus:true
})
},{
header:'Valore'
,dataIndex:'pair'
,width:60
,sortable:true
,align:'left'
,editor:new Ext.form.TextField({
allowBlank:false
,selectOnFocus:true
})
},{
header:'Descrizione'
,dataIndex:'description'
,width:150
,sortable:true
,align:'left'
,editor:new Ext.form.TextArea({
grow:true
})
}]
// }}}
,plugins:[
new Ext.ux.grid.Search({
iconCls:'icon-zoom'
,minChars:2
,autoFocus:true
,readonlyIndexes:['id']
,disableIndexes:['id']
}), this.recordForm]
,viewConfig:{forceFit:true}
,buttons:[{
text:'Salva'
,iconCls:'icon-disk'
,scope:this
,handler:this.commitChanges
},{
text:'Reset'
,iconCls:'icon-undo'
,scope:this
,handler:function() {
this.store.each(function(r) {
r.reject();
});
this.store.modified = [];
// this.store.rejectChanges();
}
},{
text:'Elimina'
,iconCls:'icon-delete'
,listeners:{
click:{scope:this, fn:this.deleteRecord,buffer:200}
}
}
]
,tbar:[{
text:'Aggiungi'
,tooltip:'Aggiungi variabile d\'ambiente'
,iconCls:'icon-plus'
,id:'btn-add'
,listeners:{
click:{scope:this, fn:this.addRecord,buffer:200}
}
},{
text:'Aggiungi'
,tooltip:'Aggiungi variabile con il form'
,iconCls:'icon-form-add'
,listeners:{
click:{scope:this, buffer:200, fn:function(btn) {
this.recordForm.show(this.addRecord(), btn.getEl());
}}
}
}]
}); // eo apply

this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:10
});

// call parent
Ext.ux.SettingsGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
// }}}
// {{{
,onRender:function() {
// call parent
Ext.ux.SettingsGrid.superclass.onRender.apply(this, arguments);

// load store
this.store.load({params:{start:0,limit:10}});

} // eo function onRender
// }}}
// {{{
,addRecord:function() {
var store = this.store;
if(store.recordType) {
var rec = new store.recordType({newRecord:true});
rec.fields.each(function(f) {
rec.data[f.name] = f.defaultValue || null;
});
rec.commit();
store.add(rec);
return rec;
}
return false;
} // eo function addRecord
// }}}
// {{{

,commitChanges:function() {
var records = this.store.getModifiedRecords();
if(!records.length) {
return;
}
var data = [];
Ext.each(records, function(r, i) {
var o = r.getChanges();
if(r.data.newRecord) {
o.newRecord = true;
}
o[this.idName] = r.get(this.idName);
data.push(o);
}, this);
var o = {
url:this.saveUrl
,method:'post'
,callback:this.requestCallback
,scope:this
,params:{
cmd:'saveData'
,objName:this.objName
,data:Ext.encode(data) // Encode in Json
}
};
Ext.Ajax.request(o);
} // eo function commitChanges
// }}}
// {{{
,requestCallback:function(options, success, response) {
if(true !== success) {
this.showError(response.responseText);
return;
}
try {
var o = Ext.decode(response.responseText);
}
catch(e) {
this.showError(response.responseText, 'Cannot decode JSON object');
return;
}
if(true !== o.success) {
this.showError(o.error || 'Unknown error');
return;
}

switch(options.params.cmd) {
case 'saveData':
var records = this.store.getModifiedRecords();
Ext.each(records, function(r, i) {
if(o.insertIds && o.insertIds[i]) {
r.set(this.idName, o.insertIds[i]);
delete(r.data.newRecord);
}
});
this.store.each(function(r) {
r.commit();
});
this.store.modified = [];
// this.store.commitChanges();
break;

case 'deleteData':
break;
}
} // eo function requestCallback
// }}}
// {{{
,showError:function(msg, title) {
Ext.Msg.show({
title:title || 'Error'
,msg:Ext.util.Format.ellipsis(msg, 2000)
,icon:Ext.Msg.ERROR
,buttons:Ext.Msg.OK
,minWidth:1200 > String(msg).length ? 360 : 600
});
} // eo function showError
// }}}
// {{{
,deleteRecord:function(record) {
var index = this.getSelectionModel().getSelectedCell();
if (!index) {
return false;
}
var record = this.store.getAt(index[0]);
this.stopEditing();
Ext.Msg.show({
title:'Eliminare?'
,msg:'Sicuro di voler eliminare la variabile <b>' + record.get('key') + '</b>'
,icon:Ext.Msg.QUESTION
,buttons:Ext.Msg.YESNO
,scope:this
,fn:function(response) {
if('yes' !== response) {
return;
}
this.store.remove(record);
var o = {
url:this.deleteUrl
,method:'post'
,callback:this.requestCallback
,scope:this
,params:{
cmd:'deleteData'
,objName:this.objName
,data:record.get('id')
}
};
Ext.Ajax.request(o);
this.store.load();
this.getView().refresh()
// console.info('Deleting record');
}
});
} // eo function deleteRecord
// }}}

}); // eo extend

// register xtype
Ext.reg('settingsgrid', Ext.ux.SettingsGrid);

// app entry point

MyDesktop.SettingsWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',
init : function(){
this.launcher = {
text: 'Variabili d\'ambiente',
iconCls:'settings',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');

var win2 = new Ext.Window({
id:'rfwinbl'
,title:'Form'
,layout:'border'
,width:800
,height:400
,closable:true
,maximizable:true
,border:false
,stateful:false
,plugins:[new Ext.ux.menu.IconMenu({iconCls:'icon-grid'})]
,items:[{
region:'center'
,id:'center-grid'
,title:'Grid'
,stateful:false
,xtype:'settingsgrid'
,autoScroll:true
,plugins:[rf]
},{
region:'east'
,id:'east-form'
,title:'Form'
,stateful:false
,width:300
,split:true
,border:true
,frame:true
,collapsible:true
,layout:'fit'
}]
});
if(!win){
win = desktop.createWindow({
id: 'grid-win'
,title:'Impostazioni generali del sito'
,width:700
,height:400
,x:120
,y:20
,iconCls: 'settings'
,plain:true
,layout:'fit'
,closable:true
,border:false
,maximizable:true
,items:{xtype:'settingsgrid', id:'settingsgrid'}
,plugins:[new Ext.ux.menu.IconMenu()]
});
}
win.show();

var rf = new Ext.ux.grid.RecordForm({
formCt:'east-form'
,autoShow:true
,autoHide:false
// ,showButtons:false
,ignoreFields:{compID:true}
,formConfig:{autoHeight:false,border:true, frame:false, margins:'10 10 10 10'}
});

}
});

It can be a bug?
Alex