masonry/src/item/masonry.block.js

!(function () {

    var Body = BI.inherit(BI.Widget, {

        props: {
            baseCls: "dec-frame-body"
        },

        _store: function () {
            return BI.Models.getModel("dec.model.masonry.block", this.options);
        },

        watch: {
            masonry_selectedEntry: function (id) {
                this.list.setValue(id);
            }
        },

        render: function () {
            var self = this, o = this.options;

            return {
                type: "bi.vertical",
                items: [
                    {
                        el: BI.extend({
                            type: "dec.common.img.icon_text_item",
                            height: 36,
                            logic: {
                                dynamic: true
                            },
                            text: o.text,
                            imgSrc: o.imgSrc,
                            iconCls: o.iconCls
                        })
                    }, {
                        el: {
                            type: "bi.button_group",
                            ref: function (_ref) {
                                self.list = _ref;
                            },
                            layouts: [
                                {
                                    type: "bi.vertical"
                                }
                            ],
                            items: BI.map(o.items, function (index, item) {
                                return BI.extend({
                                    type: "dec.common.img.icon_text_item",
                                    height: 30,
                                    cls: "dec-frame-platform-list-item-active dec-font-size-14"
                                }, item);
                            }),
                            listeners: [
                                {
                                    eventName: "EVENT_CHANGE",
                                    action: function (v) {
                                        self.store.handleItemSelect(v);
                                    }
                                }
                            ]
                        },
                        lgap: 15
                    }
                ]
            };
        },

        setValue: function (v) {
            this.list.setValue(v);
        }
    });

    BI.shortcut("dec.masonry.block", Body);
}());