fineui-start/src/modules/header/header.js

!(function() {
    /**
     * 顶部组件,提供输入框添加todo项目
     * 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
     */
    var ToDoListHeader = BI.inherit(BI.Widget, {

        props: {
            //  指定组件的className
            baseCls: "my-todolist-header"
        },

        render: function() {
            var self = this, o = this.options;
            return {
                type: "bi.horizontal_auto",  // 水平居中布局
                items: [
                    {
                        el: {
                            type: "bi.left_right_vertical_adapt",  //  左右垂直居中布局
                            width: 600,
                            height: o.height,
                            items: {
                                left: [
                                    {
                                        el: {
                                            type: "bi.label",
                                            cls: "my-todolist-title",
                                            text: "FineUI ToDoList",
                                            height: o.height
                                        }
                                    }
                                ],
                                right: [
                                    {
                                        el: {
                                            type: "bi.editor",
                                            ref: function(_ref) {
                                                self.editor = _ref;
                                            },
                                            allowBlank: true,
                                            cls: "my-todolist-header-editor",
                                            watermark: "添加ToDo",
                                            width: 300,
                                            height: 24,
                                            listeners: [
                                                {  //  监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
                                                    eventName: "EVENT_ENTER",
                                                    action: function() {
                                                        //  注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
                                                        self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
                                                        self.editor.setValue("");
                                                    }
                                                }
                                            ]
                                        }
                                    }
                                ]
                            }
                        }
                    }
                ]
            };
        }
    });

    ToDoListHeader.EVENT_ADD = "EVENT_ADD";

    BI.shortcut("my.todolist.header", ToDoListHeader);
})();