Browse Source
Merge in VISUAL/fineui from ~VIVY.PAN/fineui:es6 to es6 * commit 'c8f1c832c7c8967bcdf71e7a747597588569559b': KERNEL-14241 refactor:demo的es6化es6
Vivy.Pan-潘柯芋
1 year ago
145 changed files with 8938 additions and 7638 deletions
@ -1,24 +1,28 @@ |
|||||||
Demo.Button = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-button" |
@shortcut() |
||||||
}, |
export class Button extends Widget { |
||||||
render: function () { |
static xtype = "demo.icon_button"; |
||||||
var items = [ |
|
||||||
|
props = { baseCls: "demo-button" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const items = [ |
||||||
{ |
{ |
||||||
el: { |
el: { |
||||||
type: "bi.icon_button", |
type: "bi.icon_button", |
||||||
cls: "close-ha-font", |
cls: "close-ha-font", |
||||||
width: 25, |
width: 25, |
||||||
height: 25 |
height: 25, |
||||||
} |
}, |
||||||
} |
} |
||||||
]; |
]; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
vgap: 200, |
vgap: 200, |
||||||
hgap: 20, |
hgap: 20, |
||||||
items: items |
items, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.icon_button", Demo.Button); |
|
||||||
|
|||||||
@ -1,24 +1,28 @@ |
|||||||
Demo.Button = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-button" |
@shortcut() |
||||||
}, |
export class Button extends Widget { |
||||||
render: function () { |
static xtype = "demo.image_button"; |
||||||
var items = [ |
|
||||||
|
props = { baseCls: "demo-button" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const items = [ |
||||||
{ |
{ |
||||||
el: { |
el: { |
||||||
type: "bi.image_button", |
type: "bi.image_button", |
||||||
src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128", |
src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128", |
||||||
width: 100, |
width: 100, |
||||||
height: 100 |
height: 100, |
||||||
} |
}, |
||||||
} |
} |
||||||
]; |
]; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
vgap: 200, |
vgap: 200, |
||||||
hgap: 20, |
hgap: 20, |
||||||
items: items |
items, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.image_button", Demo.Button); |
|
||||||
|
|||||||
@ -0,0 +1,26 @@ |
|||||||
|
import { shortcut, Widget } from "@/core"; |
||||||
|
|
||||||
|
@shortcut() |
||||||
|
export class JokerIcon extends Widget { |
||||||
|
static xtype = "demo.joker.icon"; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.label", |
||||||
|
cls: "anim-rotate", |
||||||
|
ref (ref) { |
||||||
|
self.text = ref; |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
loading() { |
||||||
|
this.text.setText("🤡"); |
||||||
|
} |
||||||
|
|
||||||
|
loaded() { |
||||||
|
this.text.setText(""); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,24 +1,28 @@ |
|||||||
Demo.Button = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-button" |
@shortcut() |
||||||
}, |
export class Button extends Widget { |
||||||
render: function () { |
static xtype = "demo.text_button"; |
||||||
var items = [ |
|
||||||
|
props = { baseCls: "demo-button" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const items = [ |
||||||
{ |
{ |
||||||
el: { |
el: { |
||||||
type: "bi.text_button", |
type: "bi.text_button", |
||||||
text: "文字按钮", |
text: "文字按钮", |
||||||
height: 30, |
height: 30, |
||||||
keyword: "w" |
keyword: "w", |
||||||
} |
}, |
||||||
} |
} |
||||||
]; |
]; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
vgap: 200, |
vgap: 200, |
||||||
hgap: 20, |
hgap: 20, |
||||||
items: items |
items, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.text_button", Demo.Button); |
|
||||||
|
|||||||
@ -1,20 +1,26 @@ |
|||||||
Demo.Html = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-html" |
@shortcut() |
||||||
}, |
export class Html extends Widget { |
||||||
render: function () { |
static xtype = "demo.html"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-html" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.html", |
type: "bi.html", |
||||||
text: "<h1>在bi.html标签中使用html原生标签</h1>" |
text: "<h1>在bi.html标签中使用html原生标签</h1>", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.html", |
type: "bi.html", |
||||||
text: "<ul>ul列表<li>list item1</li><li>list item2</li></ul>" |
text: "<ul>ul列表<li>list item1</li><li>list item2</li></ul>", |
||||||
}], |
} |
||||||
|
], |
||||||
hgap: 300, |
hgap: 300, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.html", Demo.Html); |
|
||||||
|
|||||||
@ -1,20 +1,26 @@ |
|||||||
Demo.IconLabel = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-bubble" |
@shortcut() |
||||||
}, |
export class IconLabel extends Widget { |
||||||
render: function () { |
static xtype = "demo.icon_label"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-bubble" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.default", |
type: "bi.default", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "这是一个icon标签,在加了border之后仍然是居中显示的" |
text: "这是一个icon标签,在加了border之后仍然是居中显示的", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.icon_label", |
type: "bi.icon_label", |
||||||
cls: "date-font bi-border", |
cls: "date-font bi-border", |
||||||
height: 40, |
height: 40, |
||||||
width: 40 |
width: 40, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.icon_label", Demo.IconLabel); |
|
||||||
|
|||||||
@ -1,26 +1,33 @@ |
|||||||
Demo.CodeEditor = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-editor" |
@shortcut() |
||||||
}, |
export class CodeEditor extends Widget { |
||||||
render: function () { |
static xtype = "demo.multifile_editor"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-editor" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.adaptive", |
type: "bi.adaptive", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.multifile_editor", |
type: "bi.multifile_editor", |
||||||
width: 400, |
width: 400, |
||||||
height: 300 |
height: 300, |
||||||
}], |
} |
||||||
|
], |
||||||
width: 400, |
width: 400, |
||||||
height: 300 |
height: 300, |
||||||
}, |
}, |
||||||
top: 50, |
top: 50, |
||||||
left: 50 |
left: 50, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.multifile_editor", Demo.CodeEditor); |
|
||||||
|
|||||||
@ -1,44 +1,52 @@ |
|||||||
Demo.CodeEditor = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, isNotEmptyString } from "@/core"; |
||||||
props: { |
import { TextAreaEditor, Msg } from "@/base"; |
||||||
baseCls: "demo-editor" |
|
||||||
}, |
@shortcut() |
||||||
render: function () { |
export class CodeEditor extends Widget { |
||||||
var editor = BI.createWidget({ |
static xtype = "demo.textarea_editor"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-editor" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const editor = createWidget({ |
||||||
type: "bi.textarea_editor", |
type: "bi.textarea_editor", |
||||||
cls: "bi-border", |
cls: "bi-border", |
||||||
width: 600, |
width: 600, |
||||||
height: 400, |
height: 400, |
||||||
watermark: "请输入内容", |
watermark: "请输入内容", |
||||||
errorText: "检测内容有误", |
errorText: "检测内容有误", |
||||||
validationChecker: function (v) { |
validationChecker(v) { |
||||||
return BI.isNotEmptyString(v); |
return isNotEmptyString(v); |
||||||
}, |
}, |
||||||
}); |
}); |
||||||
editor.on(BI.TextAreaEditor.EVENT_FOCUS, function () { |
editor.on(TextAreaEditor.EVENT_FOCUS, () => { |
||||||
BI.Msg.toast("Focus"); |
Msg.toast("Focus"); |
||||||
}); |
}); |
||||||
editor.on(BI.TextAreaEditor.EVENT_BLUR, function () { |
editor.on(TextAreaEditor.EVENT_BLUR, () => { |
||||||
BI.Msg.toast("Blur"); |
Msg.toast("Blur"); |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
hgap: 30, |
hgap: 30, |
||||||
vgap: 20, |
vgap: 20, |
||||||
items: [editor, { |
items: [ |
||||||
|
editor, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "getValue", |
text: "getValue", |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.toast(JSON.stringify(editor.getValue())); |
Msg.toast(JSON.stringify(editor.getValue())); |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "setValue", |
text: "setValue", |
||||||
handler: function () { |
handler() { |
||||||
editor.setValue("测试数据"); |
editor.setValue("测试数据"); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.textarea_editor", Demo.CodeEditor); |
|
||||||
|
|||||||
@ -1,77 +1,84 @@ |
|||||||
Demo.Bubble = BI.inherit(BI.Widget, { |
import { shortcut, Widget, Bubbles } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-bubble" |
@shortcut() |
||||||
}, |
export class Bubble extends Widget { |
||||||
render: function () { |
static xtype = "demo.bubble"; |
||||||
var btns = []; |
|
||||||
var items = [ |
props = { baseCls: "demo-bubble" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const btns = []; |
||||||
|
const items = [ |
||||||
{ |
{ |
||||||
el: { |
el: { |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
btns.push(_ref); |
btns.push(_ref); |
||||||
}, |
}, |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "bubble测试(消息)", |
text: "bubble测试(消息)", |
||||||
title: "123", |
title: "123", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Bubbles.show("singleBubble1", "bubble测试", this, { |
Bubbles.show("singleBubble1", "bubble测试", this, { |
||||||
level: "common" |
level: "common", |
||||||
}); |
}); |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
btns.push(_ref); |
btns.push(_ref); |
||||||
}, |
}, |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "bubble测试(成功)", |
text: "bubble测试(成功)", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Bubbles.show("singleBubble2", "bubble测试", this, { |
Bubbles.show("singleBubble2", "bubble测试", this, { |
||||||
offsetStyle: "center", |
offsetStyle: "center", |
||||||
level: "success" |
level: "success", |
||||||
}); |
}); |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
btns.push(_ref); |
btns.push(_ref); |
||||||
}, |
}, |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "bubble测试(错误)", |
text: "bubble测试(错误)", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Bubbles.show("singleBubble3", "bubble测试", this, { |
Bubbles.show("singleBubble3", "bubble测试", this, { |
||||||
offsetStyle: "right", |
offsetStyle: "right", |
||||||
level: "error" |
level: "error", |
||||||
}); |
}); |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
btns.push(_ref); |
btns.push(_ref); |
||||||
}, |
}, |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "bubble测试(警告)", |
text: "bubble测试(警告)", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Bubbles.show("singleBubble4", "bubble测试", this, { |
Bubbles.show("singleBubble4", "bubble测试", this, { |
||||||
level: "warning" |
level: "warning", |
||||||
}); |
}); |
||||||
} |
}, |
||||||
} |
}, |
||||||
} |
} |
||||||
]; |
]; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
vgap: 200, |
vgap: 200, |
||||||
hgap: 20, |
hgap: 20, |
||||||
items: items |
items, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.bubble", Demo.Bubble); |
|
||||||
|
|||||||
@ -1,74 +1,86 @@ |
|||||||
Demo.Toast = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
import { Msg } from "@/base"; |
||||||
baseCls: "demo-toast" |
|
||||||
}, |
@shortcut() |
||||||
render: function () { |
export class Toast extends Widget { |
||||||
var items = [ |
static xtype = "demo.toast"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-toast" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const items = [ |
||||||
{ |
{ |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "简单Toast测试(success)", |
text: "简单Toast测试(success)", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.toast("这是一条简单的数据", { |
Msg.toast("这是一条简单的数据", { |
||||||
level: "success" |
level: "success", |
||||||
}); |
}); |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "很长的Toast测试(normal)", |
text: "很长的Toast测试(normal)", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", { |
Msg.toast( |
||||||
|
"这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", |
||||||
}); |
{} |
||||||
} |
); |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "非常长的Toast测试(warning)", |
text: "非常长的Toast测试(warning)", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", { |
Msg.toast( |
||||||
|
"这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", |
||||||
|
{ |
||||||
level: "warning", |
level: "warning", |
||||||
autoClose: false |
autoClose: false, |
||||||
}); |
|
||||||
} |
|
||||||
} |
} |
||||||
}, { |
); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "错误提示Toast测试(error)", |
text: "错误提示Toast测试(error)", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.toast("错误提示Toast测试", { |
Msg.toast("错误提示Toast测试", { |
||||||
level: "error" |
level: "error", |
||||||
}); |
}); |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "错误提示Toast测试(error), 此toast不会自动消失", |
text: "错误提示Toast测试(error), 此toast不会自动消失", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.toast("错误提示Toast测试", { |
Msg.toast("错误提示Toast测试", { |
||||||
autoClose: false |
autoClose: false, |
||||||
}); |
}); |
||||||
} |
}, |
||||||
} |
}, |
||||||
} |
} |
||||||
]; |
]; |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
element: this, |
element: this, |
||||||
vgap: 200, |
vgap: 200, |
||||||
hgap: 20, |
hgap: 20, |
||||||
items: items |
items, |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.toast", Demo.Toast); |
|
||||||
|
|||||||
@ -1,81 +1,97 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, TreeView, isNull } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.part_tree"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
this.partTree.stroke({ |
this.partTree.stroke({ |
||||||
keyword: "1" |
keyword: "1", |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
return { |
return { |
||||||
type: "bi.vtape", |
type: "bi.vtape", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 50, |
height: 50, |
||||||
text: "先初始化一份数据，然后再异步获取数据的树" |
text: "先初始化一份数据，然后再异步获取数据的树", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.part_tree", |
type: "bi.part_tree", |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
self.partTree = _ref; |
self.partTree = _ref; |
||||||
}, |
}, |
||||||
paras: { |
paras: { |
||||||
selectedValues: {"1": {}, "2": {"1": {}}} |
selectedValues: { 1: {}, 2: { 1: {} } }, |
||||||
}, |
}, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
if (op.type === BI.TreeView.REQ_TYPE_INIT_DATA) { |
if (op.type === TreeView.REQ_TYPE_INIT_DATA) { |
||||||
callback({ |
callback({ |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
id: "1", |
id: "1", |
||||||
text: 1, |
text: 1, |
||||||
isParent: true, |
isParent: true, |
||||||
open: true |
open: true, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: "11", |
id: "11", |
||||||
pId: "1", |
pId: "1", |
||||||
text: 11, |
text: 11, |
||||||
isParent: true, |
isParent: true, |
||||||
open: true |
open: true, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: "111", |
id: "111", |
||||||
pId: "11", |
pId: "11", |
||||||
text: 111, |
text: 111, |
||||||
isParent: true |
isParent: true, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: "2", |
id: "2", |
||||||
text: 2 |
text: 2, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: "3", |
id: "3", |
||||||
text: 3 |
text: 3, |
||||||
}], |
} |
||||||
hasNext: BI.isNull(op.id) |
], |
||||||
|
hasNext: isNull(op.id), |
||||||
}); |
}); |
||||||
|
|
||||||
return; |
return; |
||||||
} |
} |
||||||
callback({ |
callback({ |
||||||
items: [{ |
items: [ |
||||||
id: (op.id || "") + "1", |
{ |
||||||
|
id: `${op.id || ""}1`, |
||||||
pId: op.id, |
pId: op.id, |
||||||
text: 1, |
text: 1, |
||||||
isParent: true |
isParent: true, |
||||||
}, { |
}, |
||||||
id: (op.id || "") + "2", |
{ |
||||||
|
id: `${op.id || ""}2`, |
||||||
pId: op.id, |
pId: op.id, |
||||||
text: 2 |
text: 2, |
||||||
}, { |
}, |
||||||
id: (op.id || "") + "3", |
{ |
||||||
|
id: `${op.id || ""}3`, |
||||||
pId: op.id, |
pId: op.id, |
||||||
text: 3 |
text: 3, |
||||||
}], |
} |
||||||
hasNext: BI.isNull(op.id) |
], |
||||||
|
hasNext: isNull(op.id), |
||||||
}); |
}); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
|
|
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.part_tree", Demo.Func); |
|
||||||
|
|||||||
@ -1,121 +1,150 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, makeArray } from "@/core"; |
||||||
props: { |
import { BubbleCombo } from "@/case/combo/bubblecombo/combo.bubble"; |
||||||
baseCls: "demo-func" |
|
||||||
}, |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.bubble_combo"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var self = this, count = 1; |
let self = this, |
||||||
var combo1 = BI.createWidget({ |
count = 1; |
||||||
|
const combo1 = createWidget({ |
||||||
type: "bi.bubble_combo", |
type: "bi.bubble_combo", |
||||||
trigger: "click,hover", |
trigger: "click,hover", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "测试", |
text: "测试", |
||||||
height: 24 |
height: 24, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
el: { |
el: { |
||||||
type: "bi.button_group", |
type: "bi.button_group", |
||||||
items: BI.makeArray(100, { |
items: makeArray(100, { |
||||||
type: "bi.text_item", |
type: "bi.text_item", |
||||||
height: 24, |
height: 24, |
||||||
text: "item" |
text: "item", |
||||||
}), |
}), |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
}, |
|
||||||
maxHeight: 200 |
|
||||||
} |
} |
||||||
|
], |
||||||
|
}, |
||||||
|
maxHeight: 200, |
||||||
|
}, |
||||||
}); |
}); |
||||||
var combo2 = BI.createWidget({ |
const combo2 = createWidget({ |
||||||
type: "bi.bubble_combo", |
type: "bi.bubble_combo", |
||||||
direction: "right", |
direction: "right", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "测试", |
text: "测试", |
||||||
height: 24 |
height: 24, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
type: "bi.text_bubble_bar_popup_view", |
type: "bi.text_bubble_bar_popup_view", |
||||||
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", |
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", |
||||||
ref: function () { |
ref() { |
||||||
self.popup = this; |
self.popup = this; |
||||||
} |
|
||||||
}, |
}, |
||||||
listeners: [{ |
}, |
||||||
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
listeners: [ |
||||||
action: function () { |
{ |
||||||
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); |
eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
||||||
|
action() { |
||||||
|
self.popup.populate( |
||||||
|
count++ % 2 === 1 |
||||||
|
? "我的文字变少了" |
||||||
|
: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字" |
||||||
|
); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
|
|
||||||
var combo3 = BI.createWidget({ |
const combo3 = createWidget({ |
||||||
type: "bi.bubble_combo", |
type: "bi.bubble_combo", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "测试", |
text: "测试", |
||||||
height: 25 |
height: 25, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
type: "bi.text_bubble_bar_popup_view", |
type: "bi.text_bubble_bar_popup_view", |
||||||
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", |
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", |
||||||
ref: function () { |
ref() { |
||||||
self.popup = this; |
self.popup = this; |
||||||
} |
|
||||||
}, |
}, |
||||||
listeners: [{ |
}, |
||||||
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
listeners: [ |
||||||
action: function () { |
{ |
||||||
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); |
eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
||||||
|
action() { |
||||||
|
self.popup.populate( |
||||||
|
count++ % 2 === 1 |
||||||
|
? "我的文字变少了" |
||||||
|
: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字" |
||||||
|
); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
|
|
||||||
var combo4 = BI.createWidget({ |
const combo4 = createWidget({ |
||||||
type: "bi.bubble_combo", |
type: "bi.bubble_combo", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "测试", |
text: "测试", |
||||||
height: 25 |
height: 25, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
type: "bi.text_bubble_bar_popup_view", |
type: "bi.text_bubble_bar_popup_view", |
||||||
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", |
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", |
||||||
ref: function () { |
ref() { |
||||||
self.popup = this; |
self.popup = this; |
||||||
} |
|
||||||
}, |
}, |
||||||
listeners: [{ |
}, |
||||||
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
listeners: [ |
||||||
action: function () { |
{ |
||||||
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); |
eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
||||||
|
action() { |
||||||
|
self.popup.populate( |
||||||
|
count++ % 2 === 1 |
||||||
|
? "我的文字变少了" |
||||||
|
: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字" |
||||||
|
); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: combo1, |
el: combo1, |
||||||
left: 150, |
left: 150, |
||||||
top: 10 |
top: 10, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: combo2, |
el: combo2, |
||||||
left: 10, |
left: 10, |
||||||
bottom: 200 |
bottom: 200, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: combo3, |
el: combo3, |
||||||
right: 10, |
right: 10, |
||||||
bottom: 10 |
bottom: 10, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: combo4, |
el: combo4, |
||||||
right: 10, |
right: 10, |
||||||
top: 10 |
top: 10, |
||||||
}] |
|
||||||
}); |
|
||||||
} |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.shortcut("demo.bubble_combo", Demo.Func); |
} |
||||||
|
} |
||||||
|
|||||||
@ -1,45 +1,52 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/11. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.TextValueCombo = BI.inherit(BI.Widget, { |
export class TextValueCombo extends Widget { |
||||||
props: { |
static xtype = "demo.editor_icon_check_combo"; |
||||||
baseCls: "" |
|
||||||
}, |
props = { baseCls: "" }; |
||||||
render: function () { |
|
||||||
var self = this; |
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.editor_icon_check_combo", |
type: "bi.editor_icon_check_combo", |
||||||
ref: function () { |
ref() { |
||||||
self.combo = this; |
self.combo = this; |
||||||
}, |
}, |
||||||
watermark: "默认值", |
watermark: "默认值", |
||||||
width: 200, |
width: 200, |
||||||
height: 24, |
height: 24, |
||||||
value: 2, |
value: 2, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
// text: "MVC-1",
|
// text: "MVC-1",
|
||||||
value: "1" |
value: "1", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
// text: "MVC-2",
|
// text: "MVC-2",
|
||||||
value: "2" |
value: "2", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
// text: "MVC-3",
|
// text: "MVC-3",
|
||||||
value: "3" |
value: "3", |
||||||
}] |
} |
||||||
}, { |
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
width: 90, |
width: 90, |
||||||
height: 25, |
height: 25, |
||||||
text: "setValue为空", |
text: "setValue为空", |
||||||
handler: function () { |
handler() { |
||||||
self.combo.setValue() |
self.combo.setValue(); |
||||||
|
}, |
||||||
} |
} |
||||||
}], |
], |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.editor_icon_check_combo", Demo.TextValueCombo); |
|
||||||
|
|||||||
@ -1,39 +1,41 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/12. |
|
||||||
*/ |
|
||||||
Demo.IconCombo = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class IconCombo extends Widget { |
||||||
|
static xtype = "demo.icon_combo"; |
||||||
|
|
||||||
var self = this; |
props = { baseCls: "" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.icon_combo", |
type: "bi.icon_combo", |
||||||
container: "body", |
container: "body", |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
self.refs = _ref; |
self.refs = _ref; |
||||||
}, |
}, |
||||||
value: "第二项", |
value: "第二项", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
value: "第一项", |
value: "第一项", |
||||||
iconCls: "close-font" |
iconCls: "close-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
value: "第二项", |
value: "第二项", |
||||||
iconCls: "search-font" |
iconCls: "search-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
value: "第三项", |
value: "第三项", |
||||||
iconCls: "copy-font" |
iconCls: "copy-font", |
||||||
}] |
} |
||||||
}], |
], |
||||||
vgap: 20 |
} |
||||||
|
], |
||||||
|
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.icon_combo", Demo.IconCombo); |
|
||||||
|
|||||||
@ -1,36 +1,40 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Windy on 2017/12/13. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.IconTextValueCombo = BI.inherit(BI.Widget, { |
export class IconTextValueCombo extends Widget { |
||||||
props: { |
static xtype = "demo.icon_text_value_combo"; |
||||||
baseCls: "" |
|
||||||
}, |
props = { baseCls: "" }; |
||||||
render: function () { |
|
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.icon_text_value_combo", |
type: "bi.icon_text_value_combo", |
||||||
text: "默认值", |
text: "默认值", |
||||||
// defaultIconCls: "next-page-h-font",
|
// defaultIconCls: "next-page-h-font",
|
||||||
width: 300, |
width: 300, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
text: "MVC-1", |
text: "MVC-1", |
||||||
iconCls: "close-font", |
iconCls: "close-font", |
||||||
value: 1 |
value: 1, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "MVC-2", |
text: "MVC-2", |
||||||
iconCls: "date-font", |
iconCls: "date-font", |
||||||
value: 2 |
value: 2, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "MVC-3", |
text: "MVC-3", |
||||||
iconCls: "search-close-h-font", |
iconCls: "search-close-h-font", |
||||||
value: 3 |
value: 3, |
||||||
}] |
} |
||||||
}], |
], |
||||||
vgap: 20 |
} |
||||||
|
], |
||||||
|
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.icon_text_value_combo", Demo.IconTextValueCombo); |
|
||||||
|
|||||||
@ -1,102 +1,122 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Windy on 2018/2/4. |
import { Msg } from "@/base"; |
||||||
*/ |
import { AllValueMultiTextValueCombo } from "@/component"; |
||||||
Demo.SearchTextValueCombo = BI.inherit(BI.Widget, { |
|
||||||
props: { |
@shortcut() |
||||||
baseCls: "" |
export class SearchTextValueCombo extends Widget { |
||||||
}, |
static xtype = "demo.search_text_value_combo"; |
||||||
render: function () { |
|
||||||
var combo, searchCombo; |
props = { baseCls: "" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
let combo, searchCombo; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.search_text_value_combo", |
type: "bi.search_text_value_combo", |
||||||
ref: function () { |
ref() { |
||||||
combo = this; |
combo = this; |
||||||
}, |
}, |
||||||
warningTitle: "111", |
warningTitle: "111", |
||||||
text: "默认值", |
text: "默认值", |
||||||
value: 14, |
value: 14, |
||||||
width: 300, |
width: 300, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
text: "ABC-1", |
text: "ABC-1", |
||||||
iconCls: "date-font", |
iconCls: "date-font", |
||||||
value: 1 |
value: 1, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "BCD-2", |
text: "BCD-2", |
||||||
iconCls: "search-font", |
iconCls: "search-font", |
||||||
value: 2 |
value: 2, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "CDE-3", |
text: "CDE-3", |
||||||
iconCls: "pull-right-font", |
iconCls: "pull-right-font", |
||||||
value: 3 |
value: 3, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "DEF-3", |
text: "DEF-3", |
||||||
iconCls: "pull-right-font", |
iconCls: "pull-right-font", |
||||||
value: 4 |
value: 4, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "FEG-3", |
text: "FEG-3", |
||||||
iconCls: "pull-right-font", |
iconCls: "pull-right-font", |
||||||
value: 5 |
value: 5, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "FGH-3", |
text: "FGH-3", |
||||||
iconCls: "pull-right-font", |
iconCls: "pull-right-font", |
||||||
value: 6 |
value: 6, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "GHI-3", |
text: "GHI-3", |
||||||
iconCls: "pull-right-font", |
iconCls: "pull-right-font", |
||||||
value: 7 |
value: 7, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "HIJ-3", |
text: "HIJ-3", |
||||||
iconCls: "pull-right-font", |
iconCls: "pull-right-font", |
||||||
value: 8 |
value: 8, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "IJK-3", |
text: "IJK-3", |
||||||
iconCls: "pull-right-font", |
iconCls: "pull-right-font", |
||||||
value: 9 |
value: 9, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "JKL-3", |
text: "JKL-3", |
||||||
iconCls: "pull-right-font", |
iconCls: "pull-right-font", |
||||||
value: 10 |
value: 10, |
||||||
}] |
} |
||||||
}, { |
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.all_value_multi_text_value_combo", |
type: "bi.all_value_multi_text_value_combo", |
||||||
items: Demo.CONSTANTS.ITEMS, |
items: Demo.CONSTANTS.ITEMS, |
||||||
text: "提示文本", |
text: "提示文本", |
||||||
width: 200, |
width: 200, |
||||||
value: { |
value: { |
||||||
type: 1, |
type: 1, |
||||||
value: ["1", "2", "柳州市城贸金属材料有限责任公司", "3"] |
value: ["1", "2", "柳州市城贸金属材料有限责任公司", "3"], |
||||||
}, |
}, |
||||||
ref: function () { |
ref() { |
||||||
searchCombo = this; |
searchCombo = this; |
||||||
}, |
}, |
||||||
listeners: [{ |
listeners: [ |
||||||
eventName: "BI.AllValueMultiTextValueCombo.EVENT_CONFIRM", |
{ |
||||||
action: function () { |
eventName: AllValueMultiTextValueCombo.EVENT_CONFIRM, |
||||||
|
action() { |
||||||
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "setValue(3)", |
text: "setValue(3)", |
||||||
width: 90, |
width: 90, |
||||||
height: 25, |
height: 25, |
||||||
handler: function () { |
handler() { |
||||||
combo.setValue(11); |
combo.setValue(11); |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "getValue()", |
text: "getValue()", |
||||||
width: 90, |
width: 90, |
||||||
height: 25, |
height: 25, |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
||||||
|
}, |
||||||
} |
} |
||||||
}], |
], |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.search_text_value_combo", Demo.SearchTextValueCombo); |
|
||||||
|
|||||||
@ -1,68 +1,83 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/11. |
import { Msg } from "@/base"; |
||||||
*/ |
|
||||||
Demo.TextValueDownListCombo = BI.inherit(BI.Widget, { |
@shortcut() |
||||||
props: { |
export class TextValueDownListCombo extends Widget { |
||||||
baseCls: "" |
static xtype = "demo.text_value_down_list_combo"; |
||||||
}, |
|
||||||
|
props = { baseCls: "" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
return { |
return { |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.text_value_down_list_combo", |
type: "bi.text_value_down_list_combo", |
||||||
width: 300, |
width: 300, |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
self.refs = _ref; |
self.refs = _ref; |
||||||
}, |
}, |
||||||
text: "默认值", |
text: "默认值", |
||||||
value: 11, |
value: 11, |
||||||
items: [[{ |
items: [ |
||||||
|
[ |
||||||
|
{ |
||||||
text: "属于", |
text: "属于", |
||||||
value: 1, |
value: 1, |
||||||
cls: "dot-e-font" |
cls: "dot-e-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "不属于", |
text: "不属于", |
||||||
value: 2, |
value: 2, |
||||||
cls: "dot-e-font" |
cls: "dot-e-font", |
||||||
}], [{ |
} |
||||||
|
], |
||||||
|
[ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
text: "大于", |
text: "大于", |
||||||
value: 3, |
value: 3, |
||||||
iconCls1: "dot-e-font" |
iconCls1: "dot-e-font", |
||||||
}, |
}, |
||||||
value: 3, |
value: 3, |
||||||
children: [{ |
children: [ |
||||||
|
{ |
||||||
text: "固定值", |
text: "固定值", |
||||||
value: 4, |
value: 4, |
||||||
cls: "dot-e-font" |
cls: "dot-e-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "平均值", |
text: "平均值", |
||||||
value: 5, |
value: 5, |
||||||
cls: "dot-e-font" |
cls: "dot-e-font", |
||||||
}] |
} |
||||||
}]] |
], |
||||||
}, { |
} |
||||||
|
] |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
width: 90, |
width: 90, |
||||||
height: 25, |
height: 25, |
||||||
text: "setValue", |
text: "setValue", |
||||||
handler: function () { |
handler() { |
||||||
self.refs.setValue(2); |
self.refs.setValue(2); |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
width: 90, |
width: 90, |
||||||
height: 25, |
height: 25, |
||||||
text: "getValue", |
text: "getValue", |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.alert("", JSON.stringify(self.refs.getValue())); |
Msg.alert("", JSON.stringify(self.refs.getValue())); |
||||||
|
}, |
||||||
} |
} |
||||||
}], |
], |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.text_value_down_list_combo", Demo.TextValueDownListCombo); |
|
||||||
|
|||||||
@ -1,43 +1,51 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/11. |
import { Msg } from "@/base"; |
||||||
*/ |
|
||||||
Demo.TextValueCheckCombo = BI.inherit(BI.Widget, { |
@shortcut() |
||||||
props: { |
export class TextValueCheckCombo extends Widget { |
||||||
baseCls: "" |
static xtype = "demo.text_value_check_combo"; |
||||||
}, |
|
||||||
render: function () { |
props = { baseCls: "" }; |
||||||
var self = this; |
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.text_value_check_combo", |
type: "bi.text_value_check_combo", |
||||||
ref: function () { |
ref () { |
||||||
self.combo = this; |
self.combo = this; |
||||||
}, |
}, |
||||||
text: "默认值", |
text: "默认值", |
||||||
// value: 1,
|
// value: 1,
|
||||||
width: 300, |
width: 300, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
text: "MVC-1", |
text: "MVC-1", |
||||||
value: 1 |
value: 1, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "MVC-2", |
text: "MVC-2", |
||||||
value: 2 |
value: 2, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "MVC-3", |
text: "MVC-3", |
||||||
value: 3 |
value: 3, |
||||||
}] |
} |
||||||
}, { |
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
width: 90, |
width: 90, |
||||||
height: 25, |
height: 25, |
||||||
handler: function () { |
handler () { |
||||||
BI.Msg.alert("", JSON.stringify(self.combo.getValue())); |
BI.Msg.alert("", JSON.stringify(self.combo.getValue())); |
||||||
|
}, |
||||||
} |
} |
||||||
}], |
], |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.text_value_check_combo", Demo.TextValueCheckCombo); |
|
||||||
|
|||||||
@ -1,32 +1,35 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.calendar"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
const date = new Date(); |
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
var date = new Date(); |
|
||||||
return { |
return { |
||||||
type: "bi.calendar", |
type: "bi.calendar", |
||||||
ref: function () { |
ref() { |
||||||
self.calendar = this; |
self.calendar = this; |
||||||
}, |
}, |
||||||
logic: { |
logic: { |
||||||
dynamic: false |
dynamic: false, |
||||||
}, |
}, |
||||||
year: date.getFullYear(), |
year: date.getFullYear(), |
||||||
month: date.getMonth(), |
month: date.getMonth(), |
||||||
day: date.getDate() |
day: date.getDate(), |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
var date = new Date(); |
const date = new Date(); |
||||||
this.calendar.setValue({ |
this.calendar.setValue({ |
||||||
year: date.getFullYear(), |
year: date.getFullYear(), |
||||||
month: date.getMonth(), |
month: date.getMonth(), |
||||||
day: date.getDate() |
day: date.getDate(), |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.calendar", Demo.Func); |
|
||||||
|
|||||||
@ -1,40 +1,53 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createItems } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.click_item_effect"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: BI.createItems([{ |
items: createItems( |
||||||
|
[ |
||||||
|
{ |
||||||
text: "bi-list-item", |
text: "bi-list-item", |
||||||
cls: "bi-list-item close-font" |
cls: "bi-list-item close-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "bi-list-item-simple", |
text: "bi-list-item-simple", |
||||||
cls: "bi-list-item-simple close-font" |
cls: "bi-list-item-simple close-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "bi-list-item-effect", |
text: "bi-list-item-effect", |
||||||
cls: "bi-list-item-effect close-font" |
cls: "bi-list-item-effect close-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "bi-list-item-active", |
text: "bi-list-item-active", |
||||||
cls: "bi-list-item-active close-font" |
cls: "bi-list-item-active close-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "bi-list-item-active2", |
text: "bi-list-item-active2", |
||||||
cls: "bi-list-item-active2 close-font" |
cls: "bi-list-item-active2 close-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "bi-list-item-select", |
text: "bi-list-item-select", |
||||||
cls: "bi-list-item-select close-font" |
cls: "bi-list-item-select close-font", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "bi-list-item-select2", |
text: "bi-list-item-select2", |
||||||
cls: "bi-list-item-select2 close-font" |
cls: "bi-list-item-select2 close-font", |
||||||
}], { |
} |
||||||
|
], |
||||||
|
{ |
||||||
type: "bi.icon_text_item", |
type: "bi.icon_text_item", |
||||||
logic: { |
logic: { |
||||||
dynamic: true |
dynamic: true, |
||||||
|
}, |
||||||
} |
} |
||||||
}), |
), |
||||||
vgap: 10 |
vgap: 10, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.click_item_effect", Demo.Func); |
|
||||||
|
|||||||
@ -1,40 +1,46 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.color_chooser"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.color_chooser", |
type: "bi.color_chooser", |
||||||
recommendColorsGetter: function () { |
recommendColorsGetter() { |
||||||
return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"] |
return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"]; |
||||||
}, |
}, |
||||||
width: 24, |
width: 24, |
||||||
height: 24 |
height: 24, |
||||||
}, |
}, |
||||||
left: 100, |
left: 100, |
||||||
top: 250 |
top: 250, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.simple_color_chooser", |
type: "bi.simple_color_chooser", |
||||||
width: 30, |
width: 30, |
||||||
height: 24 |
height: 24, |
||||||
}, |
}, |
||||||
left: 400, |
left: 400, |
||||||
top: 250 |
top: 250, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.color_chooser", |
type: "bi.color_chooser", |
||||||
width: 230, |
width: 230, |
||||||
height: 24 |
height: 24, |
||||||
}, |
}, |
||||||
left: 100, |
left: 100, |
||||||
top: 350 |
top: 350, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.color_chooser", Demo.Func); |
|
||||||
|
|||||||
@ -1,27 +1,32 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.color_chooser_popup"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
return { |
return { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.color_chooser_popup", |
type: "bi.color_chooser_popup", |
||||||
cls: "bi-card" |
cls: "bi-card", |
||||||
}, |
}, |
||||||
left: 100, |
left: 100, |
||||||
top: 250 |
top: 250, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.simple_color_chooser_popup", |
type: "bi.simple_color_chooser_popup", |
||||||
cls: "bi-card" |
cls: "bi-card", |
||||||
}, |
}, |
||||||
left: 400, |
left: 400, |
||||||
top: 250 |
top: 250, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.color_chooser_popup", Demo.Func); |
|
||||||
|
|||||||
@ -1,28 +1,36 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func", |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.segment"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
BI.createWidget({ |
|
||||||
|
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.horizontal", |
type: "bi.horizontal", |
||||||
element: this, |
element: this, |
||||||
vgap: 20, |
vgap: 20, |
||||||
hgap: 30, |
hgap: 30, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.segment", |
type: "bi.segment", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
text: "较长的选项1", |
text: "较长的选项1", |
||||||
value: 1, |
value: 1, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "选项2", |
text: "选项2", |
||||||
value: 2, |
value: 2, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "选项3", |
text: "选项3", |
||||||
value: 3, |
value: 3, |
||||||
}], |
} |
||||||
}], |
], |
||||||
}); |
} |
||||||
}, |
], |
||||||
}); |
}); |
||||||
BI.shortcut("demo.segment", Demo.Func); |
} |
||||||
|
} |
||||||
|
|||||||
@ -1,23 +1,24 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/11. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.ClearEditor = BI.inherit(BI.Widget, { |
export class ClearEditor extends Widget { |
||||||
props: { |
static xtype = "demo.clear_editor"; |
||||||
baseCls: "" |
|
||||||
}, |
props = { baseCls: "" }; |
||||||
render: function () { |
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.clear_editor", |
type: "bi.clear_editor", |
||||||
cls: "bi-border", |
cls: "bi-border", |
||||||
width: 300, |
width: 300, |
||||||
watermark: "这个是带清除按钮的", |
watermark: "这个是带清除按钮的", |
||||||
value: 123 |
value: 123, |
||||||
}], |
} |
||||||
vgap: 20 |
], |
||||||
|
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.clear_editor", Demo.ClearEditor); |
|
||||||
|
|||||||
@ -1,47 +1,48 @@ |
|||||||
/** |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/11. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.ClearEditor = BI.inherit(BI.Widget, { |
export class ClearEditor extends Widget { |
||||||
props: { |
static xtype = "demo.shelter_editor"; |
||||||
baseCls: "" |
|
||||||
}, |
props = { baseCls: "" }; |
||||||
render: function () { |
|
||||||
var editor = BI.createWidget({ |
render() { |
||||||
|
const editor = createWidget({ |
||||||
type: "bi.shelter_editor", |
type: "bi.shelter_editor", |
||||||
cls: "bi-border", |
cls: "bi-border", |
||||||
validationChecker: function (v) { |
validationChecker(v) { |
||||||
return v != "a"; |
return v != "a"; |
||||||
}, |
}, |
||||||
watermark: "可以设置标记的输入框", |
watermark: "可以设置标记的输入框", |
||||||
value: "这是一个遮罩", |
value: "这是一个遮罩", |
||||||
keyword: "z" |
keyword: "z", |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
hgap: 30, |
hgap: 30, |
||||||
vgap: 20, |
vgap: 20, |
||||||
bgap: 50, |
bgap: 50, |
||||||
items: [editor] |
items: [editor], |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "focus", |
text: "focus", |
||||||
height: 25, |
height: 25, |
||||||
handler: function () { |
handler() { |
||||||
editor.focus(); |
editor.focus(); |
||||||
} |
}, |
||||||
}, |
}, |
||||||
right: 10, |
right: 10, |
||||||
left: 10, |
left: 10, |
||||||
bottom: 10 |
bottom: 10, |
||||||
}] |
|
||||||
}); |
|
||||||
} |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
|
} |
||||||
BI.shortcut("demo.shelter_editor", Demo.ClearEditor); |
} |
||||||
|
|||||||
@ -1,29 +1,28 @@ |
|||||||
/** |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/14. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.SignEditor = BI.inherit(BI.Widget, { |
export class SignEditor extends Widget { |
||||||
props: { |
static xtype = "demo.sign_editor"; |
||||||
baseCls: "" |
|
||||||
}, |
props = { baseCls: "" }; |
||||||
render: function () { |
|
||||||
var editor = BI.createWidget({ |
render() { |
||||||
|
const editor = createWidget({ |
||||||
type: "bi.sign_editor", |
type: "bi.sign_editor", |
||||||
cls: "bi-border bi-focus-shadow", |
cls: "bi-border bi-focus-shadow", |
||||||
validationChecker: function (v) { |
validationChecker(v) { |
||||||
return v != "abc"; |
return v != "abc"; |
||||||
}, |
}, |
||||||
watermark: "可以设置标记的输入框", |
watermark: "可以设置标记的输入框", |
||||||
text: "这是一个标记，点击它即可进行输入" |
text: "这是一个标记，点击它即可进行输入", |
||||||
}); |
}); |
||||||
editor.setValue(2); |
editor.setValue(2); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
hgap: 30, |
hgap: 30, |
||||||
vgap: 20, |
vgap: 20, |
||||||
items: [editor] |
items: [editor], |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.sign_editor", Demo.SignEditor); |
|
||||||
|
|||||||
@ -1,33 +1,34 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/11. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.SimpleStateEditor = BI.inherit(BI.Widget, { |
export class SimpleStateEditor extends Widget { |
||||||
props: { |
static xtype = "demo.simple_state_editor"; |
||||||
baseCls: "" |
|
||||||
}, |
props = { baseCls: "" }; |
||||||
render: function () { |
|
||||||
var self = this; |
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.horizontal_adapt", |
type: "bi.horizontal_adapt", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.simple_state_editor", |
type: "bi.simple_state_editor", |
||||||
ref: function () { |
ref() { |
||||||
self.editor = this; |
self.editor = this; |
||||||
}, |
}, |
||||||
cls: "bi-border", |
cls: "bi-border", |
||||||
width: 300 |
width: 300, |
||||||
}], |
} |
||||||
vgap: 20 |
], |
||||||
|
vgap: 20, |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
var self = this; |
const self = this; |
||||||
setTimeout(function () { |
setTimeout(() => { |
||||||
self.editor.setState(["*", "*"]); |
self.editor.setState(["*", "*"]); |
||||||
}, 1000); |
}, 1000); |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.simple_state_editor", Demo.SimpleStateEditor); |
|
||||||
|
|||||||
@ -1,34 +1,34 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/11. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.StateEditor = BI.inherit(BI.Widget, { |
export class StateEditor extends Widget { |
||||||
props: { |
static xtype = "demo.state_editor"; |
||||||
baseCls: "" |
|
||||||
}, |
props = { baseCls: "" }; |
||||||
render: function () { |
|
||||||
var self = this; |
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.horizontal_adapt", |
type: "bi.horizontal_adapt", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.state_editor", |
type: "bi.state_editor", |
||||||
ref: function () { |
ref() { |
||||||
self.editor = this; |
self.editor = this; |
||||||
}, |
}, |
||||||
cls: "bi-border", |
cls: "bi-border", |
||||||
width: 300 |
width: 300, |
||||||
}], |
} |
||||||
vgap: 20 |
], |
||||||
|
vgap: 20, |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
var self = this; |
const self = this; |
||||||
setTimeout(function () { |
setTimeout(() => { |
||||||
self.editor.setState(["*", "*"]); |
self.editor.setState(["*", "*"]); |
||||||
}, 1000); |
}, 1000); |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.state_editor", Demo.StateEditor); |
|
||||||
|
|||||||
@ -1,22 +1,26 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.multi_select_item"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "复选item" |
text: "复选item", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.multi_select_item", |
type: "bi.multi_select_item", |
||||||
text: "复选项" |
text: "复选项", |
||||||
}], |
} |
||||||
hgap: 300 |
], |
||||||
|
hgap: 300, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.multi_select_item", Demo.Func); |
|
||||||
|
|||||||
@ -1,25 +1,24 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/25. |
|
||||||
*/ |
|
||||||
|
|
||||||
Demo.Items = BI.inherit(BI.Widget, { |
@shortcut() |
||||||
|
export class Items extends Widget { |
||||||
render: function () { |
static xtype = "demo.single_select_item"; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "单选item" |
text: "单选item", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
text: "单选项" |
text: "单选项", |
||||||
}], |
} |
||||||
hgap: 300 |
], |
||||||
|
hgap: 300, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
|
|
||||||
BI.shortcut("demo.single_select_item", Demo.Items); |
|
||||||
|
|||||||
@ -1,25 +1,24 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by Dailer on 2017/7/25. |
|
||||||
*/ |
|
||||||
|
|
||||||
Demo.Items = BI.inherit(BI.Widget, { |
@shortcut() |
||||||
|
export class Items extends Widget { |
||||||
render: function () { |
static xtype = "demo.single_select_radio_item"; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "单选item" |
text: "单选item", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.single_select_radio_item", |
type: "bi.single_select_radio_item", |
||||||
text: "单选项" |
text: "单选项", |
||||||
}], |
} |
||||||
hgap: 300 |
], |
||||||
|
hgap: 300, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
|
|
||||||
BI.shortcut("demo.single_select_radio_item", Demo.Items); |
|
||||||
|
|||||||
@ -1,23 +1,27 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.lazy_loader"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var self = this; |
const self = this; |
||||||
BI.createWidget({ |
BI.createWidget({ |
||||||
type: "bi.lazy_loader", |
type: "bi.lazy_loader", |
||||||
element: this, |
element: this, |
||||||
el: { |
el: { |
||||||
layouts: [{ |
layouts: [ |
||||||
|
{ |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
hgap: 5 |
hgap: 5, |
||||||
}] |
} |
||||||
|
], |
||||||
}, |
}, |
||||||
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
||||||
type: "bi.button" |
type: "bi.button", |
||||||
}) |
}), |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.lazy_loader", Demo.Func); |
|
||||||
|
|||||||
@ -1,26 +1,28 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, createItems, deepClone, Selection } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.select_list"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
var self = this; |
|
||||||
BI.createWidget({ |
render() { |
||||||
|
const self = this; |
||||||
|
createWidget({ |
||||||
type: "bi.select_list", |
type: "bi.select_list", |
||||||
toolbar: { |
toolbar: { |
||||||
type: "bi.multi_select_bar", |
type: "bi.multi_select_bar", |
||||||
iconWrapperWidth: 26 |
iconWrapperWidth: 26, |
||||||
}, |
}, |
||||||
element: this, |
element: this, |
||||||
el: { |
el: { |
||||||
el: { |
el: { |
||||||
chooseType: BI.Selection.Multi |
chooseType: Selection.Multi, |
||||||
} |
|
||||||
}, |
}, |
||||||
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.SIMPLE_ITEMS), { |
}, |
||||||
type: "bi.multi_select_item" |
items: createItems(deepClone(Demo.CONSTANTS.SIMPLE_ITEMS), { |
||||||
}) |
type: "bi.multi_select_item", |
||||||
|
}), |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.select_list", Demo.Func); |
|
||||||
|
|||||||
@ -1,25 +1,30 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.all_count_pager"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
BI.createWidget({ |
|
||||||
|
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
hgap: 200, |
hgap: 200, |
||||||
vgap: 50, |
vgap: 50, |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: " (测试条件：总页数为3)" |
text: " (测试条件：总页数为3)", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.all_count_pager", |
type: "bi.all_count_pager", |
||||||
pages: 3, |
pages: 3, |
||||||
curr: 1, |
curr: 1, |
||||||
count: 1000 |
count: 1000, |
||||||
}] |
|
||||||
}); |
|
||||||
} |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.shortcut("demo.all_count_pager", Demo.Func); |
} |
||||||
|
} |
||||||
|
|||||||
@ -1,50 +1,54 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.direction_pager"; |
||||||
|
|
||||||
mounted: function () { |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
mounted() { |
||||||
this.pager.populate(); |
this.pager.populate(); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var self = this; |
const self = this; |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
hgap: 200, |
hgap: 200, |
||||||
vgap: 50, |
vgap: 50, |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.direction_pager", |
type: "bi.direction_pager", |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
self.pager = _ref; |
self.pager = _ref; |
||||||
}, |
}, |
||||||
horizontal: { |
horizontal: { |
||||||
pages: false, // 总页数
|
pages: false, // 总页数
|
||||||
curr: 1, // 初始化当前页， pages为数字时可用
|
curr: 1, // 初始化当前页， pages为数字时可用
|
||||||
|
|
||||||
hasPrev: function (v) { |
hasPrev(v) { |
||||||
return v > 1; |
return v > 1; |
||||||
}, |
}, |
||||||
hasNext: function () { |
hasNext() { |
||||||
return true; |
return true; |
||||||
}, |
}, |
||||||
firstPage: 1 |
firstPage: 1, |
||||||
}, |
}, |
||||||
vertical: { |
vertical: { |
||||||
pages: false, // 总页数
|
pages: false, // 总页数
|
||||||
curr: 1, // 初始化当前页， pages为数字时可用
|
curr: 1, // 初始化当前页， pages为数字时可用
|
||||||
|
|
||||||
hasPrev: function (v) { |
hasPrev(v) { |
||||||
return v > 1; |
return v > 1; |
||||||
}, |
}, |
||||||
hasNext: function () { |
hasNext() { |
||||||
return true; |
return true; |
||||||
}, |
}, |
||||||
firstPage: 1 |
firstPage: 1, |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.direction_pager", Demo.Func); |
|
||||||
|
|||||||
@ -1,34 +1,41 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createItems, deepClone } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.list_pane"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
return { |
return { |
||||||
type: "bi.list_pane", |
type: "bi.list_pane", |
||||||
ref: function () { |
ref() { |
||||||
self.pane = this; |
self.pane = this; |
||||||
}, |
}, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
setTimeout(function () { |
setTimeout(() => { |
||||||
callback(BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
callback( |
||||||
|
createItems(deepClone(Demo.CONSTANTS.ITEMS), { |
||||||
type: "bi.multi_select_item", |
type: "bi.multi_select_item", |
||||||
height: 25 |
height: 25, |
||||||
})); |
}) |
||||||
|
); |
||||||
}, 2000); |
}, 2000); |
||||||
}, |
}, |
||||||
el: { |
el: { |
||||||
type: "bi.button_group", |
type: "bi.button_group", |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
} |
} |
||||||
}; |
], |
||||||
}, |
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
this.pane.populate(); |
this.pane.populate(); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.list_pane", Demo.Func); |
|
||||||
|
|||||||
@ -1,28 +1,35 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createItems, deepClone } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.panel"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
return { |
return { |
||||||
type: "bi.panel", |
type: "bi.panel", |
||||||
title: "title", |
title: "title", |
||||||
titleButtons: [{ |
titleButtons: [ |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "操作" |
text: "操作", |
||||||
}], |
} |
||||||
|
], |
||||||
el: { |
el: { |
||||||
type: "bi.button_group", |
type: "bi.button_group", |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}], |
type: "bi.vertical", |
||||||
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
|
||||||
type: "bi.multi_select_item", |
|
||||||
height: 25 |
|
||||||
}) |
|
||||||
} |
} |
||||||
|
], |
||||||
|
items: createItems(deepClone(Demo.CONSTANTS.ITEMS), { |
||||||
|
type: "bi.multi_select_item", |
||||||
|
height: 25, |
||||||
|
}), |
||||||
|
}, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.panel", Demo.Func); |
|
||||||
|
|||||||
@ -1,43 +1,53 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.display_tree"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var tree = BI.createWidget({ |
const tree = createWidget({ |
||||||
type: "bi.display_tree", |
type: "bi.display_tree", |
||||||
element: this |
element: this, |
||||||
}); |
}); |
||||||
|
|
||||||
tree.initTree([{ |
tree.initTree([ |
||||||
|
{ |
||||||
id: 1, |
id: 1, |
||||||
text: "第一项", |
text: "第一项", |
||||||
open: true |
open: true, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 2, |
id: 2, |
||||||
text: "第二项" |
text: "第二项", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 11, |
id: 11, |
||||||
pId: 1, |
pId: 1, |
||||||
text: "子项1(共2个)", |
text: "子项1(共2个)", |
||||||
open: true |
open: true, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 111, |
id: 111, |
||||||
pId: 11, |
pId: 11, |
||||||
text: "子子项1" |
text: "子子项1", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 112, |
id: 112, |
||||||
pId: 11, |
pId: 11, |
||||||
text: "子子项2" |
text: "子子项2", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 12, |
id: 12, |
||||||
pId: 1, |
pId: 1, |
||||||
text: "子项2" |
text: "子项2", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 13, |
id: 13, |
||||||
pId: 1, |
pId: 1, |
||||||
text: "子项3" |
text: "子项3", |
||||||
}]); |
} |
||||||
|
]); |
||||||
|
} |
||||||
} |
} |
||||||
}); |
|
||||||
BI.shortcut("demo.display_tree", Demo.Func); |
|
||||||
@ -1,92 +1,111 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
import { Msg } from "@/base"; |
||||||
baseCls: "demo-func" |
|
||||||
}, |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.level_tree"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var tree = BI.createWidget({ |
const tree = BI.createWidget({ |
||||||
type: "bi.level_tree", |
type: "bi.level_tree", |
||||||
chooseType: 0, |
chooseType: 0, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
id: 1, |
id: 1, |
||||||
text: "第一项", |
text: "第一项", |
||||||
value: 1, |
value: 1, |
||||||
isParent: true |
isParent: true, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 2, |
id: 2, |
||||||
text: "第二项", |
text: "第二项", |
||||||
value: 2, |
value: 2, |
||||||
isParent: true |
isParent: true, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 3, |
id: 3, |
||||||
text: "第三项", |
text: "第三项", |
||||||
value: 1, |
value: 1, |
||||||
isParent: true, |
isParent: true, |
||||||
open: true |
open: true, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 4, |
id: 4, |
||||||
text: "第四项", |
text: "第四项", |
||||||
value: 1 |
value: 1, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 11, |
id: 11, |
||||||
pId: 1, |
pId: 1, |
||||||
text: "子项1", |
text: "子项1", |
||||||
value: 11 |
value: 11, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 12, |
id: 12, |
||||||
pId: 1, |
pId: 1, |
||||||
text: "子项2", |
text: "子项2", |
||||||
value: 12 |
value: 12, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 13, |
id: 13, |
||||||
pId: 1, |
pId: 1, |
||||||
text: "子项3", |
text: "子项3", |
||||||
value: 13 |
value: 13, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 111, |
id: 111, |
||||||
pId: 11, |
pId: 11, |
||||||
text: "子项1-1", |
text: "子项1-1", |
||||||
value: 111 |
value: 111, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 21, |
id: 21, |
||||||
pId: 2, |
pId: 2, |
||||||
text: "子项1", |
text: "子项1", |
||||||
value: 21 |
value: 21, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 31, |
id: 31, |
||||||
pId: 3, |
pId: 3, |
||||||
text: "子项1", |
text: "子项1", |
||||||
value: 31 |
value: 31, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 32, |
id: 32, |
||||||
pId: 3, |
pId: 3, |
||||||
text: "子项2", |
text: "子项2", |
||||||
value: 32 |
value: 32, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
id: 33, |
id: 33, |
||||||
pId: 3, |
pId: 3, |
||||||
text: "子项3", |
text: "子项3", |
||||||
value: 33 |
value: 33, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
BI.createWidget({ |
||||||
type: "bi.vtape", |
type: "bi.vtape", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
el: tree |
{ |
||||||
}, { |
el: tree, |
||||||
|
}, |
||||||
|
{ |
||||||
height: 30, |
height: 30, |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
height: 30, |
height: 30, |
||||||
text: "getValue", |
text: "getValue", |
||||||
handler: function () { |
handler() { |
||||||
BI.Msg.alert("", tree.getValue()); |
BI.Msg.alert("", tree.getValue()); |
||||||
|
}, |
||||||
|
}, |
||||||
} |
} |
||||||
} |
], |
||||||
}] |
|
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.level_tree", Demo.Func); |
|
||||||
|
|||||||
@ -1,24 +1,29 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.editor_trigger"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
BI.createWidget({ |
|
||||||
|
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "输入框加图标的trigger" |
text: "输入框加图标的trigger", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.editor_trigger", |
type: "bi.editor_trigger", |
||||||
watermark: "这是水印", |
watermark: "这是水印", |
||||||
width: 200, |
width: 200, |
||||||
height: 24 |
height: 24, |
||||||
}], |
} |
||||||
|
], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.editor_trigger", Demo.Func); |
|
||||||
|
|||||||
@ -1,24 +1,28 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.icon_trigger"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
BI.createWidget({ |
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "只有一个图标的trigger" |
text: "只有一个图标的trigger", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.icon_trigger", |
type: "bi.icon_trigger", |
||||||
width: 30, |
width: 30, |
||||||
height: 24 |
height: 24, |
||||||
}], |
} |
||||||
|
], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.icon_trigger", Demo.Func); |
|
||||||
|
|||||||
@ -1,25 +1,29 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.select_text_trigger"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
BI.createWidget({ |
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "可被选择的trigger" |
text: "可被选择的trigger", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.select_text_trigger", |
type: "bi.select_text_trigger", |
||||||
text: "这是一个简单的trigger", |
text: "这是一个简单的trigger", |
||||||
width: 200, |
width: 200, |
||||||
height: 24 |
height: 24, |
||||||
}], |
} |
||||||
|
], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.select_text_trigger", Demo.Func); |
|
||||||
|
|||||||
@ -1,25 +1,29 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.text_trigger"; |
||||||
|
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
BI.createWidget({ |
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "文本加图标的trigger" |
text: "文本加图标的trigger", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.text_trigger", |
type: "bi.text_trigger", |
||||||
text: "这是一个简单的trigger", |
text: "这是一个简单的trigger", |
||||||
width: 200, |
width: 200, |
||||||
height: 24 |
height: 24, |
||||||
}], |
} |
||||||
|
], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.text_trigger", Demo.Func); |
|
||||||
|
|||||||
@ -1,100 +1,111 @@ |
|||||||
/** |
import { shortcut, Widget, createWidget, isEmpty, isNotEmptyArray } from "@/core"; |
||||||
* @author windy |
|
||||||
* @version 2.0 |
@shortcut() |
||||||
* Created by windy on 2022/1/11 |
export class Form extends Widget { |
||||||
*/ |
static xtype = "demo.form"; |
||||||
Demo.Form = BI.inherit(BI.Widget, { |
|
||||||
props: { |
props = { baseCls: "demo-form" }; |
||||||
baseCls: "demo-form" |
|
||||||
}, |
render() { |
||||||
render: function () { |
const widget = BI.createWidget({ |
||||||
var widget = BI.createWidget({ |
|
||||||
type: "bi.custom_form", |
type: "bi.custom_form", |
||||||
width: 300, |
width: 300, |
||||||
labelWidth: 100, |
labelWidth: 100, |
||||||
items: [{ |
items: [ |
||||||
validate: function (v) { |
{ |
||||||
|
validate(v) { |
||||||
return v !== "a" && v !== ""; |
return v !== "a" && v !== ""; |
||||||
}, |
}, |
||||||
tip: function (v) { |
tip(v) { |
||||||
if (BI.isEmpty(v)) { |
if (BI.isEmpty(v)) { |
||||||
return "不能为空"; |
return "不能为空"; |
||||||
} |
} |
||||||
return "不合法格式" |
|
||||||
|
return "不合法格式"; |
||||||
}, |
}, |
||||||
label: "E-mail", |
label: "E-mail", |
||||||
el: { |
el: { |
||||||
type: 'bi.text_editor', |
type: "bi.text_editor", |
||||||
watermark: "输入a报错", |
watermark: "输入a报错", |
||||||
allowBlank: true, |
allowBlank: true, |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
validate: function (v) { |
{ |
||||||
|
validate(v) { |
||||||
return BI.isNotEmptyArray(v); |
return BI.isNotEmptyArray(v); |
||||||
}, |
}, |
||||||
tip: function () { |
tip() { |
||||||
return "不能为空"; |
return "不能为空"; |
||||||
}, |
}, |
||||||
label: "性别", |
label: "性别", |
||||||
el: { |
el: { |
||||||
type: 'bi.text_value_combo', |
type: "bi.text_value_combo", |
||||||
text: "请选择", |
text: "请选择", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
text: "男", |
text: "男", |
||||||
value: 1 |
value: 1, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "女", |
text: "女", |
||||||
value: 2 |
value: 2, |
||||||
}] |
|
||||||
} |
} |
||||||
}, { |
], |
||||||
validate: function (v) { |
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
validate(v) { |
||||||
return v !== ""; |
return v !== ""; |
||||||
}, |
}, |
||||||
tip: function () { |
tip() { |
||||||
return "不能为空"; |
return "不能为空"; |
||||||
}, |
}, |
||||||
label: "姓名", |
label: "姓名", |
||||||
el: { |
el: { |
||||||
type: 'bi.text_editor', |
type: "bi.text_editor", |
||||||
watermark: "输入姓名", |
watermark: "输入姓名", |
||||||
allowBlank: true, |
allowBlank: true, |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
validate: function (v) { |
{ |
||||||
|
validate(v) { |
||||||
return v !== ""; |
return v !== ""; |
||||||
}, |
}, |
||||||
tip: function () { |
tip() { |
||||||
return "不能为空"; |
return "不能为空"; |
||||||
}, |
}, |
||||||
label: "姓名", |
label: "姓名", |
||||||
el: { |
el: { |
||||||
type: 'bi.textarea_editor', |
type: "bi.textarea_editor", |
||||||
cls: 'bi-border', |
cls: "bi-border", |
||||||
watermark: "输入简介", |
watermark: "输入简介", |
||||||
allowBlank: true, |
allowBlank: true, |
||||||
height: 200, |
height: 200, |
||||||
|
}, |
||||||
} |
} |
||||||
}], |
], |
||||||
layout: { |
layout: { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
vgap: 30 |
vgap: 30, |
||||||
} |
}, |
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
hgap: 200, |
hgap: 200, |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [widget, { |
items: [ |
||||||
|
widget, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "提交", |
text: "提交", |
||||||
handler: function () { |
handler() { |
||||||
widget.validate(); |
widget.validate(); |
||||||
|
|
||||||
console.log(widget.getValue()); |
console.log(widget.getValue()); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.form", Demo.Form); |
|
||||||
|
|||||||
@ -1,24 +1,27 @@ |
|||||||
Demo.TreeValueChooser = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, deepClone } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-tree-value-chooser-combo" |
@shortcut() |
||||||
}, |
export class TreeValueChooser extends Widget { |
||||||
render: function () { |
static xtype = "demo.tree_value_chooser_combo"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-tree-value-chooser-combo" }; |
||||||
|
|
||||||
var widget = BI.createWidget({ |
render() { |
||||||
|
const widget = createWidget({ |
||||||
type: "bi.tree_value_chooser_combo", |
type: "bi.tree_value_chooser_combo", |
||||||
width: 300, |
width: 300, |
||||||
// items: BI.deepClone(Demo.CONSTANTS.TREEITEMS),
|
// items: deepClone(Demo.CONSTANTS.TREEITEMS),
|
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
callback(BI.deepClone(Demo.CONSTANTS.TREEITEMS)); |
callback(deepClone(Demo.CONSTANTS.TREEITEMS)); |
||||||
}, |
}, |
||||||
defaultText: "请选择", |
defaultText: "请选择", |
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
hgap: 200, |
hgap: 200, |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [widget] |
items: [widget], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.tree_value_chooser_combo", Demo.TreeValueChooser); |
|
||||||
|
|||||||
@ -1,16 +1,18 @@ |
|||||||
Demo.TreeValueChooser = BI.inherit(BI.Widget, { |
import { shortcut, Widget, deepClone } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-tree-value-chooser" |
|
||||||
}, |
|
||||||
render: function () { |
|
||||||
|
|
||||||
|
@shortcut() |
||||||
|
export class TreeValueChooser extends Widget { |
||||||
|
static xtype = "demo.tree_value_chooser_pane"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-tree-value-chooser" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.tree_value_chooser_pane", |
type: "bi.tree_value_chooser_pane", |
||||||
items: BI.deepClone(Demo.CONSTANTS.TREEITEMS) |
items: deepClone(Demo.CONSTANTS.TREEITEMS), |
||||||
// itemsCreator: function (op, callback) {
|
// itemsCreator: function (op, callback) {
|
||||||
// callback(tree);
|
// callback(tree);
|
||||||
// }
|
// }
|
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.tree_value_chooser_pane", Demo.TreeValueChooser); |
|
||||||
|
|||||||
@ -1,20 +1,24 @@ |
|||||||
Demo.ValueChooserCombo = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, deepClone } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-value-chooser-combo" |
@shortcut() |
||||||
}, |
export class ValueChooserCombo extends Widget { |
||||||
render: function () { |
static xtype = "demo.value_chooser_combo"; |
||||||
var widget = BI.createWidget({ |
|
||||||
|
props = { baseCls: "demo-value-chooser-combo" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const widget = createWidget({ |
||||||
type: "bi.value_chooser_combo", |
type: "bi.value_chooser_combo", |
||||||
itemsCreator: function (op, callback) { |
itemsCreator (op, callback) { |
||||||
callback(BI.deepClone(Demo.CONSTANTS.ITEMS)); |
callback(deepClone(Demo.CONSTANTS.ITEMS)); |
||||||
} |
}, |
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
hgap: 200, |
hgap: 200, |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [widget] |
items: [widget], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.value_chooser_combo", Demo.ValueChooserCombo); |
|
||||||
|
|||||||
@ -1,15 +1,18 @@ |
|||||||
Demo.ValueChooserPane = BI.inherit(BI.Widget, { |
import { shortcut, Widget, deepClone } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-value-chooser-pane" |
@shortcut() |
||||||
}, |
export class ValueChooserPane extends Widget { |
||||||
render: function () { |
static xtype = "demo.value_chooser_pane"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-value-chooser-pane" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.value_chooser_pane", |
type: "bi.value_chooser_pane", |
||||||
items: BI.deepClone(Demo.CONSTANTS.ITEMS) |
items: deepClone(Demo.CONSTANTS.ITEMS), |
||||||
// itemsCreator: function (op, callback) {
|
// itemsCreator: function (op, callback) {
|
||||||
// callback(BI.deepClone(Demo.CONSTANTS.ITEMS));
|
// callback(deepClone(Demo.CONSTANTS.ITEMS));
|
||||||
// }
|
// }
|
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.value_chooser_pane", Demo.ValueChooserPane); |
|
||||||
|
|||||||
@ -1,36 +1,34 @@ |
|||||||
/** |
import { shortcut } from "@/core"; |
||||||
* author: young |
import { Pane as BIPane } from "@/base"; |
||||||
* createdDate: 2018/11/30 |
|
||||||
* description: |
|
||||||
*/ |
|
||||||
!(function () { |
|
||||||
var Pane = BI.inherit(BI.Pane, { |
|
||||||
props: { |
|
||||||
|
|
||||||
}, |
@shortcut() |
||||||
|
export class Pane extends BIPane { |
||||||
|
static xtype = "demo.pane"; |
||||||
|
|
||||||
mounted: function () { |
props = {}; |
||||||
console.log('loading pane mounted'); |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
mounted() { |
||||||
|
console.log("loading pane mounted"); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.center_adapt", |
type: "bi.center_adapt", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "this is pane center" |
text: "this is pane center", |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
beforeRender: function (callback) { |
beforeRender(callback) { |
||||||
var self = this; |
const self = this; |
||||||
this.loading(); |
this.loading(); |
||||||
setTimeout(function () { |
setTimeout(() => { |
||||||
self.loaded(); |
self.loaded(); |
||||||
callback(); |
callback(); |
||||||
}, 3000); |
}, 3000); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.pane", Pane); |
|
||||||
})(); |
|
||||||
|
|||||||
@ -1,89 +1,81 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, createItems, deepClone } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.combo_group"; |
||||||
|
|
||||||
child: [{ |
props = { baseCls: "demo-func" }; |
||||||
|
child = [ |
||||||
|
{ |
||||||
type: "bi.combo_group", |
type: "bi.combo_group", |
||||||
el: { |
el: { type: "bi.icon_text_icon_item", text: "2010年", value: 2010, height: 25, iconCls: "close-ha-font" }, |
||||||
type: "bi.icon_text_icon_item", |
items: [ |
||||||
text: "2010年", |
{ type: "bi.single_select_item", height: 25, text: "一月", value: 11 }, |
||||||
value: 2010, |
{ |
||||||
height: 25, |
|
||||||
iconCls: "close-ha-font" |
|
||||||
}, |
|
||||||
items: [{ |
|
||||||
type: "bi.single_select_item", |
|
||||||
height: 25, |
|
||||||
text: "一月", |
|
||||||
value: 11 |
|
||||||
}, { |
|
||||||
type: "bi.icon_text_icon_item", |
type: "bi.icon_text_icon_item", |
||||||
height: 25, |
height: 25, |
||||||
text: "二月", |
text: "二月", |
||||||
value: 12, |
value: 12, |
||||||
iconCls1: "close-ha-font", |
iconCls1: "close-ha-font", |
||||||
iconCls2: "close-ha-font", |
iconCls2: "close-ha-font", |
||||||
children: [{type: "bi.single_select_item", text: "一号", value: 101, height: 25}] |
children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }], |
||||||
}] |
} |
||||||
}, { |
], |
||||||
text: "2011年", value: 2011 |
}, |
||||||
}, { |
{ text: "2011年", value: 2011 }, |
||||||
text: "2012年", value: 2012, iconCls: "close-ha-font" |
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
||||||
}, { |
{ text: "2013年", value: 2013 }, |
||||||
text: "2013年", value: 2013 |
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
||||||
}, { |
{ text: "2015年", value: 2015, iconCls: "close-ha-font" } |
||||||
text: "2014年", value: 2014, iconCls: "close-ha-font" |
]; |
||||||
}, { |
|
||||||
text: "2015年", value: 2015, iconCls: "close-ha-font" |
|
||||||
}], |
|
||||||
|
|
||||||
_createBottom: function () { |
_createBottom() { |
||||||
var childCombo = BI.createWidget({ |
const childCombo = createWidget({ |
||||||
type: "bi.combo", |
type: "bi.combo", |
||||||
el: { |
el: { |
||||||
type: "bi.text_button", |
type: "bi.text_button", |
||||||
cls: "button-combo", |
cls: "button-combo", |
||||||
height: 30 |
height: 30, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
el: { |
el: { |
||||||
type: "bi.button_tree", |
type: "bi.button_tree", |
||||||
items: BI.createItems(BI.deepClone(this.child), { |
items: createItems(deepClone(this.child), { |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
height: 25, |
height: 25, |
||||||
handler: function (v) { |
handler(v) {}, |
||||||
|
|
||||||
} |
|
||||||
}), |
}), |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
} |
} |
||||||
|
], |
||||||
}, |
}, |
||||||
width: 200 |
}, |
||||||
|
width: 200, |
||||||
}); |
}); |
||||||
childCombo.setValue(BI.deepClone(this.child)[0].items[0].value); |
childCombo.setValue(deepClone(this.child)[0].items[0].value); |
||||||
|
|
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
items: [childCombo], |
items: [childCombo], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
columns: 1, |
columns: 1, |
||||||
rows: 1, |
rows: 1, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 0, |
row: 0, |
||||||
el: this._createBottom() |
el: this._createBottom(), |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.combo_group", Demo.Func); |
|
||||||
|
|||||||
@ -1,41 +1,54 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createItems } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
render: function () { |
static xtype = "demo.expander"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
hgap: 30, |
hgap: 30, |
||||||
vgap: 20, |
vgap: 20, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.expander", |
type: "bi.expander", |
||||||
el: { |
el: { |
||||||
type: "bi.icon_text_node", |
type: "bi.icon_text_node", |
||||||
cls: "pull-right-ha-font mvc-border", |
cls: "pull-right-ha-font mvc-border", |
||||||
height: 25, |
height: 25, |
||||||
text: "Expander" |
text: "Expander", |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
cls: "mvc-border", |
cls: "mvc-border", |
||||||
items: BI.createItems([{ |
items: createItems( |
||||||
|
[ |
||||||
|
{ |
||||||
text: "项目1", |
text: "项目1", |
||||||
value: 1 |
value: 1, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "项目2", |
text: "项目2", |
||||||
value: 2 |
value: 2, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "项目3", |
text: "项目3", |
||||||
value: 3 |
value: 3, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "项目4", |
text: "项目4", |
||||||
value: 4 |
value: 4, |
||||||
}], { |
} |
||||||
|
], |
||||||
|
{ |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
height: 25 |
height: 25, |
||||||
}) |
} |
||||||
|
), |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.expander", Demo.Func); |
|
||||||
|
|||||||
@ -1,27 +1,33 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, deepClone, map, extend } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
render: function () { |
static xtype = "demo.loader"; |
||||||
var self = this; |
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
this.all = 0; |
this.all = 0; |
||||||
var items = BI.deepClone(Demo.CONSTANTS.ITEMS); |
const items = deepClone(Demo.CONSTANTS.ITEMS); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.loader", |
type: "bi.loader", |
||||||
itemsCreator: function (options, populate) { |
itemsCreator(options, populate) { |
||||||
setTimeout(function () { |
setTimeout(() => { |
||||||
populate(BI.map(items.slice((options.times - 1) * 10, options.times * 10), function (i, v) { |
populate( |
||||||
return BI.extend(v, { |
map(items.slice((options.times - 1) * 10, options.times * 10), (i, v) => |
||||||
|
extend(v, { |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
height: 25 |
height: 25, |
||||||
}); |
}) |
||||||
})); |
) |
||||||
|
); |
||||||
}, 1000); |
}, 1000); |
||||||
}, |
}, |
||||||
hasNext: function (options) { |
hasNext(options) { |
||||||
return options.times * 10 < items.length; |
return options.times * 10 < items.length; |
||||||
} |
}, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.loader", Demo.Func); |
|
||||||
|
|||||||
@ -1,35 +1,41 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, random, bind } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
_createNav: function (v) { |
static xtype = "demo.navigation"; |
||||||
return BI.createWidget({ |
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
_createNav(v) { |
||||||
|
return createWidget({ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg" + BI.random(1, 8), |
cls: `layout-bg${random(1, 8)}`, |
||||||
text: "第" + v + "页" |
text: `第${v}页`, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
return { |
return { |
||||||
type: "bi.navigation", |
type: "bi.navigation", |
||||||
showIndex: 0, |
showIndex: 0, |
||||||
tab: { |
tab: { |
||||||
height: 30, |
height: 30, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
once: false, |
once: false, |
||||||
text: "后退", |
text: "后退", |
||||||
value: -1, |
value: -1, |
||||||
cls: "mvc-button layout-bg3" |
cls: "mvc-button layout-bg3", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
once: false, |
once: false, |
||||||
text: "前进", |
text: "前进", |
||||||
value: 1, |
value: 1, |
||||||
cls: "mvc-button layout-bg4" |
cls: "mvc-button layout-bg4", |
||||||
}] |
} |
||||||
|
], |
||||||
}, |
}, |
||||||
cardCreator: BI.bind(this._createNav, this) |
cardCreator: bind(this._createNav, this), |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.navigation", Demo.Func); |
|
||||||
|
|||||||
@ -1,84 +1,125 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createItems, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.searcher"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
_createItems: function (items) { |
_createItems(items) { |
||||||
return BI.createItems(items, { |
return createItems(items, { |
||||||
type: "bi.multi_select_item", |
type: "bi.multi_select_item", |
||||||
height: 25, |
height: 25, |
||||||
handler: function (v) { |
handler(v) {}, |
||||||
|
|
||||||
} |
|
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var self = this; |
const self = this; |
||||||
var items = [{ |
const items = [ |
||||||
text: "2010年", value: 2010, py: "2010n", title: "1111111111111111111111111111111111" |
{ |
||||||
}, { |
text: "2010年", |
||||||
text: "2011年", value: 2011, py: "2011n", title: "1111111111111111111111111111111111" |
value: 2010, |
||||||
}, { |
py: "2010n", |
||||||
text: "2012年", value: 2012, py: "2012n", title: "1111111111111111111111111111111111" |
title: "1111111111111111111111111111111111", |
||||||
}, { |
}, |
||||||
text: "2013年", value: 2013, py: "2013n", title: "1111111111111111111111111111111111" |
{ |
||||||
}, { |
text: "2011年", |
||||||
text: "2014年", value: 2014, py: "2014n", title: "1111111111111111111111111111111111" |
value: 2011, |
||||||
}, { |
py: "2011n", |
||||||
text: "2015年", value: 2015, py: "2015n", title: "1111111111111111111111111111111111" |
title: "1111111111111111111111111111111111", |
||||||
}, { |
}, |
||||||
text: "2016年", value: 2016, py: "2016n", title: "1111111111111111111111111111111111" |
{ |
||||||
}, { |
text: "2012年", |
||||||
text: "2017年", value: 2017, py: "2017n", title: "1111111111111111111111111111111111" |
value: 2012, |
||||||
}]; |
py: "2012n", |
||||||
|
title: "1111111111111111111111111111111111", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "2013年", |
||||||
|
value: 2013, |
||||||
|
py: "2013n", |
||||||
|
title: "1111111111111111111111111111111111", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "2014年", |
||||||
|
value: 2014, |
||||||
|
py: "2014n", |
||||||
|
title: "1111111111111111111111111111111111", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "2015年", |
||||||
|
value: 2015, |
||||||
|
py: "2015n", |
||||||
|
title: "1111111111111111111111111111111111", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "2016年", |
||||||
|
value: 2016, |
||||||
|
py: "2016n", |
||||||
|
title: "1111111111111111111111111111111111", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "2017年", |
||||||
|
value: 2017, |
||||||
|
py: "2017n", |
||||||
|
title: "1111111111111111111111111111111111", |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
var adapter = BI.createWidget({ |
const adapter = createWidget({ |
||||||
type: "bi.button_group", |
type: "bi.button_group", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
items: this._createItems(items), |
items: this._createItems(items), |
||||||
chooseType: 1, |
chooseType: 1, |
||||||
behaviors: {}, |
behaviors: {}, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
|
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: adapter, |
el: adapter, |
||||||
top: 50, |
top: 50, |
||||||
left: 50, |
left: 50, |
||||||
width: 200, |
width: 200, |
||||||
height: 100 |
height: 100, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
width: 200, |
width: 200, |
||||||
height: 30, |
height: 30, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.searcher", |
type: "bi.searcher", |
||||||
adapter: adapter, |
adapter, |
||||||
width: 200, |
width: 200, |
||||||
height: 30 |
height: 30, |
||||||
}, |
}, |
||||||
left: 0, |
left: 0, |
||||||
right: 0, |
right: 0, |
||||||
top: 0, |
top: 0, |
||||||
bottom: 0 |
bottom: 0, |
||||||
}] |
} |
||||||
|
], |
||||||
}, |
}, |
||||||
top: 100, |
top: 100, |
||||||
left: 300 |
left: 300, |
||||||
}] |
|
||||||
}); |
|
||||||
} |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.shortcut("demo.searcher", Demo.Func); |
} |
||||||
|
} |
||||||
|
|||||||
@ -1,59 +1,73 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, createItems } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
render: function () { |
static xtype = "demo.switcher"; |
||||||
|
|
||||||
var adapter = BI.createWidget({ |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const adapter = createWidget({ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
text: "将在该处弹出switcher" |
text: "将在该处弹出switcher", |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: adapter, |
el: adapter, |
||||||
top: 50, |
top: 50, |
||||||
left: 20, |
left: 20, |
||||||
width: 200, |
width: 200, |
||||||
height: 300 |
height: 300, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
hgap: 30, |
hgap: 30, |
||||||
vgap: 20, |
vgap: 20, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.switcher", |
type: "bi.switcher", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
height: 25, |
height: 25, |
||||||
text: "Switcher" |
text: "Switcher", |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
cls: "mvc-border layout-bg5", |
cls: "mvc-border layout-bg5", |
||||||
items: BI.createItems([{ |
items: createItems( |
||||||
|
[ |
||||||
|
{ |
||||||
text: "项目1", |
text: "项目1", |
||||||
value: 1 |
value: 1, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "项目2", |
text: "项目2", |
||||||
value: 2 |
value: 2, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "项目3", |
text: "项目3", |
||||||
value: 3 |
value: 3, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "项目4", |
text: "项目4", |
||||||
value: 4 |
value: 4, |
||||||
}], { |
} |
||||||
|
], |
||||||
|
{ |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
height: 25 |
height: 25, |
||||||
}) |
} |
||||||
|
), |
||||||
}, |
}, |
||||||
adapter: adapter |
adapter, |
||||||
}] |
|
||||||
}); |
|
||||||
} |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.shortcut("demo.switcher", Demo.Func); |
} |
||||||
|
} |
||||||
|
|||||||
@ -1,69 +1,80 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, bind } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
|
static xtype = "demo.tab"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
_createTabs: function (v) { |
_createTabs(v) { |
||||||
switch (v) { |
switch (v) { |
||||||
case 1: |
case 1: |
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
text: "面板1" |
text: "面板1", |
||||||
}); |
}); |
||||||
case 2: |
case 2: |
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
text: "面板2" |
text: "面板2", |
||||||
}); |
}); |
||||||
} |
} |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
this.tab = BI.createWidget({ |
this.tab = createWidget({ |
||||||
type: "bi.button_group", |
type: "bi.button_group", |
||||||
height: 30, |
height: 30, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
text: "Tab1", |
text: "Tab1", |
||||||
value: 1, |
value: 1, |
||||||
width: 50, |
width: 50, |
||||||
cls: "mvc-button layout-bg3" |
cls: "mvc-button layout-bg3", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
text: "Tab2", |
text: "Tab2", |
||||||
value: 2, |
value: 2, |
||||||
width: 50, |
width: 50, |
||||||
cls: "mvc-button layout-bg4" |
cls: "mvc-button layout-bg4", |
||||||
}], |
} |
||||||
layouts: [{ |
], |
||||||
|
layouts: [ |
||||||
|
{ |
||||||
type: "bi.center_adapt", |
type: "bi.center_adapt", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.horizontal", |
type: "bi.horizontal", |
||||||
width: 100 |
width: 100, |
||||||
|
}, |
||||||
|
} |
||||||
|
], |
||||||
} |
} |
||||||
}] |
], |
||||||
}] |
|
||||||
}); |
}); |
||||||
|
|
||||||
var tab = BI.createWidget({ |
const tab = createWidget({ |
||||||
direction: "custom", |
direction: "custom", |
||||||
type: "bi.tab", |
type: "bi.tab", |
||||||
element: this, |
element: this, |
||||||
tab: this.tab, |
tab: this.tab, |
||||||
cardCreator: BI.bind(this._createTabs, this) |
cardCreator: bind(this._createTabs, this), |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: this.tab, |
el: this.tab, |
||||||
left: 200, |
left: 200, |
||||||
top: 200 |
top: 200, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
|
|
||||||
tab.setSelect(2); |
tab.setSelect(2); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.tab", Demo.Func); |
|
||||||
|
|||||||
@ -1,62 +1,80 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
import { ButtonGroup } from "@/base"; |
||||||
baseCls: "demo-func" |
|
||||||
}, |
@shortcut() |
||||||
render: function () { |
export class Func extends Widget { |
||||||
var ref; |
static xtype = "demo.button_group"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
let ref; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.button_group", |
type: "bi.button_group", |
||||||
ref: function (_ref) { |
ref(_ref) { |
||||||
ref = _ref; |
ref = _ref; |
||||||
}, |
}, |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE, |
chooseType: ButtonGroup.CHOOSE_TYPE_NONE, |
||||||
layouts: [{ |
layouts: [ |
||||||
|
{ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.vtape", |
type: "bi.vtape", |
||||||
height: 200 |
height: 200, |
||||||
}] |
} |
||||||
}], |
], |
||||||
items: [{ |
} |
||||||
|
], |
||||||
|
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)" |
text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)", |
||||||
|
}, |
||||||
|
height: 150, |
||||||
}, |
}, |
||||||
height: 150 |
{ |
||||||
}, { |
|
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "1" |
text: "1", |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "populate", |
text: "populate", |
||||||
handler: function () { |
handler() { |
||||||
ref.populate([{ |
ref.populate([ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "1" |
text: "1", |
||||||
}, |
}, |
||||||
height: 50 |
height: 50, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "2" |
text: "2", |
||||||
|
}, |
||||||
|
height: 50, |
||||||
}, |
}, |
||||||
height: 50 |
{ |
||||||
}, { |
|
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "3" |
text: "3", |
||||||
|
}, |
||||||
} |
} |
||||||
}]); |
]); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
|
|
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.button_group", Demo.Func); |
|
||||||
|
|||||||
@ -1,26 +1,36 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
import { ButtonGroup } from "@/base"; |
||||||
baseCls: "demo-func" |
|
||||||
}, |
@shortcut() |
||||||
render: function () { |
export class Func extends Widget { |
||||||
|
static xtype = "demo.button_tree"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.button_tree", |
type: "bi.button_tree", |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}, { |
type: "bi.vertical", |
||||||
type: "bi.center_adapt" |
}, |
||||||
}], |
{ |
||||||
items: [{ |
type: "bi.center_adapt", |
||||||
|
} |
||||||
|
], |
||||||
|
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "0", |
text: "0", |
||||||
value: 0 |
value: 0, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "1", |
text: "1", |
||||||
value: 1 |
value: 1, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.button_tree", Demo.Func); |
|
||||||
|
|||||||
@ -1,41 +1,46 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
render: function () { |
static xtype = "demo.collection_view"; |
||||||
var items = []; |
|
||||||
var cellCount = 100; |
props = { baseCls: "demo-func" }; |
||||||
for (var i = 0; i < cellCount; i++) { |
|
||||||
|
render() { |
||||||
|
const items = []; |
||||||
|
const cellCount = 100; |
||||||
|
for (let i = 0; i < cellCount; i++) { |
||||||
items[i] = { |
items[i] = { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: i |
text: i, |
||||||
}; |
}; |
||||||
} |
} |
||||||
var grid = BI.createWidget({ |
const grid = createWidget({ |
||||||
type: "bi.collection_view", |
type: "bi.collection_view", |
||||||
width: 400, |
width: 400, |
||||||
height: 300, |
height: 300, |
||||||
items: items, |
items, |
||||||
cellSizeAndPositionGetter: function (index) { |
cellSizeAndPositionGetter(index) { |
||||||
return { |
return { |
||||||
x: index % 10 * 50, |
x: (index % 10) * 50, |
||||||
y: Math.floor(index / 10) * 50, |
y: Math.floor(index / 10) * 50, |
||||||
width: 50, |
width: 50, |
||||||
height: 50 |
height: 50, |
||||||
}; |
}; |
||||||
} |
}, |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: grid, |
el: grid, |
||||||
left: 10, |
left: 10, |
||||||
right: 10, |
right: 10, |
||||||
top: 10, |
top: 10, |
||||||
bottom: 10 |
bottom: 10, |
||||||
}] |
|
||||||
}); |
|
||||||
} |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.shortcut("demo.collection_view", Demo.Func); |
} |
||||||
|
} |
||||||
|
|||||||
@ -1,54 +1,62 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
render: function () { |
static xtype = "demo.grid_view"; |
||||||
var items = []; |
|
||||||
var rowCount = 10000, columnCount = 100; |
props = { baseCls: "demo-func" }; |
||||||
for (var i = 0; i < rowCount; i++) { |
|
||||||
|
render() { |
||||||
|
const items = []; |
||||||
|
const rowCount = 10000, |
||||||
|
columnCount = 100; |
||||||
|
for (let i = 0; i < rowCount; i++) { |
||||||
items[i] = []; |
items[i] = []; |
||||||
for (var j = 0; j < columnCount; j++) { |
for (let j = 0; j < columnCount; j++) { |
||||||
items[i][j] = { |
items[i][j] = { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: i + "-" + j |
text: `${i}-${j}`, |
||||||
}; |
}; |
||||||
} |
} |
||||||
} |
} |
||||||
var grid = BI.createWidget({ |
const grid = createWidget({ |
||||||
type: "bi.grid_view", |
type: "bi.grid_view", |
||||||
width: 400, |
width: 400, |
||||||
height: 300, |
height: 300, |
||||||
estimatedRowSize: 30, |
estimatedRowSize: 30, |
||||||
estimatedColumnSize: 100, |
estimatedColumnSize: 100, |
||||||
items: items, |
items, |
||||||
scrollTop: 100, |
scrollTop: 100, |
||||||
rowHeightGetter: function () { |
rowHeightGetter() { |
||||||
return 30; |
return 30; |
||||||
}, |
}, |
||||||
columnWidthGetter: function () { |
columnWidthGetter() { |
||||||
return 100; |
return 100; |
||||||
} |
}, |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
columns: 1, |
columns: 1, |
||||||
rows: 1, |
rows: 1, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 0, |
row: 0, |
||||||
el: grid |
el: grid, |
||||||
}] |
} |
||||||
|
], |
||||||
}, |
}, |
||||||
left: 10, |
left: 10, |
||||||
right: 10, |
right: 10, |
||||||
top: 10, |
top: 10, |
||||||
bottom: 10 |
bottom: 10, |
||||||
}] |
|
||||||
}); |
|
||||||
} |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.shortcut("demo.grid_view", Demo.Func); |
} |
||||||
|
} |
||||||
|
|||||||
@ -1,22 +1,25 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, map, extend } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
render: function () { |
static xtype = "demo.list_view"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.list_view", |
type: "bi.list_view", |
||||||
el: { |
el: { |
||||||
type: "bi.left" |
type: "bi.left", |
||||||
}, |
}, |
||||||
items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) { |
items: map(Demo.CONSTANTS.ITEMS, (i, item) => |
||||||
return BI.extend({}, item, { |
extend({}, item, { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
width: 200, |
width: 200, |
||||||
height: 200, |
height: 200, |
||||||
text: (i + 1) + "." + item.text |
text: `${i + 1}.${item.text}`, |
||||||
}); |
|
||||||
}) |
}) |
||||||
|
), |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.list_view", Demo.Func); |
|
||||||
|
|||||||
@ -1,111 +1,86 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, map, range, deepClone } from "@/core"; |
||||||
props: { |
import { ButtonGroup } from "@/base"; |
||||||
baseCls: "demo-func" |
|
||||||
}, |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.virtual_group"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
_createItems: function () { |
_createItems() { |
||||||
var items = BI.map(BI.range(1000), function (i) { |
const items = map(range(1000), i => { |
||||||
return { |
return { |
||||||
type: "demo.virtual_group_item", |
type: "demo.virtual_group_item", |
||||||
value: i, |
value: i, |
||||||
key: i + 1 |
key: i + 1, |
||||||
}; |
}; |
||||||
}); |
}); |
||||||
|
|
||||||
return items; |
return items; |
||||||
}, |
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
const buttonGroupItems = self._createItems(); |
||||||
|
const virtualGroupItems = self._createItems(); |
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
var buttonGroupItems = self._createItems(); |
|
||||||
var virtualGroupItems = self._createItems(); |
|
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
vgap: 20, |
vgap: 20, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg5", |
cls: "layout-bg5", |
||||||
height: 50, |
height: 50, |
||||||
text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出" |
text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.button_group", |
type: "bi.button_group", |
||||||
width: 500, |
width: 500, |
||||||
height: 300, |
height: 300, |
||||||
ref: function () { |
ref() { |
||||||
self.buttonGroup = this; |
self.buttonGroup = this; |
||||||
}, |
}, |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}], |
type: "bi.vertical", |
||||||
items: this._createItems() |
} |
||||||
}, { |
], |
||||||
|
items: this._createItems(), |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "演示button_group的刷新", |
text: "演示button_group的刷新", |
||||||
handler: function () { |
handler() { |
||||||
buttonGroupItems.shift(); |
buttonGroupItems.shift(); |
||||||
self.buttonGroup.populate(BI.deepClone(buttonGroupItems)); |
self.buttonGroup.populate(deepClone(buttonGroupItems)); |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.virtual_group", |
type: "bi.virtual_group", |
||||||
width: 500, |
width: 500, |
||||||
height: 300, |
height: 300, |
||||||
ref: function () { |
ref() { |
||||||
self.virtualGroup = this; |
self.virtualGroup = this; |
||||||
}, |
}, |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}], |
type: "bi.vertical", |
||||||
items: this._createItems() |
} |
||||||
}, { |
], |
||||||
|
items: this._createItems(), |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "演示virtual_group的刷新", |
text: "演示virtual_group的刷新", |
||||||
handler: function () { |
handler() { |
||||||
virtualGroupItems.shift(); |
virtualGroupItems.shift(); |
||||||
self.virtualGroup.populate(BI.deepClone(virtualGroupItems)); |
self.virtualGroup.populate(deepClone(virtualGroupItems)); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
|
|
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
|
||||||
BI.shortcut("demo.virtual_group", Demo.Func); |
|
||||||
|
|
||||||
Demo.Item = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "demo-item", |
|
||||||
height: 30 |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this, o = this.options; |
|
||||||
return { |
|
||||||
type: "bi.label", |
|
||||||
ref: function () { |
|
||||||
self.label = this; |
|
||||||
}, |
|
||||||
height: this.options.height, |
|
||||||
text: "key:" + o.key + ",随机数" + BI.UUID() |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
shouldUpdate: function (nextProps) { |
|
||||||
var o = this.options; |
|
||||||
return o.type !== nextProps.type || o.key !== nextProps.key || o.value !== nextProps.value; |
|
||||||
}, |
|
||||||
|
|
||||||
update: function (item) { |
|
||||||
this.label.setText(item.value); |
|
||||||
console.log("更新了一项"); |
|
||||||
return true;// 返回是不是更新成功
|
|
||||||
}, |
|
||||||
|
|
||||||
created: function () { |
|
||||||
console.log("创建了一项"); |
|
||||||
}, |
|
||||||
|
|
||||||
destroyed: function () { |
|
||||||
console.log("删除了一项"); |
|
||||||
} |
} |
||||||
}); |
|
||||||
BI.shortcut("demo.virtual_group_item", Demo.Item); |
|
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import { shortcut, Widget, UUID } from "@/core"; |
||||||
|
|
||||||
|
@shortcut() |
||||||
|
export class Item extends Widget { |
||||||
|
static xtype = "demo.virtual_group_item"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-item", height: 30 }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this, |
||||||
|
o = this.options; |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.label", |
||||||
|
ref () { |
||||||
|
self.label = this; |
||||||
|
}, |
||||||
|
height: this.options.height, |
||||||
|
text: `key:${o.key},随机数${UUID()}`, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
shouldUpdate(nextProps) { |
||||||
|
const o = this.options; |
||||||
|
|
||||||
|
return o.type !== nextProps.type || o.key !== nextProps.key || o.value !== nextProps.value; |
||||||
|
} |
||||||
|
|
||||||
|
update(item) { |
||||||
|
this.label.setText(item.value); |
||||||
|
console.log("更新了一项"); |
||||||
|
|
||||||
|
return true; // 返回是不是更新成功
|
||||||
|
} |
||||||
|
|
||||||
|
created() { |
||||||
|
console.log("创建了一项"); |
||||||
|
} |
||||||
|
|
||||||
|
destroyed() { |
||||||
|
console.log("删除了一项"); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,18 +1,21 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
@shortcut() |
||||||
}, |
export class Func extends Widget { |
||||||
render: function () { |
static xtype = "demo.virtual_list"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.virtual_list", |
type: "bi.virtual_list", |
||||||
items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) { |
items: map(Demo.CONSTANTS.ITEMS, (i, item) => |
||||||
return BI.extend({}, item, { |
extend({}, item, { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: (i + 1) + "." + item.text |
text: `${i + 1}.${item.text}`, |
||||||
}); |
|
||||||
}) |
}) |
||||||
|
), |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.virtual_list", Demo.Func); |
|
||||||
|
|||||||
@ -1,22 +1,27 @@ |
|||||||
Demo.AbsoluteLayout = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-absolute" |
@shortcut() |
||||||
}, |
export class AbsoluteLayout extends Widget { |
||||||
render: function () { |
static xtype = "demo.absolute"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-absolute" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "绝对布局", |
text: "绝对布局", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
width: 300, |
width: 300, |
||||||
height: 200 |
height: 200, |
||||||
}, |
}, |
||||||
left: 100, |
left: 100, |
||||||
top: 100 |
top: 100, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.absolute", Demo.AbsoluteLayout); |
|
||||||
|
|||||||
@ -1,35 +1,40 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.CenterLayout = BI.inherit(BI.Widget, { |
export class CenterLayout extends Widget { |
||||||
props: { |
static xtype = "demo.center_layout"; |
||||||
baseCls: "demo-center" |
|
||||||
}, |
props = { baseCls: "demo-center" }; |
||||||
render: function () { |
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.center", |
type: "bi.center", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "其实是一个grid嵌套absolute的实现", |
text: "其实是一个grid嵌套absolute的实现", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
whiteSpace: "normal" |
whiteSpace: "normal", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal", |
text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
whiteSpace: "normal" |
whiteSpace: "normal", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "Center 3", |
text: "Center 3", |
||||||
cls: "layout-bg3" |
cls: "layout-bg3", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "Center 4", |
text: "Center 4", |
||||||
cls: "layout-bg5" |
cls: "layout-bg5", |
||||||
}], |
} |
||||||
|
], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.center_layout", Demo.CenterLayout); |
|
||||||
|
|||||||
@ -1,18 +1,23 @@ |
|||||||
Demo.CenterAdapt = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-absolute" |
@shortcut() |
||||||
}, |
export class CenterAdapt extends Widget { |
||||||
render: function () { |
static xtype = "demo.center_adapt"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-absolute" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.center_adapt", |
type: "bi.center_adapt", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "水平垂直居中", |
text: "水平垂直居中", |
||||||
width: 300, |
width: 300, |
||||||
height: 200, |
height: 200, |
||||||
cls: "layout-bg1" |
cls: "layout-bg1", |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.center_adapt", Demo.CenterAdapt); |
|
||||||
|
|||||||
@ -1,27 +1,30 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.FloatCenterLayout = BI.inherit(BI.Widget, { |
export class FloatCenterLayout extends Widget { |
||||||
props: { |
static xtype = "demo.float_center"; |
||||||
baseCls: "demo-float-center" |
|
||||||
}, |
props = { baseCls: "demo-float-center" }; |
||||||
render: function () { |
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.float_center", |
type: "bi.float_center", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
whiteSpace: "normal" |
whiteSpace: "normal", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "浮动式的中间布局", |
text: "浮动式的中间布局", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
whiteSpace: "normal" |
whiteSpace: "normal", |
||||||
}], |
} |
||||||
|
], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.float_center", Demo.FloatCenterLayout); |
|
||||||
|
|||||||
@ -1,84 +1,89 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.FlowLayout = BI.inherit(BI.Widget, { |
export class FlowLayout extends Widget { |
||||||
props: { |
static xtype = "demo.flow"; |
||||||
baseCls: "demo-flow" |
|
||||||
}, |
props = { baseCls: "demo-flow" }; |
||||||
render: function () { |
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.center_adapt", |
type: "bi.center_adapt", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Left-1", |
text: "Left-1", |
||||||
cls: "layout-bg1" |
cls: "layout-bg1", |
||||||
|
}, |
||||||
}, { |
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Left-2", |
text: "Left-2", |
||||||
cls: "layout-bg2" |
cls: "layout-bg2", |
||||||
|
}, |
||||||
}, { |
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Left-3", |
text: "Left-3", |
||||||
cls: "layout-bg3" |
cls: "layout-bg3", |
||||||
|
}, |
||||||
}, { |
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Left-4", |
text: "Left-4", |
||||||
cls: "layout-bg4" |
cls: "layout-bg4", |
||||||
|
}, |
||||||
}, { |
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Left-5", |
text: "Left-5", |
||||||
cls: "layout-bg5" |
cls: "layout-bg5", |
||||||
|
} |
||||||
}], |
], |
||||||
hgap: 20 |
hgap: 20, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.right", |
type: "bi.right", |
||||||
hgap: 20, |
hgap: 20, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Right-1", |
text: "Right-1", |
||||||
cls: "layout-bg1" |
cls: "layout-bg1", |
||||||
|
}, |
||||||
}, { |
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Right-2", |
text: "Right-2", |
||||||
cls: "layout-bg2" |
cls: "layout-bg2", |
||||||
|
}, |
||||||
}, { |
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Right-3", |
text: "Right-3", |
||||||
cls: "layout-bg3" |
cls: "layout-bg3", |
||||||
|
}, |
||||||
}, { |
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Right-4", |
text: "Right-4", |
||||||
cls: "layout-bg4" |
cls: "layout-bg4", |
||||||
|
}, |
||||||
}, { |
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
height: 30, |
height: 30, |
||||||
text: "Right-5", |
text: "Right-5", |
||||||
cls: "layout-bg5" |
cls: "layout-bg5", |
||||||
|
} |
||||||
}], |
], |
||||||
vgap: 20 |
vgap: 20, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.flow", Demo.FlowLayout); |
|
||||||
|
|||||||
@ -1,137 +1,153 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.GridLayout = BI.inherit(BI.Widget, { |
export class GridLayout extends Widget { |
||||||
props: { |
static xtype = "demo.grid"; |
||||||
baseCls: "demo-grid" |
|
||||||
}, |
props = { baseCls: "demo-grid" }; |
||||||
render: function () { |
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
columns: 5, |
columns: 5, |
||||||
rows: 3, |
rows: 3, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 0, |
row: 0, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-0, row-0", |
text: "column-0, row-0", |
||||||
cls: "layout-bg1" |
cls: "layout-bg1", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 1, |
column: 1, |
||||||
row: 0, |
row: 0, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-1, row-0", |
text: "column-1, row-0", |
||||||
cls: "layout-bg2" |
cls: "layout-bg2", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 2, |
column: 2, |
||||||
row: 0, |
row: 0, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-2, row-0", |
text: "column-2, row-0", |
||||||
cls: "layout-bg6" |
cls: "layout-bg6", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 3, |
column: 3, |
||||||
row: 0, |
row: 0, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-3, row-0", |
text: "column-3, row-0", |
||||||
cls: "layout-bg3" |
cls: "layout-bg3", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 4, |
column: 4, |
||||||
row: 0, |
row: 0, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-4, row-0", |
text: "column-4, row-0", |
||||||
cls: "layout-bg4" |
cls: "layout-bg4", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 1, |
row: 1, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-0, row-1", |
text: "column-0, row-1", |
||||||
cls: "layout-bg5" |
cls: "layout-bg5", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 1, |
column: 1, |
||||||
row: 1, |
row: 1, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-1, row-1", |
text: "column-1, row-1", |
||||||
cls: "layout-bg6" |
cls: "layout-bg6", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 2, |
column: 2, |
||||||
row: 1, |
row: 1, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-2, row-1", |
text: "column-2, row-1", |
||||||
cls: "layout-bg7" |
cls: "layout-bg7", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 3, |
column: 3, |
||||||
row: 1, |
row: 1, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-3, row-1", |
text: "column-3, row-1", |
||||||
cls: "layout-bg1" |
cls: "layout-bg1", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 4, |
column: 4, |
||||||
row: 1, |
row: 1, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-4, row-1", |
text: "column-4, row-1", |
||||||
cls: "layout-bg3" |
cls: "layout-bg3", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 2, |
row: 2, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-0, row-2", |
text: "column-0, row-2", |
||||||
cls: "layout-bg2" |
cls: "layout-bg2", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 1, |
column: 1, |
||||||
row: 2, |
row: 2, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-1, row-2", |
text: "column-1, row-2", |
||||||
cls: "layout-bg3" |
cls: "layout-bg3", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 2, |
column: 2, |
||||||
row: 2, |
row: 2, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-2, row-2", |
text: "column-2, row-2", |
||||||
cls: "layout-bg4" |
cls: "layout-bg4", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 3, |
column: 3, |
||||||
row: 2, |
row: 2, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-3, row-2", |
text: "column-3, row-2", |
||||||
cls: "layout-bg5" |
cls: "layout-bg5", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 4, |
column: 4, |
||||||
row: 2, |
row: 2, |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "column-4, row-2", |
text: "column-4, row-2", |
||||||
cls: "layout-bg6" |
cls: "layout-bg6", |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.grid", Demo.GridLayout); |
|
||||||
|
|||||||
@ -1,126 +1,153 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by User on 2017/3/21. |
import { VerticalAlign, HorizontalAlign } from "@/core"; |
||||||
*/ |
|
||||||
Demo.Horizontal = BI.inherit(BI.Widget, { |
@shortcut() |
||||||
props: { |
export class Horizontal extends Widget { |
||||||
baseCls: "demo-horizontal" |
static xtype = "demo.horizontal"; |
||||||
}, |
|
||||||
render: function () { |
props = { baseCls: "demo-horizontal" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.horizontal", |
type: "bi.horizontal", |
||||||
height: 150, |
height: 150, |
||||||
hgap: 10, |
hgap: 10, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
whiteSpace: "normal", |
whiteSpace: "normal", |
||||||
text: "因为大多数场景下都需要垂直居中，所以这个布局一般会被vertical_adapt布局设置scrollx=true取代", |
text: "因为大多数场景下都需要垂直居中，所以这个布局一般会被vertical_adapt布局设置scrollx=true取代", |
||||||
cls: "layout-bg3", |
cls: "layout-bg3", |
||||||
width: 500, |
width: 500, |
||||||
height: 50 |
height: 50, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "水平布局", |
text: "水平布局", |
||||||
cls: "layout-bg4", |
cls: "layout-bg4", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "水平布局", |
text: "水平布局", |
||||||
cls: "layout-bg5", |
cls: "layout-bg5", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "水平布局", |
text: "水平布局", |
||||||
cls: "layout-bg6", |
cls: "layout-bg6", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
}, { |
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.layout", |
type: "bi.layout", |
||||||
height: 1, |
height: 1, |
||||||
cls: "bi-border-bottom bi-high-light-border" |
cls: "bi-border-bottom bi-high-light-border", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.horizontal", |
type: "bi.horizontal", |
||||||
height: 150, |
height: 150, |
||||||
verticalAlign: BI.VerticalAlign.Middle, |
verticalAlign: BI.VerticalAlign.Middle, |
||||||
horizontalAlign: BI.HorizontalAlign.Left, |
horizontalAlign: BI.HorizontalAlign.Left, |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "以horizontal实现的vertical_adapt垂直居中", |
text: "以horizontal实现的vertical_adapt垂直居中", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "以horizontal实现的vertical_adapt垂直居中", |
text: "以horizontal实现的vertical_adapt垂直居中", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
}, { |
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.layout", |
type: "bi.layout", |
||||||
height: 1, |
height: 1, |
||||||
cls: "bi-border-bottom bi-high-light-border" |
cls: "bi-border-bottom bi-high-light-border", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.horizontal", |
type: "bi.horizontal", |
||||||
height: 150, |
height: 150, |
||||||
verticalAlign: BI.VerticalAlign.Top, |
verticalAlign: BI.VerticalAlign.Top, |
||||||
horizontalAlign: BI.HorizontalAlign.Center, |
horizontalAlign: BI.HorizontalAlign.Center, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)", |
text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
}, { |
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.layout", |
type: "bi.layout", |
||||||
height: 1, |
height: 1, |
||||||
cls: "bi-border-bottom bi-high-light-border" |
cls: "bi-border-bottom bi-high-light-border", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.horizontal", |
type: "bi.horizontal", |
||||||
height: 150, |
height: 150, |
||||||
verticalAlign: BI.VerticalAlign.Top, |
verticalAlign: BI.VerticalAlign.Top, |
||||||
horizontalAlign: BI.HorizontalAlign.Center, |
horizontalAlign: BI.HorizontalAlign.Center, |
||||||
columnSize: [300, "fill"], |
columnSize: [300, "fill"], |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "以horizontal代替horizontal_adapt实现的用于水平适应布局", |
text: "以horizontal代替horizontal_adapt实现的用于水平适应布局", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "以horizontal代替horizontal_adapt实现的水平自适应列", |
text: "以horizontal代替horizontal_adapt实现的水平自适应列", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
}, { |
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.layout", |
type: "bi.layout", |
||||||
height: 1, |
height: 1, |
||||||
cls: "bi-border-bottom bi-high-light-border" |
cls: "bi-border-bottom bi-high-light-border", |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.center_adapt", |
type: "bi.center_adapt", |
||||||
height: 150, |
height: 150, |
||||||
verticalAlign: BI.VerticalAlign.Middle, |
verticalAlign: BI.VerticalAlign.Middle, |
||||||
horizontalAlign: BI.HorizontalAlign.Center, |
horizontalAlign: BI.HorizontalAlign.Center, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "以horizontal代替center_adapt实现的水平垂直居中", |
text: "以horizontal代替center_adapt实现的水平垂直居中", |
||||||
width: 300, |
width: 300, |
||||||
height: 100, |
height: 100, |
||||||
cls: "layout-bg1" |
cls: "layout-bg1", |
||||||
}] |
} |
||||||
}, { |
], |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.layout", |
type: "bi.layout", |
||||||
height: 1, |
height: 1, |
||||||
cls: "bi-border-bottom bi-high-light-border" |
cls: "bi-border-bottom bi-high-light-border", |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.horizontal", Demo.Horizontal); |
|
||||||
|
|||||||
@ -1,57 +1,64 @@ |
|||||||
/** |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.HorizontalAdapt = BI.inherit(BI.Widget, { |
export class HorizontalAdapt extends Widget { |
||||||
props: { |
static xtype = "demo.horizontal_adapt"; |
||||||
baseCls: "demo-horizontal-adapt" |
|
||||||
}, |
|
||||||
|
|
||||||
_createLayout: function () { |
props = { baseCls: "demo-horizontal-adapt" }; |
||||||
return BI.createWidget({ |
|
||||||
|
_createLayout() { |
||||||
|
return createWidget({ |
||||||
type: "bi.horizontal_adapt", |
type: "bi.horizontal_adapt", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "例子1:可用做水平居中", |
text: "例子1:可用做水平居中", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_createAdaptLayout: function () { |
_createAdaptLayout() { |
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.horizontal_adapt", |
type: "bi.horizontal_adapt", |
||||||
columnSize: [300, "fill"], |
columnSize: [300, "fill"], |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "例子2:用于水平适应布局", |
text: "例子2:用于水平适应布局", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "水平自适应列", |
text: "水平自适应列", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
columns: 1, |
columns: 1, |
||||||
rows: 2, |
rows: 2, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 0, |
row: 0, |
||||||
el: this._createLayout() |
el: this._createLayout(), |
||||||
}, { |
}, |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 1, |
row: 1, |
||||||
el: this._createAdaptLayout() |
el: this._createAdaptLayout(), |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.horizontal_adapt", Demo.HorizontalAdapt); |
|
||||||
|
|||||||
@ -1,41 +1,45 @@ |
|||||||
/** |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.HorizontalAuto = BI.inherit(BI.Widget, { |
export class HorizontalAuto extends Widget { |
||||||
props: { |
static xtype = "demo.horizontal_auto"; |
||||||
baseCls: "demo-horizontal-auto" |
|
||||||
}, |
props = { baseCls: "demo-horizontal-auto" }; |
||||||
|
|
||||||
_createLayout: function () { |
_createLayout() { |
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "水平居中", |
text: "水平居中", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "水平居中优先使用该布局", |
text: "水平居中优先使用该布局", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
columns: 1, |
columns: 1, |
||||||
rows: 2, |
rows: 2, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 0, |
row: 0, |
||||||
el: this._createLayout() |
el: this._createLayout(), |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.horizontal_auto", Demo.HorizontalAuto); |
|
||||||
|
|||||||
@ -1,21 +1,22 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
|
||||||
Demo.HorizontalFloat = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "demo-horizontal-float" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class HorizontalFloat extends Widget { |
||||||
|
static xtype = "demo.horizontal_float"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-horizontal-float" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.horizontal_float", |
type: "bi.horizontal_float", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "浮动式水平居中布局方案，用于宽度未知的情况", |
text: "浮动式水平居中布局方案，用于宽度未知的情况", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.horizontal_float", Demo.HorizontalFloat); |
|
||||||
|
|||||||
@ -1,44 +1,50 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, { |
export class LeftRightVerticalAdaptLayout extends Widget { |
||||||
props: { |
static xtype = "demo.left_right_vertical_adapt"; |
||||||
baseCls: "demo-left-right-vertical-adapt" |
|
||||||
}, |
props = { baseCls: "demo-left-right-vertical-adapt" }; |
||||||
render: function () { |
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.left_right_vertical_adapt", |
type: "bi.left_right_vertical_adapt", |
||||||
lhgap: 10, |
lhgap: 10, |
||||||
rhgap: 30, |
rhgap: 30, |
||||||
items: { |
items: { |
||||||
left: [{ |
left: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "左边的垂直居中", |
text: "左边的垂直居中", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
width: 100, |
width: 100, |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "左边的垂直居中", |
text: "左边的垂直居中", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
width: 100, |
width: 100, |
||||||
height: 30 |
height: 30, |
||||||
}], |
} |
||||||
right: [{ |
], |
||||||
|
right: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "右边的垂直居中", |
text: "右边的垂直居中", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
width: 100, |
width: 100, |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "右边的垂直居中", |
text: "右边的垂直居中", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
width: 100, |
width: 100, |
||||||
height: 30 |
height: 30, |
||||||
}] |
|
||||||
} |
} |
||||||
|
], |
||||||
|
}, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.left_right_vertical_adapt", Demo.LeftRightVerticalAdaptLayout); |
|
||||||
|
|||||||
@ -1,59 +1,73 @@ |
|||||||
/** |
import { shortcut, Widget, createItems } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.TdLayout = BI.inherit(BI.Widget, { |
export class TdLayout extends Widget { |
||||||
props: { |
static xtype = "demo.td"; |
||||||
baseCls: "demo-td" |
|
||||||
}, |
props = { baseCls: "demo-td" }; |
||||||
render: function () { |
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.td", |
type: "bi.td", |
||||||
columnSize: [100, 100, ""], |
columnSize: [100, 100, ""], |
||||||
items: BI.createItems([ |
items: createItems( |
||||||
[{ |
[ |
||||||
|
[ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
cls: "layout-bg1" |
cls: "layout-bg1", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
cls: "layout-bg2" |
cls: "layout-bg2", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
cls: "layout-bg3" |
cls: "layout-bg3", |
||||||
|
}, |
||||||
} |
} |
||||||
}], [{ |
], |
||||||
|
[ |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
cls: "layout-bg5" |
cls: "layout-bg5", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
cls: "layout-bg6" |
cls: "layout-bg6", |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
cls: "layout-bg7" |
cls: "layout-bg7", |
||||||
|
}, |
||||||
|
} |
||||||
|
] |
||||||
|
], |
||||||
|
{ |
||||||
|
whiteSpace: "normal", |
||||||
} |
} |
||||||
}] |
), |
||||||
], { |
} |
||||||
whiteSpace: "normal" |
], |
||||||
}) |
|
||||||
}] |
|
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.td", Demo.TdLayout); |
|
||||||
|
|||||||
@ -1,26 +1,29 @@ |
|||||||
/** |
import { shortcut, Widget } from "@/core"; |
||||||
* Created by User on 2017/3/21. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.VerticalLayout = BI.inherit(BI.Widget, { |
export class VerticalLayout extends Widget { |
||||||
props: { |
static xtype = "demo.vertical"; |
||||||
baseCls: "demo-vertical" |
|
||||||
}, |
props = { baseCls: "demo-vertical" }; |
||||||
render: function () { |
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg3", |
cls: "layout-bg3", |
||||||
text: "垂直布局", |
text: "垂直布局", |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg4", |
cls: "layout-bg4", |
||||||
text: "垂直布局", |
text: "垂直布局", |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.vertical", Demo.VerticalLayout); |
|
||||||
|
|||||||
@ -1,42 +1,46 @@ |
|||||||
/** |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
@shortcut() |
||||||
Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, { |
export class VerticalAdaptLayout extends Widget { |
||||||
props: { |
static xtype = "demo.vertical_adapt"; |
||||||
baseCls: "demo-vertical-adapt" |
|
||||||
}, |
props = { baseCls: "demo-vertical-adapt" }; |
||||||
|
|
||||||
_createLayout: function () { |
_createLayout() { |
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.vertical_adapt", |
type: "bi.vertical_adapt", |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "垂直居中", |
text: "垂直居中", |
||||||
cls: "layout-bg1", |
cls: "layout-bg1", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "垂直居中", |
text: "垂直居中", |
||||||
cls: "layout-bg2", |
cls: "layout-bg2", |
||||||
width: 300, |
width: 300, |
||||||
height: 30 |
height: 30, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
columns: 2, |
columns: 2, |
||||||
rows: 1, |
rows: 1, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
column: 0, |
column: 0, |
||||||
row: 0, |
row: 0, |
||||||
el: this._createLayout() |
el: this._createLayout(), |
||||||
}] |
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout); |
|
||||||
|
|||||||
@ -1,68 +1,78 @@ |
|||||||
/** |
import { shortcut, Widget, UUID } from "@/core"; |
||||||
* Created by Windy on 2017/12/13. |
import { Layers } from "@/base"; |
||||||
*/ |
|
||||||
Demo.Func = BI.inherit(BI.Widget, { |
@shortcut() |
||||||
props: { |
export class Func extends Widget { |
||||||
baseCls: "demo-func" |
static xtype = "demo.layer"; |
||||||
}, |
|
||||||
render: function () { |
props = { baseCls: "demo-func" }; |
||||||
var self = this, id1 = BI.UUID(), id2 = BI.UUID(); |
|
||||||
|
render() { |
||||||
|
const self = this, |
||||||
|
id1 = UUID(), |
||||||
|
id2 = UUID(); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "create形式创建layer, 遮住当前面板, 返回创建的面板对象", |
text: "create形式创建layer, 遮住当前面板, 返回创建的面板对象", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Layers.create(id1, self, { |
Layers.create(id1, self, { |
||||||
// 偏移量
|
// 偏移量
|
||||||
offset: { |
offset: { |
||||||
left: 10, |
left: 10, |
||||||
right: 10, |
right: 10, |
||||||
top: 10, |
top: 10, |
||||||
bottom: 10 |
bottom: 10, |
||||||
}, |
}, |
||||||
type: "bi.center_adapt", |
type: "bi.center_adapt", |
||||||
cls: "bi-card", |
cls: "bi-card", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "点击关闭", |
text: "点击关闭", |
||||||
handler: function () { |
handler() { |
||||||
BI.Layers.hide(id1); |
Layers.hide(id1); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
BI.Layers.show(id1); |
Layers.show(id1); |
||||||
} |
}, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "make形式创建layer,可以指定放到哪个面板内,这里指定当前面板(默认放在body下撑满), 返回创建的面板对象", |
text: "make形式创建layer,可以指定放到哪个面板内,这里指定当前面板(默认放在body下撑满), 返回创建的面板对象", |
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
handler() { |
||||||
BI.Layers.make(id2, self, { |
Layers.make(id2, self, { |
||||||
// 偏移量
|
// 偏移量
|
||||||
offset: { |
offset: { |
||||||
left: 10, |
left: 10, |
||||||
right: 10, |
right: 10, |
||||||
top: 10, |
top: 10, |
||||||
bottom: 10 |
bottom: 10, |
||||||
}, |
}, |
||||||
type: "bi.center_adapt", |
type: "bi.center_adapt", |
||||||
cls: "bi-card", |
cls: "bi-card", |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "点击关闭", |
text: "点击关闭", |
||||||
handler: function () { |
handler() { |
||||||
BI.Layers.remove(id2); |
Layers.remove(id2); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
BI.Layers.show(id2); |
Layers.show(id2); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("demo.layer", Demo.Func); |
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue