Revision history [back]

click to hide/show revision 1
initial version

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

cor3000 gravatar image cor3000

ZK Team

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>

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:

image description

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More