Quote from: shamblett at Jan 23, 2009, 08:23 AM
OK javascript/ajax guys, have a look at the attached pic, its the change template screen of the doc manager, the combo box allows template selection, this is connected to a processor and works OK, the static text field allows the input of doc id’s a la the evo design, with supporting text.
Question, how do I put a ’submit’ button on this to send the selected template and the text string to a back end processor to actually do the change?
That depends on how you’re doing it. There’s a couple of ways:
1. The page is built out of a MODx.FormPanel and has a ’save’ button at the bottom.
2. The page uses MODx.ActionButtons and utilizes the MODExt form processing functions. (preferred)
Here’s some code for #2, assuming you’re using Smarty, and the page is a modAction hooked to a custom DocManager context. Your file paths, of course, might be different.
HTML:
<div id="dm-panel-docmanager"></div>
<script type="text/javascript" src="{$_config.context_url}assets/js/widgets/dm.panel.docmanager.js"></script>
dm.panel.docmanager.js:
Ext.namespace('DM','DM.config','DM.panel','DM.page');
DM.config = {
/* obviously change this to your connector */
connector_url: MODx.config.base_url+'assets/components/docmanager/core/processors/connector.php'
};
Ext.onReady(function() {
MODx.load({ xtype: 'dm-page-docmanager'}); /* renders panel on domready */
});
/* the _() loads a lexicon string, if you aren't using i18n support
then simply the 'Text Here' is fine
*/
/* this class loads the stuff into a MODx page, which includes the action buttons (top right fixed CSS buttons) */
DM.page.DocManager = function(config) {
config = config || {};
Ext.applyIf(config,{
formpanel: 'dm-panel-docmanager' /* point to the ID of the FormPanel, so that the action buttons know what form to save */
,buttons: [{
process: 'save' /* specifies 'action' POST param for processor */
,text: _('save')
,method: 'remote'
,keys: [{ /* allows you to press alt+ctrl+s to save */
key: 's'
,alt: true
,ctrl: true
}]
}]
,components: [{
xtype: 'dm-panel-docmanager' /* xtype specified by Ext.reg */
,renderTo: 'dm-panel-docmanager' /* render the panel into the HTML div */
}]
});
DM.page.DocManager.superclass.constructor.call(this,config);
};
Ext.extend(DM.page.DocManager,MODx.Component);
Ext.reg('dm-page-docmanager',DM.page.DocManager);
DM.panel.DocManager = function(config) {
config = config || {};
Ext.applyIf(config,{
id: 'dm-panel-docmanager'
,url: DM.config.connector_url
,baseParams: {
action: 'save'
}
,defaults: { collapsible: false ,autoHeight: true }
,items: [{
html: '<h2>'+_('change_template')+'</h2>'
,id: 'dm-panel-header'
,cls: 'modx-page-header' /* gets you the nice header formatting */
,border: false
},{
layout: 'form'
,bodyStyle: 'padding: 1.5em;'
,items: [{
name: 'template'
,fieldLabel: _('template')
,xtype: 'combo-template' /* there's a modx-built combo for templates already */
,id: 'dm-template'
},{
name: 'resource_ids'
,fieldLable: _('specify_range_resource_ids')
,xtype: 'textfield'
,id: 'dm-resource-ids'
},{
html: '<p>'+_('resource_ids_key')+'</p>'
,border: false
}]
}]
,listeners: {
'setup': {fn:this.setup,scope:this}
,'success': {fn:this.success,scope:this}
,'beforeSubmit': {fn:this.beforeSubmit,scope:this}
}
});
DM.panel.DocManager.superclass.constructor.call(this,config);
};
Ext.extend(DM.panel.DocManager,MODx.FormPanel,{
initialized: false
,setup: function() {
/* do any post-render actions here */
this.initialized = true;
this.fireEvent('ready');
}
,beforeSubmit: function(o) {
/* do any pre-submit actions here */
Ext.apply(o.form.baseParams,{
});
}
,success: function(o) {
/* do any post-success actions here */
}
});
Ext.reg('dm-panel-docmanager',DM.panel.DocManager);
Feel free to ask any questions on that you might have.
I’ve had a look through modext and ext2 and have become thoroughly confused, is there an API doc for any of this?
Unfortunately, not yet - the code changes significantly, often. As soon as it’s stable I’ll get something up. For now your best bet is to look at how it’s done on the different manager pages.
There are Ext docs, however, at:
http://extjs.com/deploy/dev/docs/
MODX Staff
Nice work guys!