Extjs使用Kindeditor编辑套打样式

先来贴一下图：
点击打印按钮出现下图:
业务流程为:
1.定义要显示套打设置的窗口；
2.为其添加需要实现的业务的组件以及函数(例如：A.套打设置显示，B,打印内容，C.打印功能，D.保存模板)；
3.点击打印按钮后，获取相应需要打印的数据(JSON格式)；
4.查看是否有自定义模板，有则添加自定义模板,无则使用缺省；
5.定义需要打印的HTML内容；
6.将HTML添加至Kindeditor的HTML中；
代码如下:
窗口打印功能:
mySelfPrinter(htmleditor_window.down('#kindEditorLabel').kindEditor.html());
function mySelfPrinter(content){
try{
//mleditor_window.down('#kindEditorLabel').kindEditor.html();
        var win = window.open();
        win.document.body.innerHTML = content;
        pagesetup_null();
        win.window.print();
        win.window.close();
        //pagesetup_default();
    }catch(e){}
}
保存模板功能:URL打开该窗口由后台传入前端的，也可以自己定义,获取Kindeditor中的所有的html内容传回后台进行保存
   {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    border: false,
                    hidden: true,
                    items: [
                        '->',
                        {
                            text: '保存模板',
                            itemId: 'saveBotId',
                            handler: function () {
                                var contractId = this.up('window').contractId;
                                var saveUrl = this.up('window').saveUrl;
                                var printTemplate = this.up('window').down('#kindEditorLabel').kindEditor.html();
                                Ext.Ajax.request({
                                    url: saveUrl,
                                    method: 'post',
                                    params: {
                                        id: contractId,
                                        printTemplate: printTemplate
                                    },
                                    success: function (response) {
                                        var text = Ext.decode(response.responseText);
                                        if (text.success) {
                                            Ext.example.msg('提示', text.msg);
                                        } else {
                                            Ext.Msg.alert('提示', text.msg);
                                        }
                                    },
                                    failure: function (response) {
                                        var text = Ext.decode(response.responseText);
                                        Ext.Msg.alert('提示', text.msg);
                                    }
                                });
                            }
                        },
                        '->'
                    ]
                }
显示：
 {
                    xtype: 'panel',
                    width: 800,
                    border: false,
                    baseCls: 'my-panel-no-border',
                    items: {
                        xtype: 'label',
                        width: 800,
                        height: 650,
                        itemId: 'kindEditorLabel',
                        kindEditor: '',
                        html: '<form><textarea name="printContentEditor" style="width:800px;height:650px;visibility:hidden;"></textarea></form>'
                    }
            }
点击打印，进入后太获取打印数据以及打印模板,显示套打窗口
 Ext.Ajax.request({
        url: 'saleContractforPrint',
        params: {
            id: id
        },
        method: 'post',
        scope: this,
        timeout: 15000,
        success: function (response) {
            var text = Ext.decode(response.responseText);
            if (!text.success) {
                Ext.Msg.alert('提示', text.msg);
                return;
            }
            var htmlWin = htmleditor_window;
            htmlWin.contractId = text.id;
            htmlWin.saveUrl = text.saveUrl;//保存模板的URL由此得来，也可以直接定义
            if(!showBtn){
            htmlWin.down('#saveBotId').hide();
            }else{
            htmlWin.down('#saveBotId').show();
            }
            if (public_salePermission.indexOf('saleContractUpd') == -1) {
                htmlWin.down('toolbar').setVisible(false);
            } else {
                htmlWin.down('toolbar').setVisible(true);
            }
            htmlWin.show();
            var editor = null;
            if (htmlWin.down('#kindEditorLabel').kindEditor == '') {
                editor = KindEditor.create('textarea[name="printContentEditor"]', {//定义套打设置
                    filterMode: true,
                    resizeType: 0,
                    items: [
                        'undo', 'redo', '|', 'preview', 'print', 'cut', 'copy', 'paste',
                        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 

'subscript',
                        'superscript', '/',
                        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',
                        'table', 'hr', 'pagebreak', 'quickformat', 'selectall', '|','source','image', 'flash', 

'fullscreen'
                    ]
                });
            } else {
                editor = htmlWin.down('#kindEditorLabel').kindEditor;
            }
            if (text.printTemplate != null && text.printTemplate != '') {//是否有保存模板，有则使用，没有则缺省
                if (editor != null) {
                    editor.html(text.printTemplate);
                    htmlWin.down('#kindEditorLabel').kindEditor = editor;
                }
                return;
            }
            var store = Ext.create('Ext.data.Store', {//
                fields: [
                    {name: 'id'},
                    {name: 'offerPrice'},
                    {name: 'quantity'},
                    {name: 'amount'},
                    {name: 'discount'},
                    {name: 'taxRate'},
                    {name: 'withTaxAmount'},
                    {name: 'offerDate'},
                    {name: 'remark'},
                    {name: 'goodsName'},
                    {name: 'model'},
                    {name: 'unit'},
                    {name: 'goodsCode'},
                    {name: 'stockQuantity'}
                ],
                data: []
            });
            store.loadData(text.array);
            var models = store.getRange();
            var totalAmount = calculateOrderAmountAll(store);
            var html = writeSaleContractHtml(text, models, totalAmount);//将数据写入HTML中
            if (editor != null) {
                editor.html(html);//将HTML放入Kindeditor
                htmlWin.down('#kindEditorLabel').kindEditor = editor;
            }
        }
    });
//html页面就省略啦！毕竟需求不同，实现也比较简单
function writeSaleContractHtml(val, models, totalAmount) {  ... }
整体来说还是很简单的，要说有疑问的话应该是不知道如何定义Kindeditor组件，以及Kindeditor中的一些功能组件；
不喜勿喷......