Extjs使用Kindeditor编辑套打样式

待我称王封你为后i 2022-09-23 12:58 173阅读 0赞

先来贴一下图：
    点击打印按钮出现下图:
    业务流程为:
    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中的一些功能组件；
    不喜勿喷......