快速搭建fineui开发环境。
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.

70 lines
3.2 KiB

5 years ago
!(function() {
/**
* 顶部组件,提供输入框添加todo项目
* 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
*/
6 years ago
var ToDoListHeader = BI.inherit(BI.Widget, {
props: {
5 years ago
// 指定组件的className
6 years ago
baseCls: "my-todolist-header"
},
5 years ago
render: function() {
6 years ago
var self = this, o = this.options;
return {
5 years ago
type: "bi.horizontal_auto", // 水平居中布局
6 years ago
items: [
{
el: {
5 years ago
type: "bi.left_right_vertical_adapt", // 左右垂直居中布局
6 years ago
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",
5 years ago
ref: function(_ref) {
self.editor = _ref;
},
6 years ago
allowBlank: true,
cls: "my-todolist-header-editor",
watermark: "添加ToDo",
width: 300,
height: 24,
listeners: [
5 years ago
{ // 监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
6 years ago
eventName: "EVENT_ENTER",
5 years ago
action: function() {
// 注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
6 years ago
self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
5 years ago
self.editor.setValue("");
6 years ago
}
}
]
}
}
]
}
}
}
]
};
}
});
ToDoListHeader.EVENT_ADD = "EVENT_ADD";
BI.shortcut("my.todolist.header", ToDoListHeader);
})();