zk keikai-how to add custom button/label to formulabar?

answered 2020-12-11 14:46:28 +0800

cor3000
6280 ● 2 ● 7

updated 2020-12-11 14:48:09 +0800

Here an example adding 2 custom buttons to the formulabar ... not styled yet, just he buttons and event firing

<zk>
    <script><![CDATA[
    zk.afterLoad('zss', function() {
        var xFormulabarCenterCave = {};
        zk.override(zss.FormulabarCenterCave.prototype, xFormulabarCenterCave, {
            $init : function(wgt) {
                xFormulabarCenterCave.$init.apply(this, arguments);
                this.appendChild(this.customMoney = new zss.FormulabarButton({
                        iconSclass: 'z-icon-money',
                        label: 'Money',
                        listeners: {onClick: this.handleMoneyClicked.bind(this)}}));
                this.appendChild(this.customDate = new zss.FormulabarButton({
                        iconSclass: 'z-icon-calendar',
                        label: 'Date',
                        listeners: {onClick: this.handleDateClicked.bind(this)}}));
            },
            handleDateClicked: function(event) {
                this._wgt.fire('onFormulabarDateClicked', null, {toServer:true});
            },
            handleMoneyClicked: function(event) {
                this._wgt.fire('onFormulabarMoneyClicked', null, {toServer:true});
            },
            redraw: function (out) {
                var uid = this.uuid,
                    zcls = this.getZclass(),
                    html = '<div id="' + uid + '">';
                html += (this.editor.redrawHTML_() +
                        '<div id="' + uid + '-expandbtn" class="' + zcls + '-colbtn">' +
                        this.expandBtn.redrawHTML_() +
                        this.customMoney.redrawHTML_() +
                        this.customDate.redrawHTML_() +
                        '</div></div>');
                out.push(html);
            },
        });//zk.override
    });//zk.afterLoad
    ]]></script>
    <spreadsheet showToolbar="true" showFormulabar="true" height="100%"
                 onFormulabarDateClicked="Clients.log(event.getName())"
                 onFormulabarMoneyClicked="Clients.log(event.getName())"
    />
</zk>

result: