0

我是 Ext-Js 的新手，我从 github 获得了一个带有一些插件的 html 编辑器，现在我在编辑器上有一个按钮，它应该会弹出一个带有文本区域内容的警告框。

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)}

但我不知道是什么函数返回它，我也无法在谷歌上找到它......

4

1 回答 1

1

您需要使用getValue编辑器的方法来检索其内容。

handler是按钮的一个选项。

您需要在处理程序中引用编辑器，以获取其内容。findField您可以使用方法或组件查询从表单中获取它。

以下是如何更新代码以在单击保存按钮时提醒编辑器的内容。我添加了第二个保存按钮来向您展示组件查询方法。我已经在这个 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);

});
于 2013-07-29T13:01:08.450 回答