Получение содержимого редактора - Редактор html Ext-Js

Question

Я новичок в Ext-Js, и у меня есть редактор html с некоторыми плагинами из github, теперь у меня есть кнопка в редакторе, который должен появиться поле предупреждения с содержимым текстовой области.

Ext.onReady(function() { 
    Ext.tip.QuickTipManager.init(); 

    var top = Ext.create('Ext.form.Panel', { 
     frame:true, 
     title:   'HtmlEditor plugins', 
     bodyStyle:  'padding:5px 5px 0', 
     //width:   300, 
     fieldDefaults: { 
      labelAlign:  'top', 
      msgTarget:  'side' 
     }, 

     items: [{ 
      xtype:   'htmleditor', 
      fieldLabel:  'Text editor', 
      height:   300, 
      plugins: [ 
       Ext.create('Ext.ux.form.plugin.HtmlEditor',{ 
        enableAll: true 
        ,enableMultipleToolbars: true 
       }) 
      ], 
      anchor:   '100%' 
     }], 

     buttons: [{ 
      text: 'Save' 
     },{ 
      text: 'Cancel' 
     }] 
    }); 

    top.render(document.body); 

}); 

Я знаю, что я должен добавить

handler:function(){alert(someextjscodehere)} 

, но я понятия не имею, что функция возвращает его, и я не могу найти его на Google ...

Answer 1

Вы должны использовать getValue метод редактора для извлечения его содержимого.

handler - это вариант кнопки.

Вам понадобится ссылка на редактор в обработчике, чтобы получить его содержимое. Вы можете получить его из формы с помощью метода findField или с помощью component query.

Вот как обновить код, чтобы предупредить содержимое редактора при нажатии кнопки сохранения. Я добавил вторую кнопку сохранения, чтобы показать вам метод запросов компонентов. Я тестировал его в this fiddle.

Ext.onReady(function() { 
    Ext.tip.QuickTipManager.init(); 

    var top = Ext.create('Ext.form.Panel', { 
     frame:true, 
     title:   'HtmlEditor plugins', 
     bodyStyle:  'padding:5px 5px 0', 
     //width:   300, 
     fieldDefaults: { 
      labelAlign:  'top', 
      msgTarget:  'side' 
     }, 

     items: [{ 
      xtype:   'htmleditor', 
      name: 'htmlContent', // add a name to retrieve the field without ambiguity 
      fieldLabel:  'Text editor', 
      height:   300, 
      /*   plugins: [ 
        Ext.create('Ext.ux.form.plugin.HtmlEditor',{ 
         enableAll: true 
         ,enableMultipleToolbars: true 
        }) 
       ], 
    */   anchor:   '100%' 
     }], 

     buttons: [{ 
      text: 'Save' 
      ,handler: function() { 
       var editor = top.getForm().findField('htmlContent'); 
       alert(editor.getValue()); 
      } 
     },{ 
      text: 'Save 2' 
      ,handler: function() { 
       // You can grab the editor with a component query too 
       var editor = top.down('htmleditor'); 
       alert(editor.getValue()); 
      } 
     },{ 
      text: 'Cancel' 
     }] 
    }); 

    top.render(document.body); 

});