So I decided to jump into the deep end of the pool and build a custom manager page for managing a custom database table. My skills are mostly geared toward the front-end, so I knew this would be an undertaking.
After a few days of banging around with Bob Ray’s tutorial and Shaun McCormick’s examples (modExtra and Doodles) I have a working grid, with one glitch, my columns won’t sort.
Here’s my items.grid.js file.
storeAddresses.grid.Items = function(config) {
config = config || {};
Ext.applyIf(config,{
id: 'storeaddresses-grid-items'
,url: storeAddresses.config.connector_url
,baseParams: {
action: 'mgr/item/getlist'
}
,fields: ['id','city','street']
,autoHeight: true
,paging: true
,remoteSort: true
,columns: [{
header: _('id')
,dataIndex: 'id'
,sortable: true
,width: 70
},{
header: _('storeaddresses.city')
,dataIndex: 'city'
,sortable: true
,width: 200
},{
header: _('storeaddresses.street')
,dataIndex: 'street'
,sortable: false
,width: 250
}]
,tbar: [{
text: _('storeaddresses.item_create')
,handler: this.createItem
,scope: this
}]
});
storeAddresses.grid.Items.superclass.constructor.call(this,config);
};
Ext.extend(storeAddresses.grid.Items,MODx.grid.Grid,{
windows: {}
,getMenu: function() {
var m = [];
m.push({
text: _('storeaddresses.item_update')
,handler: this.updateItem
});
m.push('-');
m.push({
text: _('storeaddresses.item_remove')
,handler: this.removeItem
});
this.addContextMenuItem(m);
}
,createItem: function(btn,e) {
if (!this.windows.createItem) {
this.windows.createItem = MODx.load({
xtype: 'storeaddresses-window-item-create'
,listeners: {
'success': {fn:function() { this.refresh(); },scope:this}
}
});
}
this.windows.createItem.fp.getForm().reset();
this.windows.createItem.show(e.target);
}
,updateItem: function(btn,e) {
if (!this.menu.record || !this.menu.record.id) return false;
var r = this.menu.record;
if (!this.windows.updateItem) {
this.windows.updateItem = MODx.load({
xtype: 'storeaddresses-window-item-update'
,record: r
,listeners: {
'success': {fn:function() { this.refresh(); },scope:this}
}
});
}
this.windows.updateItem.fp.getForm().reset();
this.windows.updateItem.fp.getForm().setValues(r);
this.windows.updateItem.show(e.target);
}
,removeItem: function(btn,e) {
if (!this.menu.record) return false;
MODx.msg.confirm({
title: _('storeaddresses.item_remove')
,text: _('storeaddresses.item_remove_confirm')
,url: this.config.url
,params: {
action: 'mgr/item/remove'
,id: this.menu.record.id
}
,listeners: {
'success': {fn:function(r) { this.refresh(); },scope:this}
}
});
}
});
Ext.reg('storeaddresses-grid-items',storeAddresses.grid.Items);
storeAddresses.window.CreateItem = function(config) {
config = config || {};
this.ident = config.ident || 'mecitem'+Ext.id();
Ext.applyIf(config,{
title: _('storeaddresses.item_create')
,id: this.ident
,height: 150
,width: 475
,url: storeAddresses.config.connector_url
,action: 'mgr/item/create'
,fields: [{
xtype: 'textfield'
,fieldLabel: _('name')
,name: 'name'
,id: 'storeaddresses-'+this.ident+'-name'
,width: 300
},{
xtype: 'textarea'
,fieldLabel: _('description')
,name: 'description'
,id: 'storeaddresses-'+this.ident+'-description'
,width: 300
}]
});
storeAddresses.window.CreateItem.superclass.constructor.call(this,config);
};
Ext.extend(storeAddresses.window.CreateItem,MODx.Window);
Ext.reg('storeaddresses-window-item-create',storeAddresses.window.CreateItem);
storeAddresses.window.UpdateItem = function(config) {
config = config || {};
this.ident = config.ident || 'meuitem'+Ext.id();
Ext.applyIf(config,{
title: _('storeaddresses.item_update')
,id: this.ident
,height: 150
,width: 475
,url: storeAddresses.config.connector_url
,action: 'mgr/item/update'
,fields: [{
xtype: 'hidden'
,name: 'id'
,id: 'storeaddresses-'+this.ident+'-id'
},{
xtype: 'textfield'
,fieldLabel: _('name')
,name: 'name'
,id: 'storeaddresses-'+this.ident+'-name'
,width: 300
},{
xtype: 'textarea'
,fieldLabel: _('description')
,name: 'description'
,id: 'storeaddresses-'+this.ident+'-description'
,width: 300
}]
});
storeAddresses.window.UpdateItem.superclass.constructor.call(this,config);
};
Ext.extend(storeAddresses.window.UpdateItem,MODx.Window);
Ext.reg('storeaddresses-window-item-update',storeAddresses.window.UpdateItem);
Any insights would be appreciated.
My Revolution install is up to date 2.0.4pl2