Ok as promise. Let's take a look to my example:
According to the example of the Room (class which extends modResource) and the RoomPrice (class that extends xpdoSimpleObject) I created my controller.
For convenience I created the additional panel (ExtJs) in an external file which then inside the controller I linked.
The tab "price list" is a simple table ExtJs:
Swingtime.grid.Prezzi = function(config) {
config = config || {};
Ext.applyIf(config,{
id: 'Swingtime-grid-Prezzi'
,url: Swingtime.connector_url
,baseParams: { action: 'mgr/prezzi/getList', roomID: Swingtime.roomID, classKey: Swingtime.classKey}
,fields: [
,{ name: 'id', type: 'int' }
,{ name: 'roomPrice_id', type: 'int' }
,{ name: 'price', type: 'string' }
,{ name: 'priceType_id', type: 'int' }
,{ name: 'priceDeal_id', type: 'int' }
,{ name: 'priceTarget_id', type: 'int' }
,{ name: 'date_start', type: 'date' }
,{ name: 'date_end', type: 'date' }
,{ name: 'priceInfo', type: 'string' }
]
,paging: true
,remoteSort: true
,lazyRender: true
,anchor: '97%'
,autoExpandColumn: 'price'
,save_action: 'mgr/prezzi/updatefromgrid'
,autosave: true
,getMenu: function() {
return [{
text: 'Update'
,handler: this.updatePrezzi
},{
text: 'Remove'
,handler: this.removePrezzi
}];
}
,updatePrezzi: function(btn,e) {
if (!this.updatePrezziWindow) {
this.updatePrezziWindow = MODx.load({
xtype: 'Swingtime-window-Update-Prezzo'
,record: this.menu.record
,listeners: {
'success': {fn:this.refresh,scope:this}
}
});
}
this.updatePrezziWindow.setValues(this.menu.record);
this.updatePrezziWindow.show(e.target);
}
,removePrezzi: function() {
MODx.msg.confirm({
title: 'Remove'
,text: 'Are you Sure?'
,url: this.config.url
,params: {
action: 'mgr/prezzi/remove'
,id: this.menu.record.id
}
,listeners: {
'success': {fn:this.refresh,scope:this}
}
});
}
,columns: [{
header: 'Price'
,dataIndex: 'price'
,sortable: true
,width: 100
,editor: { xtype: 'numberfield' }
},{
header: 'Price Type'
,dataIndex: 'priceType_id'
,sortable: true
,width: 150
,editor:{ xtype: 'Swingtime-combo-priceType', renderer: true}
},{
header: 'Price Deal'
,dataIndex: 'priceDeal_id'
,sortable: true
,width: 150
,editor:{ xtype: 'Swingtime-combo-priceDeal', renderer: true}
},{
header: 'Price Target'
,dataIndex: 'priceTarget_id'
,sortable: true
,width: 150
,editor:{ xtype: 'Swingtime-combo-priceTarget', renderer: true}
},{
header: 'Date Start'
,dataIndex: 'date_start'
,sortable: true
,width: 150
,editor: {xtype: 'datefield' }
},{
header: 'Date End'
,dataIndex: 'date_end'
,sortable: true
,width: 150
,editor: { xtype: 'datefield' }
}]
,tbar:[{
text: 'Add new price'
,handler: { xtype: 'Swingtime-window-Create-Prezzo' ,blankValues: true }
},{
xtype: 'textfield'
,id: 'Swingtime-search-filter'
,emptyText: 'Search...'
,listeners: {
'change': {fn:this.search,scope:this}
,'render': {fn: function(cmp) {
new Ext.KeyMap(cmp.getEl(), {
key: Ext.EventObject.ENTER
,fn: function() {
this.fireEvent('change',this);
this.blur();
return true;
}
,scope: cmp
});
},scope:this}
}
}]
});
Swingtime.grid.Prezzi.superclass.constructor.call(this,config)
};
Ext.extend(Swingtime.grid.Prezzi,MODx.grid.Grid);
Ext.reg('Swingtime-grid-Prezzi',Swingtime.grid.Prezzi);
I've omitted to report other functions in my ExtJs, by the way, there're two function as Window ExtJs that allow me to Create or Edit a RoomPrice.
The second step is to connect to my ExtGrid panel creation / update the resource Room, which is nothing more than a modResource. So within my controller, I added a replica of the ExtJs panel of the resource, edited according to my needs (in this case by adding the Tab with the others, Settings, Resource Group, Template Vars, etc.).
So in my controllers i've something like:
$this->addLastJavascript($swingtimeJsUrl.'room/update.js');
$this->addLastJavascript($swingtimeJsUrl.'room/prices.grid.js');
update.js is exactly the same Js of resource.update.js.
prices.grid.js is my custom grid to add.
Ok now let's see how link grid with the Resource panel:
Inside the ExtJs Resource Panel (my update.js) there's a function called:
,getFields: function(config) {}
Inside of it you can work on the structure of your resource ExtPanel. What I've done? I've add a tab:
,getFields: function(config) {
var it = [];
if (config.show_tvs && MODx.config.tvs_below_content != 1) {
it.push({
title: 'Room'
,items: this.getTemplateVariablesPanel(config)
}
);
}
it.push({
title: 'SEO'
,id: 'modx-resource-settings'
,cls: 'modx-resource-tab'
,layout: 'form'
,labelAlign: 'top'
,labelSeparator: ''
,bodyCssClass: 'tab-panel-wrapper main-wrapper'
,autoHeight: true
,defaults: {
border: false
,msgTarget: 'under'
,width: 400
}
,items: this.getMainFields(config)
});
it.push({
title: 'Price Table'
,id: 'modx-resource-priceTable'
,cls: 'modx-resource-tab'
,layout: 'form'
,labelAlign: 'top'
,labelSeparator: ''
,bodyCssClass: 'tab-panel-wrapper main-wrapper'
,autoHeight: true
,defaults: {
border: false
,msgTarget: 'under'
,width: '98%'
}
,items: [{
title: _('swingtime')
,defaults: { autoHeight: true }
,items: [{
html: '<p>Here you can manage the relative prices of the selected room</p>'
,border: false
,bodyCssClass: 'panel-desc'
},{
xtype: 'Swingtime-grid-Prezzi'
,cls: 'main-wrapper'
,anchor:'98%'
,width:'98%'
,preventRender: true
}]
}]
});
it.push({
id: 'modx-page-settings'
,title: _('settings')
,cls: 'modx-resource-tab'
,layout: 'form'
,forceLayout: true
,deferredRender: false
,labelWidth: 200
,bodyCssClass: 'main-wrapper'
,autoHeight: true
,defaults: {
border: false
,msgTarget: 'under'
}
,items: this.getSettingFields(config)
});
if (MODx.perm.resourcegroup_resource_list == 1) {
it.push(this.getAccessPermissionsTab(config));
}
var its = [];
its.push(this.getPageHeader(config),{
id:'modx-resource-tabs'
,xtype: 'modx-tabs'
,forceLayout: true
,deferredRender: false
,collapsible: true
,animCollapse: false
,itemId: 'tabs'
,items: it
});
var ct = this.getContentField(config);
/*if (ct) {
its.push({
title: _('resource_content')
,id: 'modx-resource-content'
,layout: 'form'
,bodyCssClass: 'main-wrapper'
,autoHeight: true
,collapsible: true
,animCollapse: false
,hideMode: 'offsets'
,items: ct
,style: 'margin-top: 10px'
});
}*/
if (MODx.config.tvs_below_content == 1) {
var tvs = this.getTemplateVariablesPanel(config);
its.push(tvs);
}
return its;
}
As you can see here I changed more things as well as add my Tab.
First of one I've change the order: I moved TV Tab at the beginning of rendering, this way is the first tab that is displayed.
if (config.show_tvs && MODx.config.tvs_below_content != 1) {
it.push({
title: 'Room'
,items: this.getTemplateVariablesPanel(config)
}
);
}
The second things i've done was to change some settings of Resource Tab, like the title, in my case SEO.
it.push({
title: 'SEO'
,id: 'modx-resource-settings'
,cls: 'modx-resource-tab'
,layout: 'form'
,labelAlign: 'top'
,labelSeparator: ''
,bodyCssClass: 'tab-panel-wrapper main-wrapper'
,autoHeight: true
,defaults: {
border: false
,msgTarget: 'under'
,width: 400
}
,items: this.getMainFields(config)
});
And now comes the fun part: I added my ExtGrid.
it.push({
title: 'Price Table'
,id: 'modx-resource-priceTable'
,cls: 'modx-resource-tab'
,layout: 'form'
,labelAlign: 'top'
,labelSeparator: ''
,bodyCssClass: 'tab-panel-wrapper main-wrapper'
,autoHeight: true
,defaults: {
border: false
,msgTarget: 'under'
,width: '98%'
}
,items: [{
title: _('swingtime')
,defaults: { autoHeight: true }
,items: [{
html: '<p>Here you can manage the relative prices of the selected room</p>'
,border: false
,bodyCssClass: 'panel-desc'
},{
xtype: 'Swingtime-grid-Prezzi'
,cls: 'main-wrapper'
,anchor:'98%'
,width:'98%'
,preventRender: true
}]
}]
});
Many lines about customizing the appearance.
What interests us here is that i've added a new tab and inside of it I've put my "Items", that is ExtGrid Price Table. As you can see in the line where you choose your Xtype I've selected exactly the grid that I've posted before.
xtype: 'Swingtime-grid-Prezzi'
that's all
Hope can help! let me know
☆ A M B ☆
☆ A M B ☆