PDA

View Full Version : filefield inside htmleditor



dekel.y
28 Mar 2014, 8:59 PM
Hi All,
I'm adding a filefield (button only) inside htmleditor but when I click the button the 'choose file' dialog is not opened.
it works fine when not inside htmleditor.

1. is this a limitation?
2. how can I put it as hidden button in a panel and invoke the 'choose file' dialog programmatically?



items: [{
xtype: 'htmleditor',
itemId: 'messageEditor',
flex: 1,
name: 'HtmlBody',
readOnly: false,
enableLinks: false,
enableSourceEdit: false,
listeners: {
render: function(_this, eOpts){
_this.toolbar.add([{xtype: 'button', html: 'aa'},
{
//xtype: 'filefield',
xtype: 'filefield',
itemId: 'addAttachmentBtn',
hideLabel: true,
buttonOnly: true,
buttonText: '',
buttonConfig: {
iconCls: 'emailAttachmentsBtnIcon'
},
//iconCls:'emailAttachmentsBtnIcon',
handler: function(){
alert('handler');
debugger;
//me.getComponent('attachmentsPanel').add(Ext.create('Jacada.system.ui.email.Attachment', {attachmentName: 'avb'}));
},
scope: this,
tooltip: 'application.javascript.attachments.tooltip'
}])

}
}
}]



Thanks
Dekel

Gary Schlosberg
1 Apr 2014, 3:44 PM
I don't think this is going to work that way, as you are mixing two form widgets together. Seems like it would be more feasible to add an upload button nearby and have it load the content into the editor.

ilfirovych
2 Apr 2014, 10:57 AM
Here is the sample code, where I add similar form panels to two difference toolbars: HtmlEditor and Form Panel.
First one does not open file dialog and seconds one does. Note, that click on a button in HtmlEditor works, but no file dialog is opened.
What is the difference between these two toolbars?



Ext.onReady(function () {


Ext.create('Ext.container.Viewport', {


items: [{
xtype: 'form',
id: 'testFormPanel',
items: [{


xtype: 'htmleditor',
itemId: 'messageEditor',
flex: 1,
name: 'HtmlBody',
readOnly: false,
enableLinks: false,
enableSourceEdit: false,
listeners: {
render: function (_this, eOpts) {
_this.getToolbar().add([{
xtype: 'form',
items: {
id: 'attachFileBtn',
itemId: 'attachFileBtn',
xtype: 'filefield',
name: 'file',
hideLabel: true,
buttonOnly: true,
buttonText: 'file',
listeners: {
change: function (fb, value) {
Ext.Msg.show({
msg: 'value=' + value,
buttons: Ext.Msg.OK
});
}
}
}
}]);
}
}
}],
bbar: [{
text: 'bbb'
}],
listeners: {
render: function (this_, eOpts) {
this_.getDockedItems('toolbar[dock="bottom"]')[0].add({
xtype: 'form',
items: {
xtype: 'filefield',
name: 'file1',
hideLabel: true,
buttonOnly: true,
buttonText: 'file1',
listeners: {
change: function (fb, value) {
Ext.Msg.show({
msg: 'value=' + value,
buttons: Ext.Msg.OK
});
}
}
}
});
}
}
}]
});


var atBtn = Ext.get('attachFileBtn-button');
if (atBtn) {
atBtn.on('click', function () {
Ext.Msg.show({
msg: 'attachFileBtn-button clicked'
});
});
} else {
Ext.Msg.show({
msg: 'atBtn=null'
});
}


});


Thanks,
Misha