You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
!(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);
|
|
|
|
})();
|