PDA

View Full Version : Large Screen HtmlEditorPopup



alienwiz
4 Jun 2008, 11:47 PM
Here is a small plugin for the HtmlEditor control. It will add a button to popup a window where the user can edit the html content in a larger format.

Create a plugin. You can put this code in your js includes:


Ext.namespace('Ext.ux', 'Ext.ux.plugins');
Ext.ux.plugins.HtmlEditorPopup = function(config) {
config = config || {};
Ext.apply(this, config);
this.init = function(htmlEditor) {
this.editor = htmlEditor;
this.editor.on('render', onRender, this);
};
this.popupeditor = function(){
strhtmlpop='';
winhtmlpop=new Ext.Window({scope:this,border:false, closable:true, modal:true, width:1000, height:500, items: [new Ext.form.FormPanel({layout:'fit',buttonAlign:'right',id:'frmpop', frame:false, border:false,
items:[new Ext.form.HtmlEditor({border:false, width:980, height:420, autoScroll:true, fieldLabel: '',id: 'popedit',allowBlank: true, labelSeparator: '', enableLinks :false, enableLists :false,enableSourceEdit :false,enableFontSize:false}),new Ext.Button({text:'Save',handler:function() {this.editor.setValue(strhtmlpop);strhtmlpop='';winhtmlpop.close();},scope:this,listeners:{click: function(b,e) {strhtmlpop=b.ownerCt.getComponent('popedit').getRawValue();}}})]
})]});
winhtmlpop.show();
winhtmlpop.getComponent('frmpop').getComponent('popedit').setValue(this.editor.getValue());
winhtmlpop.getComponent('frmpop').getComponent('popedit').show();
}
function onRender() {
if (!Ext.isSafari) {
this.editor.tb.insertButton(0,{
itemId : 'htmlPopupImage',cls : 'x-btn-icon',enableToggle: false,scope: this,
handler:function(){ this.popupeditor(); },
clickEvent:'mousedown',tabIndex:-1, tootip:'Large Size Editor'
});
}
}
}
To use the plugin:


new Ext.form.HtmlEditor({
fieldLabel: 'test',name: 'test',
allowBlank: true, width: 150,labelSeparator: '', enableLinks :false, enableLists :false,enableSourceEdit :false,enableFontSize:false,
width: 250, height:200,
plugins: new Ext.ux.plugins.HtmlEditorPopup()
});

yafou
6 Jun 2008, 12:45 AM
Hello
i add this to you plugin:
constrain: true



winhtmlpop=new Ext.Window({constrain: true,scope:this,border:false, closable:true, modal:true, width:1000, height:500, items: [new Ext.form.FormPanel({layout:'fit',buttonAlign:'right',id:'frmpop', frame:false, border:false,