forked from fanruan/fineui
Vivy.Pan
1 year ago
145 changed files with 8938 additions and 7638 deletions
@ -1,408 +1,449 @@ |
|||||||
(function () { |
import { shortcut, Widget, parseInt, Msg, map } from "@/core"; |
||||||
var JokerIcon = BI.inherit(BI.Widget, { |
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
|
|
||||||
return { |
@shortcut() |
||||||
type: "bi.label", |
export class Button extends Widget { |
||||||
cls: "anim-rotate", |
static xtype = "demo.button"; |
||||||
ref: function(ref) { |
|
||||||
self.text = ref; |
props = { baseCls: "demo-button" }; |
||||||
}, |
|
||||||
}; |
|
||||||
}, |
|
||||||
loading: function () { |
|
||||||
this.text.setText("🤡"); |
|
||||||
}, |
|
||||||
loaded: function () { |
|
||||||
this.text.setText(""); |
|
||||||
}, |
|
||||||
}); |
|
||||||
BI.shortcut("demo.joker.icon", JokerIcon); |
|
||||||
}()); |
|
||||||
|
|
||||||
Demo.Button = BI.inherit(BI.Widget, { |
render() { |
||||||
props: { |
const items = [ |
||||||
baseCls: "demo-button", |
{ |
||||||
}, |
type: "bi.button", |
||||||
render: function () { |
text: "一般按钮1111111111111", |
||||||
var items = [{ |
level: "common", |
||||||
type: "bi.button", |
whiteSpace: "nowrap", |
||||||
text: "一般按钮1111111111111", |
width: 100, |
||||||
level: "common", |
height: 30, |
||||||
whiteSpace: "nowrap", |
handler() { |
||||||
width: 100, |
console.log("触发点击事件"); |
||||||
height: 30, |
this.loading(); |
||||||
handler() { |
setTimeout(() => { |
||||||
console.log("触发点击事件"); |
this.loaded(); |
||||||
this.loading(); |
}, 5 * 1000); |
||||||
setTimeout(() => { |
}, |
||||||
this.loaded(); |
}, |
||||||
}, 5 * 1000); |
{ |
||||||
}, |
type: "bi.button", |
||||||
}, { |
text: "表示成功状态按钮", |
||||||
type: "bi.button", |
level: "success", |
||||||
text: "表示成功状态按钮", |
height: 30, |
||||||
level: "success", |
}, |
||||||
height: 30, |
{ |
||||||
}, { |
type: "bi.button", |
||||||
type: "bi.button", |
text: "表示警告状态的按钮", |
||||||
text: "表示警告状态的按钮", |
level: "warning", |
||||||
level: "warning", |
height: 30, |
||||||
height: 30, |
}, |
||||||
}, { |
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "表示错误状态的按钮", |
text: "表示错误状态的按钮", |
||||||
level: "error", |
level: "error", |
||||||
height: 30, |
height: 30, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
text: "表示忽略状态的按钮", |
type: "bi.button", |
||||||
level: "ignore", |
text: "表示忽略状态的按钮", |
||||||
height: 30, |
level: "ignore", |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
text: "普通灰化按钮", |
{ |
||||||
disabled: true, |
type: "bi.button", |
||||||
level: "success", |
text: "普通灰化按钮", |
||||||
height: 30, |
disabled: true, |
||||||
}, { |
level: "success", |
||||||
type: "bi.button", |
height: 30, |
||||||
text: "忽略状态灰化按钮", |
}, |
||||||
disabled: true, |
{ |
||||||
level: "ignore", |
type: "bi.button", |
||||||
height: 30, |
text: "忽略状态灰化按钮", |
||||||
}, { |
disabled: true, |
||||||
type: "bi.button", |
level: "ignore", |
||||||
text: "带图标的按钮", |
height: 30, |
||||||
// level: 'ignore',
|
}, |
||||||
iconCls: "close-font", |
{ |
||||||
height: 30, |
type: "bi.button", |
||||||
}, { |
text: "带图标的按钮", |
||||||
type: "bi.button", |
// level: 'ignore',
|
||||||
text: "一般按钮", |
iconCls: "close-font", |
||||||
block: true, |
height: 30, |
||||||
level: "common", |
}, |
||||||
height: 30, |
{ |
||||||
}, { |
type: "bi.button", |
||||||
type: "bi.button", |
text: "一般按钮", |
||||||
text: "表示成功状态按钮", |
block: true, |
||||||
block: true, |
level: "common", |
||||||
level: "success", |
height: 30, |
||||||
height: 30, |
}, |
||||||
}, { |
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "表示警告状态的按钮", |
text: "表示成功状态按钮", |
||||||
block: true, |
block: true, |
||||||
level: "warning", |
level: "success", |
||||||
height: 30, |
height: 30, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
text: "表示忽略状态的按钮", |
type: "bi.button", |
||||||
block: true, |
text: "表示警告状态的按钮", |
||||||
level: "ignore", |
block: true, |
||||||
height: 30, |
level: "warning", |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
text: "普通灰化按钮", |
{ |
||||||
block: true, |
type: "bi.button", |
||||||
disabled: true, |
text: "表示忽略状态的按钮", |
||||||
level: "success", |
block: true, |
||||||
height: 30, |
level: "ignore", |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
text: "忽略状态灰化按钮", |
{ |
||||||
block: true, |
type: "bi.button", |
||||||
disabled: true, |
text: "普通灰化按钮", |
||||||
level: "ignore", |
block: true, |
||||||
height: 30, |
disabled: true, |
||||||
}, { |
level: "success", |
||||||
type: "bi.button", |
height: 30, |
||||||
text: "带图标的按钮", |
}, |
||||||
block: true, |
{ |
||||||
// level: 'ignore',
|
type: "bi.button", |
||||||
iconCls: "close-font", |
text: "忽略状态灰化按钮", |
||||||
height: 30, |
block: true, |
||||||
}, { |
disabled: true, |
||||||
type: "bi.button", |
level: "ignore", |
||||||
text: "一般按钮", |
height: 30, |
||||||
clear: true, |
}, |
||||||
level: "common", |
{ |
||||||
height: 30, |
type: "bi.button", |
||||||
}, { |
text: "带图标的按钮", |
||||||
type: "bi.button", |
block: true, |
||||||
text: "表示成功状态按钮", |
// level: 'ignore',
|
||||||
clear: true, |
iconCls: "close-font", |
||||||
level: "success", |
height: 30, |
||||||
height: 30, |
}, |
||||||
}, { |
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "表示警告状态的按钮", |
text: "一般按钮", |
||||||
clear: true, |
clear: true, |
||||||
level: "warning", |
level: "common", |
||||||
height: 30, |
height: 30, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
text: "表示忽略状态的按钮", |
type: "bi.button", |
||||||
clear: true, |
text: "表示成功状态按钮", |
||||||
level: "ignore", |
clear: true, |
||||||
height: 30, |
level: "success", |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
text: "普通灰化按钮", |
{ |
||||||
clear: true, |
type: "bi.button", |
||||||
disabled: true, |
text: "表示警告状态的按钮", |
||||||
level: "success", |
clear: true, |
||||||
height: 30, |
level: "warning", |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
text: "忽略状态灰化按钮", |
{ |
||||||
clear: true, |
type: "bi.button", |
||||||
disabled: true, |
text: "表示忽略状态的按钮", |
||||||
level: "ignore", |
clear: true, |
||||||
height: 30, |
level: "ignore", |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
text: "带图标的按钮", |
{ |
||||||
clear: true, |
type: "bi.button", |
||||||
// level: 'ignore',
|
text: "普通灰化按钮", |
||||||
iconCls: "close-font", |
clear: true, |
||||||
height: 30, |
disabled: true, |
||||||
}, { |
level: "success", |
||||||
type: "bi.text_button", |
height: 30, |
||||||
text: "文字按钮", |
}, |
||||||
height: 30, |
{ |
||||||
}, { |
type: "bi.button", |
||||||
type: "bi.button", |
text: "忽略状态灰化按钮", |
||||||
text: "幽灵按钮（common）", |
clear: true, |
||||||
ghost: true, |
disabled: true, |
||||||
height: 30, |
level: "ignore", |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
iconCls: "plus-font", |
{ |
||||||
text: "幽灵按钮（common）", |
type: "bi.button", |
||||||
ghost: true, |
text: "带图标的按钮", |
||||||
height: 30, |
clear: true, |
||||||
}, { |
// level: 'ignore',
|
||||||
type: "bi.button", |
iconCls: "close-font", |
||||||
iconCls: "plus-font", |
height: 30, |
||||||
text: "幽灵按钮（common）", |
}, |
||||||
ghost: true, |
{ |
||||||
level: "warning", |
type: "bi.text_button", |
||||||
height: 30, |
text: "文字按钮", |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
iconCls: "plus-font", |
{ |
||||||
text: "幽灵按钮（common）", |
type: "bi.button", |
||||||
ghost: true, |
text: "幽灵按钮（common）", |
||||||
level: "error", |
ghost: true, |
||||||
height: 30, |
height: 30, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
iconCls: "plus-font", |
type: "bi.button", |
||||||
text: "幽灵按钮（common）", |
iconCls: "plus-font", |
||||||
ghost: true, |
text: "幽灵按钮（common）", |
||||||
level: "success", |
ghost: true, |
||||||
height: 30, |
height: 30, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
text: "幽灵按钮（common）灰化", |
type: "bi.button", |
||||||
disabled: true, |
iconCls: "plus-font", |
||||||
ghost: true, |
text: "幽灵按钮（common）", |
||||||
height: 30, |
ghost: true, |
||||||
}, { |
level: "warning", |
||||||
type: "bi.button", |
height: 30, |
||||||
text: "弹出bubble", |
}, |
||||||
bubble: function () { |
{ |
||||||
return BI.parseInt(Math.random() * 100) % 10 + "提示"; |
type: "bi.button", |
||||||
}, |
iconCls: "plus-font", |
||||||
handler: function () { |
text: "幽灵按钮（common）", |
||||||
BI.Msg.toast("1111"); |
ghost: true, |
||||||
}, |
level: "error", |
||||||
height: 30, |
height: 30, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
text: "自动撑开", |
type: "bi.button", |
||||||
iconCls: "close-font", |
iconCls: "plus-font", |
||||||
// textHeight: 32,
|
text: "幽灵按钮（common）", |
||||||
// height: 32,
|
ghost: true, |
||||||
iconGap: 64, |
level: "success", |
||||||
vgap: 16, |
height: 30, |
||||||
hgap: 100, |
}, |
||||||
iconPosition: "bottom", |
{ |
||||||
}, { |
type: "bi.button", |
||||||
type: "bi.button", |
text: "幽灵按钮（common）灰化", |
||||||
text: "图标在下面的按钮", |
disabled: true, |
||||||
iconCls: "close-font", |
ghost: true, |
||||||
iconPosition: "bottom", |
height: 30, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
text: "图标在左边的按钮", |
type: "bi.button", |
||||||
iconCls: "close-font", |
text: "弹出bubble", |
||||||
iconPosition: "left", |
bubble() { |
||||||
}, { |
return `${parseInt(Math.random() * 100) % 10}提示`; |
||||||
type: "bi.button", |
}, |
||||||
text: "图标在右边的按钮", |
handler() { |
||||||
iconCls: "close-font", |
Msg.toast("1111"); |
||||||
iconPosition: "right", |
}, |
||||||
}, { |
height: 30, |
||||||
type: "bi.button", |
}, |
||||||
text: "浅色的一般按钮", |
{ |
||||||
iconCls: "plus-font", |
type: "bi.button", |
||||||
light: true, |
text: "自动撑开", |
||||||
}, { |
iconCls: "close-font", |
||||||
type: "bi.button", |
// textHeight: 32,
|
||||||
text: "浅色的成功按钮", |
// height: 32,
|
||||||
level: "success", |
iconGap: 64, |
||||||
iconCls: "plus-font", |
vgap: 16, |
||||||
light: true, |
hgap: 100, |
||||||
}, { |
iconPosition: "bottom", |
||||||
type: "bi.button", |
}, |
||||||
text: "浅色的警告按钮", |
{ |
||||||
level: "warning", |
type: "bi.button", |
||||||
iconCls: "plus-font", |
text: "图标在下面的按钮", |
||||||
light: true, |
iconCls: "close-font", |
||||||
}, { |
iconPosition: "bottom", |
||||||
type: "bi.button", |
}, |
||||||
iconCls: "plus-font", |
{ |
||||||
text: "浅色的失败按钮", |
type: "bi.button", |
||||||
level: "error", |
text: "图标在左边的按钮", |
||||||
cls: "hover-mask", |
iconCls: "close-font", |
||||||
light: true, |
iconPosition: "left", |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
iconCls: "plus-font", |
type: "bi.button", |
||||||
text: "朴素的按钮", |
text: "图标在右边的按钮", |
||||||
level: "common", |
iconCls: "close-font", |
||||||
plain: true, |
iconPosition: "right", |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
iconCls: "plus-font", |
type: "bi.button", |
||||||
text: "朴素的按钮", |
text: "浅色的一般按钮", |
||||||
level: "success", |
iconCls: "plus-font", |
||||||
plain: true, |
light: true, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
iconCls: "plus-font", |
type: "bi.button", |
||||||
text: "朴素的按钮", |
text: "浅色的成功按钮", |
||||||
level: "error", |
level: "success", |
||||||
plain: true, |
iconCls: "plus-font", |
||||||
}, { |
light: true, |
||||||
type: "bi.button", |
}, |
||||||
iconCls: "plus-font", |
{ |
||||||
text: "朴素的按钮", |
type: "bi.button", |
||||||
level: "warning", |
text: "浅色的警告按钮", |
||||||
plain: true, |
level: "warning", |
||||||
}, { |
iconCls: "plus-font", |
||||||
type: "bi.button", |
light: true, |
||||||
iconCls: "plus-font", |
}, |
||||||
text: "朴素的按钮", |
{ |
||||||
level: "ignore", |
type: "bi.button", |
||||||
plain: true, |
iconCls: "plus-font", |
||||||
}, { |
text: "浅色的失败按钮", |
||||||
type: "bi.button", |
level: "error", |
||||||
iconCls: "plus-font", |
cls: "hover-mask", |
||||||
plain: true, |
light: true, |
||||||
level: "error", |
}, |
||||||
}, { |
{ |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
iconCls: "plus-font", |
iconCls: "plus-font", |
||||||
text: "朴素的按钮", |
text: "朴素的按钮", |
||||||
plain: true, |
level: "common", |
||||||
disabled: true, |
plain: true, |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
iconCls: "plus-font", |
type: "bi.button", |
||||||
text: "点我，更改图标", |
iconCls: "plus-font", |
||||||
handler() { |
text: "朴素的按钮", |
||||||
this.i = this.i === undefined ? 0 : ++this.i; |
level: "success", |
||||||
const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"]; |
plain: true, |
||||||
if (this.i >= arr.length) { |
}, |
||||||
this.i = 0; |
{ |
||||||
} |
type: "bi.button", |
||||||
this.setIcon(arr[this.i]); |
iconCls: "plus-font", |
||||||
}, |
text: "朴素的按钮", |
||||||
height: 24, |
level: "error", |
||||||
}, { |
plain: true, |
||||||
type: "bi.button", |
}, |
||||||
text: "带加载的按钮", |
{ |
||||||
handler() { |
type: "bi.button", |
||||||
console.log("触发点击事件"); |
iconCls: "plus-font", |
||||||
this.loading(); |
text: "朴素的按钮", |
||||||
setTimeout(() => { |
level: "warning", |
||||||
this.loaded(); |
plain: true, |
||||||
}, 5 * 1000); |
}, |
||||||
}, |
{ |
||||||
}, { |
type: "bi.button", |
||||||
type: "bi.button", |
iconCls: "plus-font", |
||||||
text: "带加载的按钮", |
text: "朴素的按钮", |
||||||
iconCls: "circle-close-font", |
level: "ignore", |
||||||
handler() { |
plain: true, |
||||||
console.log("触发点击事件"); |
}, |
||||||
this.loading(); |
{ |
||||||
setTimeout(() => { |
type: "bi.button", |
||||||
this.loaded(); |
iconCls: "plus-font", |
||||||
}, 5 * 1000); |
plain: true, |
||||||
}, |
level: "error", |
||||||
}, { |
}, |
||||||
type: "bi.button", |
{ |
||||||
clear: true, |
type: "bi.button", |
||||||
text: "带加载的按钮", |
iconCls: "plus-font", |
||||||
iconCls: "circle-close-font", |
text: "朴素的按钮", |
||||||
handler() { |
plain: true, |
||||||
console.log("触发点击事件"); |
disabled: true, |
||||||
this.loading(); |
}, |
||||||
setTimeout(() => { |
{ |
||||||
this.loaded(); |
type: "bi.button", |
||||||
}, 5 * 1000); |
iconCls: "plus-font", |
||||||
}, |
text: "点我，更改图标", |
||||||
}, { |
handler() { |
||||||
type: "bi.button", |
this.i = this.i === undefined ? 0 : ++this.i; |
||||||
text: "加载中的按钮", |
const arr = [ |
||||||
loading: true, |
"text-background-font", |
||||||
handler() { |
"check-mark-ha-font", |
||||||
console.log("我是无法被触发的!"); |
"close-font", |
||||||
}, |
"search-font", |
||||||
}, { |
"date-change-h-font" |
||||||
type: "bi.button", |
]; |
||||||
text: "自定义图标按钮（点我修改）", |
if (this.i >= arr.length) { |
||||||
icon: { |
this.i = 0; |
||||||
type: "demo.joker.icon", |
} |
||||||
}, |
this.setIcon(arr[this.i]); |
||||||
handler() { |
}, |
||||||
console.log("触发点击事件"); |
height: 24, |
||||||
this.loading(); |
}, |
||||||
setTimeout(() => { |
{ |
||||||
this.loaded(); |
type: "bi.button", |
||||||
}, 5 * 1000); |
text: "带加载的按钮", |
||||||
}, |
handler() { |
||||||
}, { |
console.log("触发点击事件"); |
||||||
type: "bi.button", |
this.loading(); |
||||||
text: "文字偏左的按钮", |
setTimeout(() => { |
||||||
textAlign: "left", |
this.loaded(); |
||||||
width: 200, |
}, 5 * 1000); |
||||||
}, { |
}, |
||||||
type: "bi.button", |
}, |
||||||
text: "小于最小宽度的按钮", |
{ |
||||||
width: 50, |
type: "bi.button", |
||||||
}, { |
text: "带加载的按钮", |
||||||
type: "bi.button", |
iconCls: "circle-close-font", |
||||||
text: "一个文字超级超级长的 button, 他比按钮宽度还长。", |
handler() { |
||||||
textWidth: 500, |
console.log("触发点击事件"); |
||||||
width: 100, |
this.loading(); |
||||||
}]; |
setTimeout(() => { |
||||||
|
this.loaded(); |
||||||
|
}, 5 * 1000); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
clear: true, |
||||||
|
text: "带加载的按钮", |
||||||
|
iconCls: "circle-close-font", |
||||||
|
handler() { |
||||||
|
console.log("触发点击事件"); |
||||||
|
this.loading(); |
||||||
|
setTimeout(() => { |
||||||
|
this.loaded(); |
||||||
|
}, 5 * 1000); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "加载中的按钮", |
||||||
|
loading: true, |
||||||
|
handler() { |
||||||
|
console.log("我是无法被触发的!"); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "自定义图标按钮（点我修改）", |
||||||
|
icon: { |
||||||
|
type: "demo.joker.icon", |
||||||
|
}, |
||||||
|
handler() { |
||||||
|
console.log("触发点击事件"); |
||||||
|
this.loading(); |
||||||
|
setTimeout(() => { |
||||||
|
this.loaded(); |
||||||
|
}, 5 * 1000); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "文字偏左的按钮", |
||||||
|
textAlign: "left", |
||||||
|
width: 200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "小于最小宽度的按钮", |
||||||
|
width: 50, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "一个文字超级超级长的 button, 他比按钮宽度还长。", |
||||||
|
textWidth: 500, |
||||||
|
width: 100, |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
scrolly: true, |
scrolly: true, |
||||||
vgap: 100, |
vgap: 100, |
||||||
hgap: 20, |
hgap: 20, |
||||||
items: BI.map(items, function (index, value) { |
items: map(items, (index, value) => { |
||||||
return { |
return { |
||||||
el: value, |
el: value, |
||||||
}; |
}; |
||||||
}), |
}), |
||||||
}; |
}; |
||||||
}, |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.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.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", |
{ |
||||||
text: "<h1>在bi.html标签中使用html原生标签</h1>" |
type: "bi.html", |
||||||
}, { |
text: "<h1>在bi.html标签中使用html原生标签</h1>", |
||||||
type: "bi.html", |
}, |
||||||
text: "<ul>ul列表<li>list item1</li><li>list item2</li></ul>" |
{ |
||||||
}], |
type: "bi.html", |
||||||
|
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", |
{ |
||||||
text: "这是一个icon标签,在加了border之后仍然是居中显示的" |
type: "bi.label", |
||||||
}, { |
text: "这是一个icon标签,在加了border之后仍然是居中显示的", |
||||||
type: "bi.icon_label", |
}, |
||||||
cls: "date-font bi-border", |
{ |
||||||
height: 40, |
type: "bi.icon_label", |
||||||
width: 40 |
cls: "date-font bi-border", |
||||||
}] |
height: 40, |
||||||
|
width: 40, |
||||||
|
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.icon_label", Demo.IconLabel); |
|
||||||
|
|||||||
@ -1,139 +1,167 @@ |
|||||||
Demo.Label = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-label" |
@shortcut() |
||||||
}, |
export class Label extends Widget { |
||||||
render: function () { |
static xtype = "demo.label"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-label" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
cls: "layout-bg6", |
type: "bi.label", |
||||||
text: "这是一个label控件，默认居中", |
cls: "layout-bg6", |
||||||
disabled: true, |
text: "这是一个label控件，默认居中", |
||||||
textAlign: "center" |
disabled: true, |
||||||
}, { |
textAlign: "center", |
||||||
type: "bi.label", |
}, |
||||||
cls: "layout-bg1", |
{ |
||||||
text: "这是一个label控件, 高度为30，默认居中", |
type: "bi.label", |
||||||
textAlign: "center", |
cls: "layout-bg1", |
||||||
height: 30 |
text: "这是一个label控件, 高度为30，默认居中", |
||||||
}, { |
textAlign: "center", |
||||||
type: "bi.label", |
height: 30, |
||||||
cls: "layout-bg3", |
}, |
||||||
text: "这是一个label控件，使用水平居左", |
{ |
||||||
textAlign: "left", |
|
||||||
height: 30 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg2", |
|
||||||
text: "这是一个label控件，whiteSpace是normal，不设置高度，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
|
||||||
whiteSpace: "normal" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg5", |
|
||||||
text: "这是一个label控件，whiteSpace是默认的nowrap，不设置高度，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg7", |
|
||||||
text: "这是一个label控件，whiteSpace是默认的nowrap，高度为30，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
|
||||||
height: 30 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg3", |
|
||||||
text: "这是一个label控件，whiteSpace设置为normal，高度为60，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
|
||||||
whiteSpace: "normal", |
|
||||||
height: 60 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg5", |
|
||||||
text: "这是一个label控件，whiteSpace设置为normal，textHeight控制text的lineHeight，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
|
||||||
whiteSpace: "normal", |
|
||||||
textHeight: 30, |
|
||||||
height: 60 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg1", |
|
||||||
text: "这是一个label控件，whiteSpace设置为nowrap，textWidth控制text的width", |
|
||||||
textWidth: 200, |
|
||||||
height: 60 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg8", |
|
||||||
text: "这是一个label控件，whiteSpace设置为normal，textWidth控制text的width，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
|
||||||
whiteSpace: "normal", |
|
||||||
textWidth: 200, |
|
||||||
height: 60 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg7", |
|
||||||
text: "whiteSpace为默认的nowrap，高度设置为60，宽度设置为300", |
|
||||||
height: 60, |
|
||||||
width: 300 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg6", |
|
||||||
text: "设置了宽度300，高度60，whiteSpace设置为normal", |
|
||||||
whiteSpace: "normal", |
|
||||||
width: 300, |
|
||||||
height: 60 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg8", |
|
||||||
text: "textWidth设置为200，textHeight设置为30，width设置300，凑点字数看效果", |
|
||||||
width: 300, |
|
||||||
textWidth: 200, |
|
||||||
textHeight: 30, |
|
||||||
height: 60, |
|
||||||
whiteSpace: "normal" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg1", |
|
||||||
text: "textWidth设置为200，width设置300，看下水平居左的换行效果", |
|
||||||
textAlign: "left", |
|
||||||
width: 300, |
|
||||||
textWidth: 200, |
|
||||||
textHeight: 30, |
|
||||||
height: 60, |
|
||||||
whiteSpace: "normal" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg2", |
|
||||||
text: "使用默认的nowrap，再去设置textHeight，只会有一行的效果", |
|
||||||
textAlign: "left", |
|
||||||
width: 300, |
|
||||||
textWidth: 200, |
|
||||||
textHeight: 30, |
|
||||||
height: 60 |
|
||||||
}, { |
|
||||||
type: "bi.left", |
|
||||||
items: [{ |
|
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg3", |
cls: "layout-bg3", |
||||||
text: "在float布局中自适应的,不设高度和宽度，文字多长这个就有多长" |
text: "这是一个label控件，使用水平居左", |
||||||
}], |
textAlign: "left", |
||||||
height: 30 |
height: 30, |
||||||
}, { |
}, |
||||||
type: "bi.left", |
{ |
||||||
items: [{ |
|
||||||
type: "bi.label", |
type: "bi.label", |
||||||
cls: "layout-bg4", |
cls: "layout-bg2", |
||||||
text: "在float布局中自适应的，设置了宽度200，后面还有", |
text: "这是一个label控件，whiteSpace是normal，不设置高度，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||||
width: 200 |
whiteSpace: "normal", |
||||||
}], |
}, |
||||||
height: 30 |
{ |
||||||
}, { |
type: "bi.label", |
||||||
type: "bi.left", |
cls: "layout-bg5", |
||||||
items: [{ |
text: "这是一个label控件，whiteSpace是默认的nowrap，不设置高度，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg7", |
||||||
|
text: "这是一个label控件，whiteSpace是默认的nowrap，高度为30，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||||
|
height: 30, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg3", |
||||||
|
text: "这是一个label控件，whiteSpace设置为normal，高度为60，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||||
|
whiteSpace: "normal", |
||||||
|
height: 60, |
||||||
|
}, |
||||||
|
{ |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "在float布局中自适应的，设置了高度，文字多长这个就有多长", |
|
||||||
cls: "layout-bg5", |
cls: "layout-bg5", |
||||||
height: 30 |
text: "这是一个label控件，whiteSpace设置为normal，textHeight控制text的lineHeight，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||||
}], |
whiteSpace: "normal", |
||||||
height: 30 |
textHeight: 30, |
||||||
}], |
height: 60, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "这是一个label控件，whiteSpace设置为nowrap，textWidth控制text的width", |
||||||
|
textWidth: 200, |
||||||
|
height: 60, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg8", |
||||||
|
text: "这是一个label控件，whiteSpace设置为normal，textWidth控制text的width，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||||
|
whiteSpace: "normal", |
||||||
|
textWidth: 200, |
||||||
|
height: 60, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg7", |
||||||
|
text: "whiteSpace为默认的nowrap，高度设置为60，宽度设置为300", |
||||||
|
height: 60, |
||||||
|
width: 300, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg6", |
||||||
|
text: "设置了宽度300，高度60，whiteSpace设置为normal", |
||||||
|
whiteSpace: "normal", |
||||||
|
width: 300, |
||||||
|
height: 60, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg8", |
||||||
|
text: "textWidth设置为200，textHeight设置为30，width设置300，凑点字数看效果", |
||||||
|
width: 300, |
||||||
|
textWidth: 200, |
||||||
|
textHeight: 30, |
||||||
|
height: 60, |
||||||
|
whiteSpace: "normal", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "textWidth设置为200，width设置300，看下水平居左的换行效果", |
||||||
|
textAlign: "left", |
||||||
|
width: 300, |
||||||
|
textWidth: 200, |
||||||
|
textHeight: 30, |
||||||
|
height: 60, |
||||||
|
whiteSpace: "normal", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "使用默认的nowrap，再去设置textHeight，只会有一行的效果", |
||||||
|
textAlign: "left", |
||||||
|
width: 300, |
||||||
|
textWidth: 200, |
||||||
|
textHeight: 30, |
||||||
|
height: 60, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.left", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg3", |
||||||
|
text: "在float布局中自适应的,不设高度和宽度，文字多长这个就有多长", |
||||||
|
} |
||||||
|
], |
||||||
|
height: 30, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.left", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg4", |
||||||
|
text: "在float布局中自适应的，设置了宽度200，后面还有", |
||||||
|
width: 200, |
||||||
|
} |
||||||
|
], |
||||||
|
height: 30, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.left", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
text: "在float布局中自适应的，设置了高度，文字多长这个就有多长", |
||||||
|
cls: "layout-bg5", |
||||||
|
height: 30, |
||||||
|
} |
||||||
|
], |
||||||
|
height: 30, |
||||||
|
} |
||||||
|
], |
||||||
hgap: 300, |
hgap: 300, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.label", Demo.Label); |
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,120 +1,126 @@ |
|||||||
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.pager"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
height: 30, |
type: "bi.label", |
||||||
text: "默认的分页" |
|
||||||
}, { |
|
||||||
type: "bi.pager", |
|
||||||
height: 50, |
|
||||||
pages: 18, |
|
||||||
groups: 5, |
|
||||||
curr: 6, |
|
||||||
first: "首页", |
|
||||||
last: "尾页" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
height: 30, |
|
||||||
text: "显示上一页、下一页、首页、尾页" |
|
||||||
}, { |
|
||||||
type: "bi.pager", |
|
||||||
dynamicShow: false, |
|
||||||
height: 50, |
|
||||||
pages: 18, |
|
||||||
groups: 5, |
|
||||||
curr: 1, |
|
||||||
first: "首页>", |
|
||||||
last: "<尾页" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
height: 30, |
|
||||||
text: "显示上一页、下一页" |
|
||||||
}, { |
|
||||||
type: "bi.pager", |
|
||||||
dynamicShow: false, |
|
||||||
dynamicShowFirstLast: true, |
|
||||||
height: 50, |
|
||||||
pages: 18, |
|
||||||
groups: 5, |
|
||||||
curr: 1, |
|
||||||
first: "首页>", |
|
||||||
last: "<尾页" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
height: 30, |
|
||||||
text: "自定义上一页、下一页" |
|
||||||
}, { |
|
||||||
type: "bi.pager", |
|
||||||
dynamicShow: false, |
|
||||||
height: 50, |
|
||||||
pages: 18, |
|
||||||
groups: 5, |
|
||||||
curr: 6, |
|
||||||
prev: { |
|
||||||
type: "bi.button", |
|
||||||
cls: "", |
|
||||||
text: "上一页", |
|
||||||
value: "prev", |
|
||||||
once: false, |
|
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
text: "默认的分页", |
||||||
|
|
||||||
} |
|
||||||
}, |
}, |
||||||
next: { |
{ |
||||||
type: "bi.button", |
type: "bi.pager", |
||||||
cls: "", |
height: 50, |
||||||
text: "下一页", |
pages: 18, |
||||||
value: "next", |
groups: 5, |
||||||
once: false, |
curr: 6, |
||||||
handler: function () { |
first: "首页", |
||||||
|
last: "尾页", |
||||||
} |
}, |
||||||
} |
{ |
||||||
}, { |
type: "bi.label", |
||||||
type: "bi.label", |
|
||||||
height: 30, |
|
||||||
text: "不知道总页数的情况(测试条件 1<=page<=3)" |
|
||||||
}, { |
|
||||||
type: "bi.pager", |
|
||||||
dynamicShow: false, |
|
||||||
height: 50, |
|
||||||
pages: false, |
|
||||||
curr: 1, |
|
||||||
prev: { |
|
||||||
type: "bi.button", |
|
||||||
cls: "", |
|
||||||
text: "上一页", |
|
||||||
value: "prev", |
|
||||||
once: false, |
|
||||||
height: 30, |
height: 30, |
||||||
handler: function () { |
text: "显示上一页、下一页、首页、尾页", |
||||||
|
|
||||||
} |
|
||||||
}, |
}, |
||||||
next: { |
{ |
||||||
type: "bi.button", |
type: "bi.pager", |
||||||
cls: "", |
dynamicShow: false, |
||||||
text: "下一页", |
height: 50, |
||||||
value: "next", |
pages: 18, |
||||||
once: false, |
groups: 5, |
||||||
handler: function () { |
curr: 1, |
||||||
|
first: "首页>", |
||||||
} |
last: "<尾页", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "显示上一页、下一页", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.pager", |
||||||
|
dynamicShow: false, |
||||||
|
dynamicShowFirstLast: true, |
||||||
|
height: 50, |
||||||
|
pages: 18, |
||||||
|
groups: 5, |
||||||
|
curr: 1, |
||||||
|
first: "首页>", |
||||||
|
last: "<尾页", |
||||||
}, |
}, |
||||||
hasPrev: function (v) { |
{ |
||||||
return v > 1; |
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "自定义上一页、下一页", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.pager", |
||||||
|
dynamicShow: false, |
||||||
|
height: 50, |
||||||
|
pages: 18, |
||||||
|
groups: 5, |
||||||
|
curr: 6, |
||||||
|
prev: { |
||||||
|
type: "bi.button", |
||||||
|
cls: "", |
||||||
|
text: "上一页", |
||||||
|
value: "prev", |
||||||
|
once: false, |
||||||
|
height: 30, |
||||||
|
handler() {}, |
||||||
|
}, |
||||||
|
next: { |
||||||
|
type: "bi.button", |
||||||
|
cls: "", |
||||||
|
text: "下一页", |
||||||
|
value: "next", |
||||||
|
once: false, |
||||||
|
handler() {}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "不知道总页数的情况(测试条件 1<=page<=3)", |
||||||
}, |
}, |
||||||
hasNext: function (v) { |
{ |
||||||
return v < 3; |
type: "bi.pager", |
||||||
|
dynamicShow: false, |
||||||
|
height: 50, |
||||||
|
pages: false, |
||||||
|
curr: 1, |
||||||
|
prev: { |
||||||
|
type: "bi.button", |
||||||
|
cls: "", |
||||||
|
text: "上一页", |
||||||
|
value: "prev", |
||||||
|
once: false, |
||||||
|
height: 30, |
||||||
|
handler() {}, |
||||||
|
}, |
||||||
|
next: { |
||||||
|
type: "bi.button", |
||||||
|
cls: "", |
||||||
|
text: "下一页", |
||||||
|
value: "next", |
||||||
|
once: false, |
||||||
|
handler() {}, |
||||||
|
}, |
||||||
|
hasPrev(v) { |
||||||
|
return v > 1; |
||||||
|
}, |
||||||
|
hasNext(v) { |
||||||
|
return v < 3; |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.pager", Demo.Func); |
|
||||||
|
|||||||
@ -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: { |
{ |
||||||
type: "bi.adaptive", |
el: { |
||||||
cls: "layout-bg1", |
type: "bi.adaptive", |
||||||
items: [{ |
cls: "layout-bg1", |
||||||
type: "bi.multifile_editor", |
items: [ |
||||||
|
{ |
||||||
|
type: "bi.multifile_editor", |
||||||
|
width: 400, |
||||||
|
height: 300, |
||||||
|
} |
||||||
|
], |
||||||
width: 400, |
width: 400, |
||||||
height: 300 |
height: 300, |
||||||
}], |
}, |
||||||
width: 400, |
top: 50, |
||||||
height: 300 |
left: 50, |
||||||
}, |
} |
||||||
top: 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: [ |
||||||
type: "bi.button", |
editor, |
||||||
text: "getValue", |
{ |
||||||
handler: function () { |
type: "bi.button", |
||||||
BI.Msg.toast(JSON.stringify(editor.getValue())); |
text: "getValue", |
||||||
|
handler() { |
||||||
|
Msg.toast(JSON.stringify(editor.getValue())); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "setValue", |
||||||
|
handler() { |
||||||
|
editor.setValue("测试数据"); |
||||||
|
}, |
||||||
} |
} |
||||||
}, { |
], |
||||||
type: "bi.button", |
|
||||||
text: "setValue", |
|
||||||
handler: function () { |
|
||||||
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,59 +1,68 @@ |
|||||||
Demo.Title = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-title" |
@shortcut() |
||||||
}, |
export class Title extends Widget { |
||||||
render: function () { |
static xtype = "demo.title"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-title" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
cls: "layout-bg1", |
type: "bi.label", |
||||||
height: 50, |
cls: "layout-bg1", |
||||||
title: "title提示", |
height: 50, |
||||||
text: "移上去有title提示", |
title: "title提示", |
||||||
textAlign: "center" |
text: "移上去有title提示", |
||||||
}, { |
textAlign: "center", |
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg6", |
|
||||||
height: 50, |
|
||||||
disabled: true, |
|
||||||
warningTitle: "title错误提示", |
|
||||||
text: "移上去有title错误提示", |
|
||||||
textAlign: "center" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg2", |
|
||||||
height: 50, |
|
||||||
disabled: true, |
|
||||||
tipType: "success", |
|
||||||
title: "自定义title提示效果", |
|
||||||
warningTitle: "自定义title提示效果", |
|
||||||
text: "自定义title提示效果", |
|
||||||
textAlign: "center" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg3", |
|
||||||
height: 50, |
|
||||||
title: () => "函数返回值作为title提示", |
|
||||||
text: "title提示支持函数", |
|
||||||
textAlign: "center" |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
cls: "layout-bg4", |
|
||||||
height: 50, |
|
||||||
title: function () { |
|
||||||
return { |
|
||||||
level: "success", |
|
||||||
text: "自定义title\n提示效果", |
|
||||||
textAlign: "center" |
|
||||||
}; |
|
||||||
}, |
}, |
||||||
text: "title提示支持对象,作为bi.tooltip的props", |
{ |
||||||
textAlign: "center" |
type: "bi.label", |
||||||
}], |
cls: "layout-bg6", |
||||||
|
height: 50, |
||||||
|
disabled: true, |
||||||
|
warningTitle: "title错误提示", |
||||||
|
text: "移上去有title错误提示", |
||||||
|
textAlign: "center", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
height: 50, |
||||||
|
disabled: true, |
||||||
|
tipType: "success", |
||||||
|
title: "自定义title提示效果", |
||||||
|
warningTitle: "自定义title提示效果", |
||||||
|
text: "自定义title提示效果", |
||||||
|
textAlign: "center", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg3", |
||||||
|
height: 50, |
||||||
|
title: () => "函数返回值作为title提示", |
||||||
|
text: "title提示支持函数", |
||||||
|
textAlign: "center", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg4", |
||||||
|
height: 50, |
||||||
|
title() { |
||||||
|
return { |
||||||
|
level: "success", |
||||||
|
text: "自定义title\n提示效果", |
||||||
|
textAlign: "center", |
||||||
|
}; |
||||||
|
}, |
||||||
|
text: "title提示支持对象,作为bi.tooltip的props", |
||||||
|
textAlign: "center", |
||||||
|
} |
||||||
|
], |
||||||
hgap: 300, |
hgap: 300, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.title", Demo.Title); |
|
||||||
|
|||||||
@ -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", |
"这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", |
||||||
autoClose: false |
{ |
||||||
}); |
level: "warning", |
||||||
} |
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" |
|
||||||
}, |
|
||||||
|
|
||||||
mounted: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.part_tree"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
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", |
{ |
||||||
height: 50, |
type: "bi.label", |
||||||
text: "先初始化一份数据，然后再异步获取数据的树" |
height: 50, |
||||||
}, { |
text: "先初始化一份数据，然后再异步获取数据的树", |
||||||
type: "bi.part_tree", |
|
||||||
ref: function (_ref) { |
|
||||||
self.partTree = _ref; |
|
||||||
}, |
}, |
||||||
paras: { |
{ |
||||||
selectedValues: {"1": {}, "2": {"1": {}}} |
type: "bi.part_tree", |
||||||
}, |
ref(_ref) { |
||||||
itemsCreator: function (op, callback) { |
self.partTree = _ref; |
||||||
if (op.type === BI.TreeView.REQ_TYPE_INIT_DATA) { |
}, |
||||||
|
paras: { |
||||||
|
selectedValues: { 1: {}, 2: { 1: {} } }, |
||||||
|
}, |
||||||
|
itemsCreator(op, callback) { |
||||||
|
if (op.type === TreeView.REQ_TYPE_INIT_DATA) { |
||||||
|
callback({ |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
id: "1", |
||||||
|
text: 1, |
||||||
|
isParent: true, |
||||||
|
open: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "11", |
||||||
|
pId: "1", |
||||||
|
text: 11, |
||||||
|
isParent: true, |
||||||
|
open: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "111", |
||||||
|
pId: "11", |
||||||
|
text: 111, |
||||||
|
isParent: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "2", |
||||||
|
text: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "3", |
||||||
|
text: 3, |
||||||
|
} |
||||||
|
], |
||||||
|
hasNext: isNull(op.id), |
||||||
|
}); |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
callback({ |
callback({ |
||||||
items: [{ |
items: [ |
||||||
id: "1", |
{ |
||||||
text: 1, |
id: `${op.id || ""}1`, |
||||||
isParent: true, |
pId: op.id, |
||||||
open: true |
text: 1, |
||||||
}, { |
isParent: true, |
||||||
id: "11", |
}, |
||||||
pId: "1", |
{ |
||||||
text: 11, |
id: `${op.id || ""}2`, |
||||||
isParent: true, |
pId: op.id, |
||||||
open: true |
text: 2, |
||||||
}, { |
}, |
||||||
id: "111", |
{ |
||||||
pId: "11", |
id: `${op.id || ""}3`, |
||||||
text: 111, |
pId: op.id, |
||||||
isParent: true |
text: 3, |
||||||
}, { |
} |
||||||
id: "2", |
], |
||||||
text: 2 |
hasNext: isNull(op.id), |
||||||
}, { |
|
||||||
id: "3", |
|
||||||
text: 3 |
|
||||||
}], |
|
||||||
hasNext: BI.isNull(op.id) |
|
||||||
}); |
}); |
||||||
return; |
}, |
||||||
} |
|
||||||
callback({ |
|
||||||
items: [{ |
|
||||||
id: (op.id || "") + "1", |
|
||||||
pId: op.id, |
|
||||||
text: 1, |
|
||||||
isParent: true |
|
||||||
}, { |
|
||||||
id: (op.id || "") + "2", |
|
||||||
pId: op.id, |
|
||||||
text: 2 |
|
||||||
}, { |
|
||||||
id: (op.id || "") + "3", |
|
||||||
pId: op.id, |
|
||||||
text: 3 |
|
||||||
}], |
|
||||||
hasNext: BI.isNull(op.id) |
|
||||||
}); |
|
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
|
|
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.part_tree", Demo.Func); |
|
||||||
|
|||||||
@ -1,52 +1,57 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
|
||||||
}, |
|
||||||
|
|
||||||
_createDefaultTree: function () { |
@shortcut() |
||||||
var tree = BI.createWidget({ |
export class Func extends Widget { |
||||||
type: "bi.tree_view" |
static xtype = "demo.tree_view"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
_createDefaultTree() { |
||||||
|
const tree = createWidget({ |
||||||
|
type: "bi.tree_view", |
||||||
}); |
}); |
||||||
tree.initTree([ |
tree.initTree([ |
||||||
{id: 1, pId: 0, text: "test1", open: true}, |
{ id: 1, pId: 0, text: "test1", open: true }, |
||||||
{id: 11, pId: 1, text: "test11"}, |
{ id: 11, pId: 1, text: "test11" }, |
||||||
{id: 12, pId: 1, text: "test12"}, |
{ id: 12, pId: 1, text: "test12" }, |
||||||
{id: 111, pId: 11, text: "test111"}, |
{ id: 111, pId: 11, text: "test111" }, |
||||||
{id: 2, pId: 0, text: "test2", open: true}, |
{ id: 2, pId: 0, text: "test2", open: true }, |
||||||
{id: 21, pId: 2, text: "test21"}, |
{ id: 21, pId: 2, text: "test21" }, |
||||||
{id: 22, pId: 2, text: "test22"} |
{ id: 22, pId: 2, text: "test22" } |
||||||
]); |
]); |
||||||
|
|
||||||
return tree; |
return tree; |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var self = this; |
const self = this; |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
columns: 1, |
columns: 1, |
||||||
rows: 1, |
rows: 1, |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
column: 0, |
{ |
||||||
row: 0, |
column: 0, |
||||||
el: { |
row: 0, |
||||||
type: "bi.vtape", |
el: { |
||||||
items: [ |
type: "bi.vtape", |
||||||
{ |
items: [ |
||||||
el: this._createDefaultTree() |
{ |
||||||
}, |
el: this._createDefaultTree(), |
||||||
{ |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "tree.initTree([{\"id\":1, \"pId\":0, \"text\":\"test1\", open:true},{\"id\":11, \"pId\":1, \"text\":\"test11\"},{\"id\":12, \"pId\":1, \"text\":\"test12\"},{\"id\":111, \"pId\":11, \"text\":\"test111\"}])", |
|
||||||
whiteSpace: "normal" |
|
||||||
}, |
}, |
||||||
height: 50 |
{ |
||||||
} |
el: { |
||||||
] |
type: "bi.label", |
||||||
|
text: "tree.initTree([{\"id\":1, \"pId\":0, \"text\":\"test1\", open:true},{\"id\":11, \"pId\":1, \"text\":\"test11\"},{\"id\":12, \"pId\":1, \"text\":\"test12\"},{\"id\":111, \"pId\":11, \"text\":\"test111\"}])", |
||||||
|
whiteSpace: "normal", |
||||||
|
}, |
||||||
|
height: 50, |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.tree_view", 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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
var self = this, count = 1; |
export class Func extends Widget { |
||||||
var combo1 = BI.createWidget({ |
static xtype = "demo.bubble_combo"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
let self = this, |
||||||
|
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: [{ |
listeners: [ |
||||||
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
{ |
||||||
action: function () { |
eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
||||||
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); |
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: [{ |
listeners: [ |
||||||
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
{ |
||||||
action: function () { |
eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
||||||
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); |
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: [{ |
listeners: [ |
||||||
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
{ |
||||||
action: function () { |
eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, |
||||||
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); |
action() { |
||||||
|
self.popup.populate( |
||||||
|
count++ % 2 === 1 |
||||||
|
? "我的文字变少了" |
||||||
|
: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字" |
||||||
|
); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
el: combo1, |
{ |
||||||
left: 150, |
el: combo1, |
||||||
top: 10 |
left: 150, |
||||||
}, { |
top: 10, |
||||||
el: combo2, |
}, |
||||||
left: 10, |
{ |
||||||
bottom: 200 |
el: combo2, |
||||||
}, { |
left: 10, |
||||||
el: combo3, |
bottom: 200, |
||||||
right: 10, |
}, |
||||||
bottom: 10 |
{ |
||||||
}, { |
el: combo3, |
||||||
el: combo4, |
right: 10, |
||||||
right: 10, |
bottom: 10, |
||||||
top: 10 |
}, |
||||||
}] |
{ |
||||||
|
el: combo4, |
||||||
|
right: 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", |
{ |
||||||
ref: function () { |
type: "bi.editor_icon_check_combo", |
||||||
self.combo = this; |
ref() { |
||||||
|
self.combo = this; |
||||||
|
}, |
||||||
|
watermark: "默认值", |
||||||
|
width: 200, |
||||||
|
height: 24, |
||||||
|
value: 2, |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
// text: "MVC-1",
|
||||||
|
value: "1", |
||||||
|
}, |
||||||
|
{ |
||||||
|
// text: "MVC-2",
|
||||||
|
value: "2", |
||||||
|
}, |
||||||
|
{ |
||||||
|
// text: "MVC-3",
|
||||||
|
value: "3", |
||||||
|
} |
||||||
|
], |
||||||
}, |
}, |
||||||
watermark: "默认值", |
{ |
||||||
width: 200, |
type: "bi.button", |
||||||
height: 24, |
width: 90, |
||||||
value: 2, |
height: 25, |
||||||
items: [{ |
text: "setValue为空", |
||||||
// text: "MVC-1",
|
handler() { |
||||||
value: "1" |
self.combo.setValue(); |
||||||
}, { |
}, |
||||||
// text: "MVC-2",
|
|
||||||
value: "2" |
|
||||||
}, { |
|
||||||
// text: "MVC-3",
|
|
||||||
value: "3" |
|
||||||
}] |
|
||||||
}, { |
|
||||||
type: "bi.button", |
|
||||||
width: 90, |
|
||||||
height: 25, |
|
||||||
text: "setValue为空", |
|
||||||
handler: function () { |
|
||||||
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", |
{ |
||||||
container: "body", |
type: "bi.icon_combo", |
||||||
ref: function (_ref) { |
container: "body", |
||||||
self.refs = _ref; |
ref(_ref) { |
||||||
}, |
self.refs = _ref; |
||||||
value: "第二项", |
}, |
||||||
items: [{ |
|
||||||
value: "第一项", |
|
||||||
iconCls: "close-font" |
|
||||||
}, { |
|
||||||
value: "第二项", |
value: "第二项", |
||||||
iconCls: "search-font" |
items: [ |
||||||
}, { |
{ |
||||||
value: "第三项", |
value: "第一项", |
||||||
iconCls: "copy-font" |
iconCls: "close-font", |
||||||
}] |
}, |
||||||
}], |
{ |
||||||
vgap: 20 |
value: "第二项", |
||||||
|
iconCls: "search-font", |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: "第三项", |
||||||
|
iconCls: "copy-font", |
||||||
|
} |
||||||
|
], |
||||||
|
} |
||||||
|
], |
||||||
|
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. |
|
||||||
*/ |
|
||||||
Demo.IconTextValueCombo = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "" |
|
||||||
}, |
|
||||||
render: function () { |
|
||||||
|
|
||||||
|
@shortcut() |
||||||
|
export class IconTextValueCombo extends Widget { |
||||||
|
static xtype = "demo.icon_text_value_combo"; |
||||||
|
|
||||||
|
props = { baseCls: "" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
type: "bi.icon_text_value_combo", |
{ |
||||||
text: "默认值", |
type: "bi.icon_text_value_combo", |
||||||
// defaultIconCls: "next-page-h-font",
|
text: "默认值", |
||||||
width: 300, |
// defaultIconCls: "next-page-h-font",
|
||||||
items: [{ |
width: 300, |
||||||
text: "MVC-1", |
items: [ |
||||||
iconCls: "close-font", |
{ |
||||||
value: 1 |
text: "MVC-1", |
||||||
}, { |
iconCls: "close-font", |
||||||
text: "MVC-2", |
value: 1, |
||||||
iconCls: "date-font", |
}, |
||||||
value: 2 |
{ |
||||||
}, { |
text: "MVC-2", |
||||||
text: "MVC-3", |
iconCls: "date-font", |
||||||
iconCls: "search-close-h-font", |
value: 2, |
||||||
value: 3 |
}, |
||||||
}] |
{ |
||||||
}], |
text: "MVC-3", |
||||||
vgap: 20 |
iconCls: "search-close-h-font", |
||||||
|
value: 3, |
||||||
|
} |
||||||
|
], |
||||||
|
} |
||||||
|
], |
||||||
|
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", |
{ |
||||||
ref: function () { |
type: "bi.search_text_value_combo", |
||||||
combo = this; |
ref() { |
||||||
|
combo = this; |
||||||
|
}, |
||||||
|
warningTitle: "111", |
||||||
|
text: "默认值", |
||||||
|
value: 14, |
||||||
|
width: 300, |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
text: "ABC-1", |
||||||
|
iconCls: "date-font", |
||||||
|
value: 1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "BCD-2", |
||||||
|
iconCls: "search-font", |
||||||
|
value: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "CDE-3", |
||||||
|
iconCls: "pull-right-font", |
||||||
|
value: 3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "DEF-3", |
||||||
|
iconCls: "pull-right-font", |
||||||
|
value: 4, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "FEG-3", |
||||||
|
iconCls: "pull-right-font", |
||||||
|
value: 5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "FGH-3", |
||||||
|
iconCls: "pull-right-font", |
||||||
|
value: 6, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "GHI-3", |
||||||
|
iconCls: "pull-right-font", |
||||||
|
value: 7, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "HIJ-3", |
||||||
|
iconCls: "pull-right-font", |
||||||
|
value: 8, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "IJK-3", |
||||||
|
iconCls: "pull-right-font", |
||||||
|
value: 9, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "JKL-3", |
||||||
|
iconCls: "pull-right-font", |
||||||
|
value: 10, |
||||||
|
} |
||||||
|
], |
||||||
}, |
}, |
||||||
warningTitle: "111", |
{ |
||||||
text: "默认值", |
type: "bi.all_value_multi_text_value_combo", |
||||||
value: 14, |
items: Demo.CONSTANTS.ITEMS, |
||||||
width: 300, |
text: "提示文本", |
||||||
items: [{ |
width: 200, |
||||||
text: "ABC-1", |
value: { |
||||||
iconCls: "date-font", |
type: 1, |
||||||
value: 1 |
value: ["1", "2", "柳州市城贸金属材料有限责任公司", "3"], |
||||||
}, { |
}, |
||||||
text: "BCD-2", |
ref() { |
||||||
iconCls: "search-font", |
searchCombo = this; |
||||||
value: 2 |
}, |
||||||
}, { |
listeners: [ |
||||||
text: "CDE-3", |
{ |
||||||
iconCls: "pull-right-font", |
eventName: AllValueMultiTextValueCombo.EVENT_CONFIRM, |
||||||
value: 3 |
action() { |
||||||
}, { |
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
||||||
text: "DEF-3", |
}, |
||||||
iconCls: "pull-right-font", |
} |
||||||
value: 4 |
], |
||||||
}, { |
|
||||||
text: "FEG-3", |
|
||||||
iconCls: "pull-right-font", |
|
||||||
value: 5 |
|
||||||
}, { |
|
||||||
text: "FGH-3", |
|
||||||
iconCls: "pull-right-font", |
|
||||||
value: 6 |
|
||||||
}, { |
|
||||||
text: "GHI-3", |
|
||||||
iconCls: "pull-right-font", |
|
||||||
value: 7 |
|
||||||
}, { |
|
||||||
text: "HIJ-3", |
|
||||||
iconCls: "pull-right-font", |
|
||||||
value: 8 |
|
||||||
}, { |
|
||||||
text: "IJK-3", |
|
||||||
iconCls: "pull-right-font", |
|
||||||
value: 9 |
|
||||||
}, { |
|
||||||
text: "JKL-3", |
|
||||||
iconCls: "pull-right-font", |
|
||||||
value: 10 |
|
||||||
}] |
|
||||||
}, { |
|
||||||
type: "bi.all_value_multi_text_value_combo", |
|
||||||
items: Demo.CONSTANTS.ITEMS, |
|
||||||
text: "提示文本", |
|
||||||
width: 200, |
|
||||||
value: { |
|
||||||
type: 1, |
|
||||||
value: ["1", "2", "柳州市城贸金属材料有限责任公司", "3"] |
|
||||||
}, |
}, |
||||||
ref: function () { |
{ |
||||||
searchCombo = this; |
type: "bi.button", |
||||||
|
text: "setValue(3)", |
||||||
|
width: 90, |
||||||
|
height: 25, |
||||||
|
handler() { |
||||||
|
combo.setValue(11); |
||||||
|
}, |
||||||
}, |
}, |
||||||
listeners: [{ |
{ |
||||||
eventName: "BI.AllValueMultiTextValueCombo.EVENT_CONFIRM", |
type: "bi.button", |
||||||
action: function () { |
text: "getValue()", |
||||||
|
width: 90, |
||||||
|
height: 25, |
||||||
|
handler() { |
||||||
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
||||||
} |
}, |
||||||
}] |
|
||||||
}, { |
|
||||||
type: "bi.button", |
|
||||||
text: "setValue(3)", |
|
||||||
width: 90, |
|
||||||
height: 25, |
|
||||||
handler: function () { |
|
||||||
combo.setValue(11); |
|
||||||
} |
|
||||||
}, { |
|
||||||
type: "bi.button", |
|
||||||
text: "getValue()", |
|
||||||
width: 90, |
|
||||||
height: 25, |
|
||||||
handler: function () { |
|
||||||
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", |
{ |
||||||
width: 300, |
type: "bi.text_value_down_list_combo", |
||||||
ref: function (_ref) { |
width: 300, |
||||||
self.refs = _ref; |
ref(_ref) { |
||||||
|
self.refs = _ref; |
||||||
|
}, |
||||||
|
text: "默认值", |
||||||
|
value: 11, |
||||||
|
items: [ |
||||||
|
[ |
||||||
|
{ |
||||||
|
text: "属于", |
||||||
|
value: 1, |
||||||
|
cls: "dot-e-font", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "不属于", |
||||||
|
value: 2, |
||||||
|
cls: "dot-e-font", |
||||||
|
} |
||||||
|
], |
||||||
|
[ |
||||||
|
{ |
||||||
|
el: { |
||||||
|
text: "大于", |
||||||
|
value: 3, |
||||||
|
iconCls1: "dot-e-font", |
||||||
|
}, |
||||||
|
value: 3, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
text: "固定值", |
||||||
|
value: 4, |
||||||
|
cls: "dot-e-font", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "平均值", |
||||||
|
value: 5, |
||||||
|
cls: "dot-e-font", |
||||||
|
} |
||||||
|
], |
||||||
|
} |
||||||
|
] |
||||||
|
], |
||||||
}, |
}, |
||||||
text: "默认值", |
{ |
||||||
value: 11, |
type: "bi.button", |
||||||
items: [[{ |
width: 90, |
||||||
text: "属于", |
height: 25, |
||||||
value: 1, |
text: "setValue", |
||||||
cls: "dot-e-font" |
handler() { |
||||||
}, { |
self.refs.setValue(2); |
||||||
text: "不属于", |
}, |
||||||
value: 2, |
}, |
||||||
cls: "dot-e-font" |
{ |
||||||
}], [{ |
type: "bi.button", |
||||||
el: { |
width: 90, |
||||||
text: "大于", |
height: 25, |
||||||
value: 3, |
text: "getValue", |
||||||
iconCls1: "dot-e-font" |
handler() { |
||||||
|
Msg.alert("", JSON.stringify(self.refs.getValue())); |
||||||
}, |
}, |
||||||
value: 3, |
|
||||||
children: [{ |
|
||||||
text: "固定值", |
|
||||||
value: 4, |
|
||||||
cls: "dot-e-font" |
|
||||||
}, { |
|
||||||
text: "平均值", |
|
||||||
value: 5, |
|
||||||
cls: "dot-e-font" |
|
||||||
}] |
|
||||||
}]] |
|
||||||
}, { |
|
||||||
type: "bi.button", |
|
||||||
width: 90, |
|
||||||
height: 25, |
|
||||||
text: "setValue", |
|
||||||
handler: function () { |
|
||||||
self.refs.setValue(2); |
|
||||||
} |
|
||||||
}, { |
|
||||||
type: "bi.button", |
|
||||||
width: 90, |
|
||||||
height: 25, |
|
||||||
text: "getValue", |
|
||||||
handler: function () { |
|
||||||
BI.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", |
{ |
||||||
ref: function () { |
type: "bi.text_value_check_combo", |
||||||
self.combo = this; |
ref () { |
||||||
|
self.combo = this; |
||||||
|
}, |
||||||
|
text: "默认值", |
||||||
|
// value: 1,
|
||||||
|
width: 300, |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
text: "MVC-1", |
||||||
|
value: 1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "MVC-2", |
||||||
|
value: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "MVC-3", |
||||||
|
value: 3, |
||||||
|
} |
||||||
|
], |
||||||
}, |
}, |
||||||
text: "默认值", |
{ |
||||||
//value: 1,
|
type: "bi.button", |
||||||
width: 300, |
width: 90, |
||||||
items: [{ |
height: 25, |
||||||
text: "MVC-1", |
handler () { |
||||||
value: 1 |
BI.Msg.alert("", JSON.stringify(self.combo.getValue())); |
||||||
}, { |
}, |
||||||
text: "MVC-2", |
|
||||||
value: 2 |
|
||||||
}, { |
|
||||||
text: "MVC-3", |
|
||||||
value: 3 |
|
||||||
}] |
|
||||||
}, { |
|
||||||
type: "bi.button", |
|
||||||
width: 90, |
|
||||||
height: 25, |
|
||||||
handler: function () { |
|
||||||
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.click_item_effect"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: BI.createItems([{ |
items: createItems( |
||||||
text: "bi-list-item", |
[ |
||||||
cls: "bi-list-item close-font" |
{ |
||||||
}, { |
text: "bi-list-item", |
||||||
text: "bi-list-item-simple", |
cls: "bi-list-item close-font", |
||||||
cls: "bi-list-item-simple close-font" |
}, |
||||||
}, { |
{ |
||||||
text: "bi-list-item-effect", |
text: "bi-list-item-simple", |
||||||
cls: "bi-list-item-effect close-font" |
cls: "bi-list-item-simple close-font", |
||||||
}, { |
}, |
||||||
text: "bi-list-item-active", |
{ |
||||||
cls: "bi-list-item-active close-font" |
text: "bi-list-item-effect", |
||||||
}, { |
cls: "bi-list-item-effect close-font", |
||||||
text: "bi-list-item-active2", |
}, |
||||||
cls: "bi-list-item-active2 close-font" |
{ |
||||||
}, { |
text: "bi-list-item-active", |
||||||
text: "bi-list-item-select", |
cls: "bi-list-item-active close-font", |
||||||
cls: "bi-list-item-select close-font" |
}, |
||||||
}, { |
{ |
||||||
text: "bi-list-item-select2", |
text: "bi-list-item-active2", |
||||||
cls: "bi-list-item-select2 close-font" |
cls: "bi-list-item-active2 close-font", |
||||||
}], { |
}, |
||||||
type: "bi.icon_text_item", |
{ |
||||||
logic: { |
text: "bi-list-item-select", |
||||||
dynamic: true |
cls: "bi-list-item-select close-font", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "bi-list-item-select2", |
||||||
|
cls: "bi-list-item-select2 close-font", |
||||||
|
} |
||||||
|
], |
||||||
|
{ |
||||||
|
type: "bi.icon_text_item", |
||||||
|
logic: { |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.color_chooser"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
items: [{ |
items: [ |
||||||
el: { |
{ |
||||||
type: "bi.color_chooser", |
el: { |
||||||
recommendColorsGetter: function () { |
type: "bi.color_chooser", |
||||||
return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"] |
recommendColorsGetter() { |
||||||
|
return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"]; |
||||||
|
}, |
||||||
|
width: 24, |
||||||
|
height: 24, |
||||||
}, |
}, |
||||||
width: 24, |
left: 100, |
||||||
height: 24 |
top: 250, |
||||||
}, |
|
||||||
left: 100, |
|
||||||
top: 250 |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
type: "bi.simple_color_chooser", |
|
||||||
width: 30, |
|
||||||
height: 24 |
|
||||||
}, |
}, |
||||||
left: 400, |
{ |
||||||
top: 250 |
el: { |
||||||
}, { |
type: "bi.simple_color_chooser", |
||||||
el: { |
width: 30, |
||||||
type: "bi.color_chooser", |
height: 24, |
||||||
width: 230, |
}, |
||||||
height: 24 |
left: 400, |
||||||
|
top: 250, |
||||||
}, |
}, |
||||||
left: 100, |
{ |
||||||
top: 350 |
el: { |
||||||
}] |
type: "bi.color_chooser", |
||||||
|
width: 230, |
||||||
|
height: 24, |
||||||
|
}, |
||||||
|
left: 100, |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.color_chooser_popup"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
items: [{ |
items: [ |
||||||
el: { |
{ |
||||||
type: "bi.color_chooser_popup", |
el: { |
||||||
cls: "bi-card" |
type: "bi.color_chooser_popup", |
||||||
}, |
cls: "bi-card", |
||||||
left: 100, |
}, |
||||||
top: 250 |
left: 100, |
||||||
}, { |
top: 250, |
||||||
el: { |
|
||||||
type: "bi.simple_color_chooser_popup", |
|
||||||
cls: "bi-card" |
|
||||||
}, |
}, |
||||||
left: 400, |
{ |
||||||
top: 250 |
el: { |
||||||
}] |
type: "bi.simple_color_chooser_popup", |
||||||
|
cls: "bi-card", |
||||||
|
}, |
||||||
|
left: 400, |
||||||
|
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", |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
BI.createWidget({ |
export class Func extends Widget { |
||||||
|
static xtype = "demo.segment"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
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", |
{ |
||||||
items: [{ |
type: "bi.segment", |
||||||
text: "较长的选项1", |
items: [ |
||||||
value: 1, |
{ |
||||||
}, { |
text: "较长的选项1", |
||||||
text: "选项2", |
value: 1, |
||||||
value: 2, |
}, |
||||||
}, { |
{ |
||||||
text: "选项3", |
text: "选项2", |
||||||
value: 3, |
value: 2, |
||||||
}], |
}, |
||||||
}], |
{ |
||||||
|
text: "选项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", |
{ |
||||||
cls: "bi-border", |
type: "bi.clear_editor", |
||||||
width: 300, |
cls: "bi-border", |
||||||
watermark: "这个是带清除按钮的", |
width: 300, |
||||||
value: 123 |
watermark: "这个是带清除按钮的", |
||||||
}], |
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: { |
{ |
||||||
type: "bi.button", |
el: { |
||||||
text: "focus", |
type: "bi.button", |
||||||
height: 25, |
text: "focus", |
||||||
handler: function () { |
height: 25, |
||||||
editor.focus(); |
handler() { |
||||||
} |
editor.focus(); |
||||||
}, |
}, |
||||||
right: 10, |
}, |
||||||
left: 10, |
right: 10, |
||||||
bottom: 10 |
left: 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", |
{ |
||||||
ref: function () { |
type: "bi.simple_state_editor", |
||||||
self.editor = this; |
ref() { |
||||||
}, |
self.editor = this; |
||||||
cls: "bi-border", |
}, |
||||||
width: 300 |
cls: "bi-border", |
||||||
}], |
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", |
{ |
||||||
ref: function () { |
type: "bi.state_editor", |
||||||
self.editor = this; |
ref() { |
||||||
}, |
self.editor = this; |
||||||
cls: "bi-border", |
}, |
||||||
width: 300 |
cls: "bi-border", |
||||||
}], |
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.multi_select_item"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
height: 30, |
type: "bi.label", |
||||||
text: "复选item" |
height: 30, |
||||||
}, { |
text: "复选item", |
||||||
type: "bi.multi_select_item", |
}, |
||||||
text: "复选项" |
{ |
||||||
}], |
type: "bi.multi_select_item", |
||||||
hgap: 300 |
text: "复选项", |
||||||
|
} |
||||||
|
], |
||||||
|
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", |
{ |
||||||
height: 30, |
type: "bi.label", |
||||||
text: "单选item" |
height: 30, |
||||||
}, { |
text: "单选item", |
||||||
type: "bi.single_select_item", |
}, |
||||||
text: "单选项" |
{ |
||||||
}], |
type: "bi.single_select_item", |
||||||
hgap: 300 |
text: "单选项", |
||||||
|
} |
||||||
|
], |
||||||
|
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", |
{ |
||||||
height: 30, |
type: "bi.label", |
||||||
text: "单选item" |
height: 30, |
||||||
}, { |
text: "单选item", |
||||||
type: "bi.single_select_radio_item", |
}, |
||||||
text: "单选项" |
{ |
||||||
}], |
type: "bi.single_select_radio_item", |
||||||
hgap: 300 |
text: "单选项", |
||||||
|
} |
||||||
|
], |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
var self = this; |
export class Func extends Widget { |
||||||
|
static xtype = "demo.lazy_loader"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
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", |
{ |
||||||
hgap: 5 |
type: "bi.left", |
||||||
}] |
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
var self = this; |
export class Func extends Widget { |
||||||
BI.createWidget({ |
static xtype = "demo.select_list"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
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), { |
items: createItems(deepClone(Demo.CONSTANTS.SIMPLE_ITEMS), { |
||||||
type: "bi.multi_select_item" |
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
BI.createWidget({ |
export class Func extends Widget { |
||||||
|
static xtype = "demo.all_count_pager"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
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", |
{ |
||||||
height: 30, |
type: "bi.label", |
||||||
text: " (测试条件：总页数为3)" |
height: 30, |
||||||
}, { |
text: " (测试条件：总页数为3)", |
||||||
type: "bi.all_count_pager", |
}, |
||||||
pages: 3, |
{ |
||||||
curr: 1, |
type: "bi.all_count_pager", |
||||||
count: 1000 |
pages: 3, |
||||||
}] |
curr: 1, |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
mounted: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.direction_pager"; |
||||||
|
|
||||||
|
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", |
{ |
||||||
ref: function (_ref) { |
type: "bi.direction_pager", |
||||||
self.pager = _ref; |
ref(_ref) { |
||||||
}, |
self.pager = _ref; |
||||||
horizontal: { |
|
||||||
pages: false, // 总页数
|
|
||||||
curr: 1, // 初始化当前页， pages为数字时可用
|
|
||||||
|
|
||||||
hasPrev: function (v) { |
|
||||||
return v > 1; |
|
||||||
}, |
|
||||||
hasNext: function () { |
|
||||||
return true; |
|
||||||
}, |
}, |
||||||
firstPage: 1 |
horizontal: { |
||||||
}, |
pages: false, // 总页数
|
||||||
vertical: { |
curr: 1, // 初始化当前页， pages为数字时可用
|
||||||
pages: false, // 总页数
|
|
||||||
curr: 1, // 初始化当前页， pages为数字时可用
|
|
||||||
|
|
||||||
hasPrev: function (v) { |
hasPrev(v) { |
||||||
return v > 1; |
return v > 1; |
||||||
|
}, |
||||||
|
hasNext() { |
||||||
|
return true; |
||||||
|
}, |
||||||
|
firstPage: 1, |
||||||
}, |
}, |
||||||
hasNext: function () { |
vertical: { |
||||||
return true; |
pages: false, // 总页数
|
||||||
|
curr: 1, // 初始化当前页， pages为数字时可用
|
||||||
|
|
||||||
|
hasPrev(v) { |
||||||
|
return v > 1; |
||||||
|
}, |
||||||
|
hasNext() { |
||||||
|
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( |
||||||
type: "bi.multi_select_item", |
createItems(deepClone(Demo.CONSTANTS.ITEMS), { |
||||||
height: 25 |
type: "bi.multi_select_item", |
||||||
})); |
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,39 +1,46 @@ |
|||||||
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.multi_popup_view"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
return { |
return { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
items: [{ |
items: [ |
||||||
el: { |
{ |
||||||
type: "bi.combo", |
|
||||||
width: 200, |
|
||||||
height: 30, |
|
||||||
el: { |
el: { |
||||||
type: "bi.text_button", |
type: "bi.combo", |
||||||
text: "点击", |
width: 200, |
||||||
cls: "bi-border", |
height: 30, |
||||||
height: 30 |
|
||||||
}, |
|
||||||
popup: { |
|
||||||
type: "bi.multi_popup_view", |
|
||||||
el: { |
el: { |
||||||
type: "bi.button_group", |
type: "bi.text_button", |
||||||
layouts: [{ |
text: "点击", |
||||||
type: "bi.vertical" |
cls: "bi-border", |
||||||
}], |
height: 30, |
||||||
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
}, |
||||||
type: "bi.multi_select_item", |
popup: { |
||||||
height: 25 |
type: "bi.multi_popup_view", |
||||||
}) |
el: { |
||||||
} |
type: "bi.button_group", |
||||||
} |
layouts: [ |
||||||
|
{ |
||||||
|
type: "bi.vertical", |
||||||
|
} |
||||||
|
], |
||||||
|
items: createItems(deepClone(Demo.CONSTANTS.ITEMS), { |
||||||
|
type: "bi.multi_select_item", |
||||||
|
height: 25, |
||||||
|
}), |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.multi_popup_view", 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", |
{ |
||||||
text: "操作" |
type: "bi.button", |
||||||
}], |
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), { |
} |
||||||
|
], |
||||||
|
items: createItems(deepClone(Demo.CONSTANTS.ITEMS), { |
||||||
type: "bi.multi_select_item", |
type: "bi.multi_select_item", |
||||||
height: 25 |
height: 25, |
||||||
}) |
}), |
||||||
} |
}, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.panel", Demo.Func); |
|
||||||
|
|||||||
@ -1,39 +1,46 @@ |
|||||||
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.popup_panel"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const self = this; |
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
return { |
return { |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
items: [{ |
items: [ |
||||||
el: { |
{ |
||||||
type: "bi.combo", |
|
||||||
width: 200, |
|
||||||
height: 30, |
|
||||||
el: { |
el: { |
||||||
type: "bi.text_button", |
type: "bi.combo", |
||||||
text: "点击", |
width: 200, |
||||||
cls: "bi-border", |
height: 30, |
||||||
height: 30 |
|
||||||
}, |
|
||||||
popup: { |
|
||||||
type: "bi.popup_panel", |
|
||||||
el: { |
el: { |
||||||
type: "bi.button_group", |
type: "bi.text_button", |
||||||
layouts: [{ |
text: "点击", |
||||||
type: "bi.vertical" |
cls: "bi-border", |
||||||
}], |
height: 30, |
||||||
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
}, |
||||||
type: "bi.multi_select_item", |
popup: { |
||||||
height: 25 |
type: "bi.popup_panel", |
||||||
}) |
el: { |
||||||
} |
type: "bi.button_group", |
||||||
} |
layouts: [ |
||||||
|
{ |
||||||
|
type: "bi.vertical", |
||||||
|
} |
||||||
|
], |
||||||
|
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
||||||
|
type: "bi.multi_select_item", |
||||||
|
height: 25, |
||||||
|
}), |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.popup_panel", Demo.Func); |
|
||||||
|
|||||||
@ -1,43 +1,53 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
var tree = BI.createWidget({ |
export class Func extends Widget { |
||||||
|
static xtype = "demo.display_tree"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const tree = createWidget({ |
||||||
type: "bi.display_tree", |
type: "bi.display_tree", |
||||||
element: this |
element: this, |
||||||
}); |
}); |
||||||
|
|
||||||
tree.initTree([{ |
tree.initTree([ |
||||||
id: 1, |
{ |
||||||
text: "第一项", |
id: 1, |
||||||
open: true |
text: "第一项", |
||||||
}, { |
open: true, |
||||||
id: 2, |
}, |
||||||
text: "第二项" |
{ |
||||||
}, { |
id: 2, |
||||||
id: 11, |
text: "第二项", |
||||||
pId: 1, |
}, |
||||||
text: "子项1(共2个)", |
{ |
||||||
open: true |
id: 11, |
||||||
}, { |
pId: 1, |
||||||
id: 111, |
text: "子项1(共2个)", |
||||||
pId: 11, |
open: true, |
||||||
text: "子子项1" |
}, |
||||||
}, { |
{ |
||||||
id: 112, |
id: 111, |
||||||
pId: 11, |
pId: 11, |
||||||
text: "子子项2" |
text: "子子项1", |
||||||
}, { |
}, |
||||||
id: 12, |
{ |
||||||
pId: 1, |
id: 112, |
||||||
text: "子项2" |
pId: 11, |
||||||
}, { |
text: "子子项2", |
||||||
id: 13, |
}, |
||||||
pId: 1, |
{ |
||||||
text: "子项3" |
id: 12, |
||||||
}]); |
pId: 1, |
||||||
|
text: "子项2", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 13, |
||||||
|
pId: 1, |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
var tree = BI.createWidget({ |
export class Func extends Widget { |
||||||
|
static xtype = "demo.level_tree"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
const tree = BI.createWidget({ |
||||||
type: "bi.level_tree", |
type: "bi.level_tree", |
||||||
chooseType: 0, |
chooseType: 0, |
||||||
items: [{ |
items: [ |
||||||
id: 1, |
{ |
||||||
text: "第一项", |
id: 1, |
||||||
value: 1, |
text: "第一项", |
||||||
isParent: true |
value: 1, |
||||||
}, { |
isParent: true, |
||||||
id: 2, |
}, |
||||||
text: "第二项", |
{ |
||||||
value: 2, |
id: 2, |
||||||
isParent: true |
text: "第二项", |
||||||
}, { |
value: 2, |
||||||
id: 3, |
isParent: true, |
||||||
text: "第三项", |
}, |
||||||
value: 1, |
{ |
||||||
isParent: true, |
id: 3, |
||||||
open: true |
text: "第三项", |
||||||
}, { |
value: 1, |
||||||
id: 4, |
isParent: true, |
||||||
text: "第四项", |
open: true, |
||||||
value: 1 |
}, |
||||||
}, { |
{ |
||||||
id: 11, |
id: 4, |
||||||
pId: 1, |
text: "第四项", |
||||||
text: "子项1", |
value: 1, |
||||||
value: 11 |
}, |
||||||
}, { |
{ |
||||||
id: 12, |
id: 11, |
||||||
pId: 1, |
pId: 1, |
||||||
text: "子项2", |
text: "子项1", |
||||||
value: 12 |
value: 11, |
||||||
}, { |
}, |
||||||
id: 13, |
{ |
||||||
pId: 1, |
id: 12, |
||||||
text: "子项3", |
pId: 1, |
||||||
value: 13 |
text: "子项2", |
||||||
}, { |
value: 12, |
||||||
id: 111, |
}, |
||||||
pId: 11, |
{ |
||||||
text: "子项1-1", |
id: 13, |
||||||
value: 111 |
pId: 1, |
||||||
}, { |
text: "子项3", |
||||||
id: 21, |
value: 13, |
||||||
pId: 2, |
}, |
||||||
text: "子项1", |
{ |
||||||
value: 21 |
id: 111, |
||||||
}, { |
pId: 11, |
||||||
id: 31, |
text: "子项1-1", |
||||||
pId: 3, |
value: 111, |
||||||
text: "子项1", |
}, |
||||||
value: 31 |
{ |
||||||
}, { |
id: 21, |
||||||
id: 32, |
pId: 2, |
||||||
pId: 3, |
text: "子项1", |
||||||
text: "子项2", |
value: 21, |
||||||
value: 32 |
}, |
||||||
}, { |
{ |
||||||
id: 33, |
id: 31, |
||||||
pId: 3, |
pId: 3, |
||||||
text: "子项3", |
text: "子项1", |
||||||
value: 33 |
value: 31, |
||||||
}] |
}, |
||||||
|
{ |
||||||
|
id: 32, |
||||||
|
pId: 3, |
||||||
|
text: "子项2", |
||||||
|
value: 32, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 33, |
||||||
|
pId: 3, |
||||||
|
text: "子项3", |
||||||
|
value: 33, |
||||||
|
} |
||||||
|
], |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
BI.createWidget({ |
||||||
type: "bi.vtape", |
type: "bi.vtape", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
el: tree |
{ |
||||||
}, { |
el: tree, |
||||||
height: 30, |
}, |
||||||
el: { |
{ |
||||||
type: "bi.button", |
|
||||||
height: 30, |
height: 30, |
||||||
text: "getValue", |
el: { |
||||||
handler: function () { |
type: "bi.button", |
||||||
BI.Msg.alert("", tree.getValue()); |
height: 30, |
||||||
} |
text: "getValue", |
||||||
|
handler() { |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
BI.createWidget({ |
export class Func extends Widget { |
||||||
|
static xtype = "demo.editor_trigger"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
text: "输入框加图标的trigger" |
type: "bi.label", |
||||||
}, { |
text: "输入框加图标的trigger", |
||||||
type: "bi.editor_trigger", |
}, |
||||||
watermark: "这是水印", |
{ |
||||||
width: 200, |
type: "bi.editor_trigger", |
||||||
height: 24 |
watermark: "这是水印", |
||||||
}], |
width: 200, |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.icon_trigger"; |
||||||
|
|
||||||
BI.createWidget({ |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
text: "只有一个图标的trigger" |
type: "bi.label", |
||||||
}, { |
text: "只有一个图标的trigger", |
||||||
type: "bi.icon_trigger", |
}, |
||||||
width: 30, |
{ |
||||||
height: 24 |
type: "bi.icon_trigger", |
||||||
}], |
width: 30, |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.select_text_trigger"; |
||||||
|
|
||||||
BI.createWidget({ |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
text: "可被选择的trigger" |
type: "bi.label", |
||||||
}, { |
text: "可被选择的trigger", |
||||||
type: "bi.select_text_trigger", |
}, |
||||||
text: "这是一个简单的trigger", |
{ |
||||||
width: 200, |
type: "bi.select_text_trigger", |
||||||
height: 24 |
text: "这是一个简单的trigger", |
||||||
}], |
width: 200, |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.text_trigger"; |
||||||
|
|
||||||
BI.createWidget({ |
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
render() { |
||||||
|
createWidget({ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
text: "文本加图标的trigger" |
type: "bi.label", |
||||||
}, { |
text: "文本加图标的trigger", |
||||||
type: "bi.text_trigger", |
}, |
||||||
text: "这是一个简单的trigger", |
{ |
||||||
width: 200, |
type: "bi.text_trigger", |
||||||
height: 24 |
text: "这是一个简单的trigger", |
||||||
}], |
width: 200, |
||||||
|
height: 24, |
||||||
|
} |
||||||
|
], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}); |
}); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.text_trigger", Demo.Func); |
|
||||||
|
|||||||
@ -1,26 +1,16 @@ |
|||||||
Demo.Center = BI.inherit(BI.Widget, { |
import { shortcut, Widget } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-center" |
@shortcut() |
||||||
}, |
export class Center extends Widget { |
||||||
render: function () { |
static xtype = "demo.center"; |
||||||
var self = this; |
|
||||||
return { |
props = { baseCls: "demo-center" }; |
||||||
type: "bi.router_view" |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.shortcut("demo.center", Demo.Center); |
|
||||||
|
|
||||||
Demo.Router = BI.inherit(BI.Widget, { |
render() { |
||||||
props: { |
const self = this; |
||||||
baseCls: "demo-router" |
|
||||||
}, |
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
var params = BI.Router.$router.history.current.params; |
|
||||||
return { |
return { |
||||||
type: params.componentId |
type: "bi.router_view", |
||||||
} |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.router", Demo.Router); |
|
||||||
|
|||||||
@ -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) { |
{ |
||||||
return v !== "a" && v !== ""; |
validate(v) { |
||||||
|
return v !== "a" && v !== ""; |
||||||
|
}, |
||||||
|
tip(v) { |
||||||
|
if (BI.isEmpty(v)) { |
||||||
|
return "不能为空"; |
||||||
|
} |
||||||
|
|
||||||
|
return "不合法格式"; |
||||||
|
}, |
||||||
|
label: "E-mail", |
||||||
|
el: { |
||||||
|
type: "bi.text_editor", |
||||||
|
watermark: "输入a报错", |
||||||
|
allowBlank: true, |
||||||
|
}, |
||||||
}, |
}, |
||||||
tip: function (v) { |
{ |
||||||
if (BI.isEmpty(v)) { |
validate(v) { |
||||||
|
return BI.isNotEmptyArray(v); |
||||||
|
}, |
||||||
|
tip() { |
||||||
return "不能为空"; |
return "不能为空"; |
||||||
} |
}, |
||||||
return "不合法格式" |
label: "性别", |
||||||
|
el: { |
||||||
|
type: "bi.text_value_combo", |
||||||
|
text: "请选择", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
text: "男", |
||||||
|
value: 1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "女", |
||||||
|
value: 2, |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
}, |
}, |
||||||
label: "E-mail", |
{ |
||||||
el: { |
validate(v) { |
||||||
type: 'bi.text_editor', |
return v !== ""; |
||||||
watermark: "输入a报错", |
}, |
||||||
allowBlank: true, |
tip() { |
||||||
} |
return "不能为空"; |
||||||
}, { |
}, |
||||||
validate: function (v) { |
label: "姓名", |
||||||
return BI.isNotEmptyArray(v); |
el: { |
||||||
}, |
type: "bi.text_editor", |
||||||
tip: function () { |
watermark: "输入姓名", |
||||||
return "不能为空"; |
allowBlank: true, |
||||||
}, |
}, |
||||||
label: "性别", |
|
||||||
el: { |
|
||||||
type: 'bi.text_value_combo', |
|
||||||
text: "请选择", |
|
||||||
items: [{ |
|
||||||
text: "男", |
|
||||||
value: 1 |
|
||||||
}, { |
|
||||||
text: "女", |
|
||||||
value: 2 |
|
||||||
}] |
|
||||||
} |
|
||||||
}, { |
|
||||||
validate: function (v) { |
|
||||||
return v !== ""; |
|
||||||
}, |
|
||||||
tip: function () { |
|
||||||
return "不能为空"; |
|
||||||
}, |
|
||||||
label: "姓名", |
|
||||||
el: { |
|
||||||
type: 'bi.text_editor', |
|
||||||
watermark: "输入姓名", |
|
||||||
allowBlank: true, |
|
||||||
} |
|
||||||
}, { |
|
||||||
validate: function (v) { |
|
||||||
return v !== ""; |
|
||||||
}, |
|
||||||
tip: function () { |
|
||||||
return "不能为空"; |
|
||||||
}, |
}, |
||||||
label: "姓名", |
{ |
||||||
el: { |
validate(v) { |
||||||
type: 'bi.textarea_editor', |
return v !== ""; |
||||||
cls: 'bi-border', |
}, |
||||||
watermark: "输入简介", |
tip() { |
||||||
allowBlank: true, |
return "不能为空"; |
||||||
height: 200, |
}, |
||||||
|
label: "姓名", |
||||||
|
el: { |
||||||
|
type: "bi.textarea_editor", |
||||||
|
cls: "bi-border", |
||||||
|
watermark: "输入简介", |
||||||
|
allowBlank: true, |
||||||
|
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: [ |
||||||
type: "bi.button", |
widget, |
||||||
text: "提交", |
{ |
||||||
handler: function () { |
type: "bi.button", |
||||||
widget.validate(); |
text: "提交", |
||||||
|
handler() { |
||||||
|
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" |
|
||||||
}, |
|
||||||
render: function () { |
|
||||||
|
|
||||||
var widget = BI.createWidget({ |
@shortcut() |
||||||
|
export class TreeValueChooser extends Widget { |
||||||
|
static xtype = "demo.tree_value_chooser_combo"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-tree-value-chooser-combo" }; |
||||||
|
|
||||||
|
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() { |
||||||
return { |
console.log("loading pane mounted"); |
||||||
type: "bi.center_adapt", |
} |
||||||
items: [{ |
|
||||||
|
render() { |
||||||
|
return { |
||||||
|
type: "bi.center_adapt", |
||||||
|
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,495 +1,450 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, createItems, deepClone, map, delay, random, makeArray } from "@/core"; |
||||||
props: { |
import { Msg } from "@/base"; |
||||||
baseCls: "demo-func" |
|
||||||
}, |
|
||||||
years: [{ |
|
||||||
text: "2010年", value: 2010, iconCls: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "2011年", value: 2011 |
|
||||||
}, { |
|
||||||
text: "2012年", value: 2012, iconCls: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "2013年", value: 2013 |
|
||||||
}, { |
|
||||||
text: "2014年", value: 2014, iconCls: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "2015年", value: 2015, iconCls: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "2016年", value: 2016, iconCls: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "2017年", value: 2017, iconCls: "close-ha-font" |
|
||||||
}], |
|
||||||
child: [{ |
|
||||||
type: "bi.combo_group", |
|
||||||
el: { |
|
||||||
type: "bi.icon_text_icon_item", |
|
||||||
text: "2010年", |
|
||||||
value: 2010, |
|
||||||
height: 25, |
|
||||||
iconCls1: "close-ha-font", |
|
||||||
iconCls2: "close-ha-font" |
|
||||||
}, |
|
||||||
items: [{ |
|
||||||
type: "bi.single_select_item", |
|
||||||
height: 25, |
|
||||||
text: "一月", |
|
||||||
value: 11 |
|
||||||
}, { |
|
||||||
type: "bi.icon_text_icon_item", |
|
||||||
height: 25, |
|
||||||
text: "二月", |
|
||||||
value: 12, |
|
||||||
iconCls1: "close-ha-font", |
|
||||||
iconCls2: "close-ha-font", |
|
||||||
children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }] |
|
||||||
}] |
|
||||||
}, { |
|
||||||
text: "2011年", value: 2011 |
|
||||||
}, { |
|
||||||
text: "2012年", value: 2012, iconCls: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "2013年", value: 2013 |
|
||||||
}, { |
|
||||||
text: "2014年", value: 2014, iconCls: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "2015年", value: 2015, iconCls: "close-ha-font" |
|
||||||
}], |
|
||||||
|
|
||||||
months: [[{ |
@shortcut() |
||||||
el: { |
export class Func extends Widget { |
||||||
text: "一月", value: 1 |
static xtype = "demo.combo"; |
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
text: "二月", value: 2 |
|
||||||
} |
|
||||||
}], [{ |
|
||||||
el: { |
|
||||||
text: "三月", value: 3 |
|
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
text: "四月", value: 4 |
|
||||||
} |
|
||||||
}], [{ |
|
||||||
el: { |
|
||||||
text: "五月", value: 5 |
|
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
text: "六月", value: 6 |
|
||||||
} |
|
||||||
}], [{ |
|
||||||
el: { |
|
||||||
text: "七月", value: 7 |
|
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
text: "八月", value: 8 |
|
||||||
} |
|
||||||
}], [{ |
|
||||||
el: { |
|
||||||
text: "九月", value: 9 |
|
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
text: "十月", value: 10 |
|
||||||
} |
|
||||||
}], [{ |
|
||||||
el: { |
|
||||||
text: "十一月", value: 11 |
|
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
text: "十二月", value: 12 |
|
||||||
} |
|
||||||
}]], |
|
||||||
|
|
||||||
dynamic: [ |
props = { baseCls: "demo-func" }; |
||||||
|
years = [ |
||||||
|
{ text: "2010年", value: 2010, iconCls: "close-ha-font" }, |
||||||
|
{ text: "2011年", value: 2011 }, |
||||||
|
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
||||||
|
{ text: "2013年", value: 2013 }, |
||||||
|
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
||||||
|
{ text: "2015年", value: 2015, iconCls: "close-ha-font" }, |
||||||
|
{ text: "2016年", value: 2016, iconCls: "close-ha-font" }, |
||||||
|
{ text: "2017年", value: 2017, iconCls: "close-ha-font" } |
||||||
|
]; |
||||||
|
child = [ |
||||||
{ |
{ |
||||||
text: "2010年", value: 1 |
type: "bi.combo_group", |
||||||
}, { |
el: { |
||||||
text: "20112222年", value: 2 |
type: "bi.icon_text_icon_item", |
||||||
}, { |
text: "2010年", |
||||||
text: "201233333年", value: 3 |
value: 2010, |
||||||
}, { |
height: 25, |
||||||
text: "2013年", value: 4 |
iconCls1: "close-ha-font", |
||||||
}, { |
iconCls2: "close-ha-font", |
||||||
text: "2012324年", value: 5 |
}, |
||||||
}, { |
items: [ |
||||||
text: "2015年", value: 6 |
{ type: "bi.single_select_item", height: 25, text: "一月", value: 11 }, |
||||||
}, { |
{ |
||||||
text: "2016年", value: 7 |
type: "bi.icon_text_icon_item", |
||||||
}, { |
height: 25, |
||||||
text: "201744444444444444444444444444444444444年", value: 8 |
text: "二月", |
||||||
} |
value: 12, |
||||||
], |
iconCls1: "close-ha-font", |
||||||
|
iconCls2: "close-ha-font", |
||||||
|
children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }], |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
|
{ text: "2011年", value: 2011 }, |
||||||
|
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
||||||
|
{ text: "2013年", value: 2013 }, |
||||||
|
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
||||||
|
{ text: "2015年", value: 2015, iconCls: "close-ha-font" } |
||||||
|
]; |
||||||
|
months = [ |
||||||
|
[{ el: { text: "一月", value: 1 } }, { el: { text: "二月", value: 2 } }], |
||||||
|
[{ el: { text: "三月", value: 3 } }, { el: { text: "四月", value: 4 } }], |
||||||
|
[{ el: { text: "五月", value: 5 } }, { el: { text: "六月", value: 6 } }], |
||||||
|
[{ el: { text: "七月", value: 7 } }, { el: { text: "八月", value: 8 } }], |
||||||
|
[{ el: { text: "九月", value: 9 } }, { el: { text: "十月", value: 10 } }], |
||||||
|
[{ el: { text: "十一月", value: 11 } }, { el: { text: "十二月", value: 12 } }] |
||||||
|
]; |
||||||
|
dynamic = [ |
||||||
|
{ text: "2010年", value: 1 }, |
||||||
|
{ text: "20112222年", value: 2 }, |
||||||
|
{ text: "201233333年", value: 3 }, |
||||||
|
{ text: "2013年", value: 4 }, |
||||||
|
{ text: "2012324年", value: 5 }, |
||||||
|
{ text: "2015年", value: 6 }, |
||||||
|
{ text: "2016年", value: 7 }, |
||||||
|
{ text: "201744444444444444444444444444444444444年", value: 8 } |
||||||
|
]; |
||||||
|
week = [ |
||||||
|
{ text: "周一", value: 100, iconClsLeft: "close-ha-font", iconClsRight: "close-font" }, |
||||||
|
{ text: "周二", value: 101, iconClsLeft: "close-ha-font" }, |
||||||
|
{ text: "周三", value: 102 }, |
||||||
|
{ text: "周四", value: 103, iconClsRight: "close-ha-font" }, |
||||||
|
{ text: "周五", value: 104, iconClsLeft: "close-ha-font", iconClsRight: "close-font" }, |
||||||
|
{ text: "周六", value: 105, iconClsLeft: "close-font", iconClsRight: "close-ha-font" }, |
||||||
|
{ text: "周日", value: 106, iconClsLeft: "close-font" } |
||||||
|
]; |
||||||
|
|
||||||
week: [{ |
_createTop() { |
||||||
text: "周一", value: 100, iconClsLeft: "close-ha-font", iconClsRight: "close-font" |
const self = this; |
||||||
}, { |
|
||||||
text: "周二", value: 101, iconClsLeft: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "周三", value: 102 |
|
||||||
}, { |
|
||||||
text: "周四", value: 103, iconClsRight: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "周五", value: 104, iconClsLeft: "close-ha-font", iconClsRight: "close-font" |
|
||||||
}, { |
|
||||||
text: "周六", value: 105, iconClsLeft: "close-font", iconClsRight: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "周日", value: 106, iconClsLeft: "close-font" |
|
||||||
}], |
|
||||||
_createTop: function () { |
|
||||||
var self = this; |
|
||||||
|
|
||||||
var yearCombo = BI.createWidget({ |
const yearCombo = createWidget({ |
||||||
type: "bi.combo", |
type: "bi.combo", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "简单下拉框", |
text: "简单下拉框", |
||||||
height: 30 |
height: 30, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
el: { |
el: { |
||||||
type: "bi.button_group", |
type: "bi.button_group", |
||||||
items: BI.createItems(BI.deepClone(this.years), { |
items: createItems(deepClone(this.years), { |
||||||
type: "bi.single_select_radio_item", |
type: "bi.single_select_radio_item", |
||||||
height: 25, |
height: 25, |
||||||
handler: function (v) { |
handler(v) {}, |
||||||
|
|
||||||
} |
|
||||||
}), |
}), |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
} |
} |
||||||
|
], |
||||||
|
}, |
||||||
}, |
}, |
||||||
width: 200 |
width: 200, |
||||||
}); |
}); |
||||||
|
|
||||||
var multiCombo = BI.createWidget({ |
var multiCombo = createWidget({ |
||||||
type: "bi.combo", |
type: "bi.combo", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "多选下拉框", |
text: "多选下拉框", |
||||||
height: 30 |
height: 30, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
el: { |
el: { |
||||||
items: BI.createItems(BI.deepClone(this.years), { |
items: createItems(deepClone(this.years), { |
||||||
type: "bi.multi_select_item", |
type: "bi.multi_select_item", |
||||||
height: 25, |
height: 25, |
||||||
handler: function (v) { |
handler(v) {}, |
||||||
|
|
||||||
} |
|
||||||
}), |
}), |
||||||
chooseType: 1, |
chooseType: 1, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
|
} |
||||||
|
], |
||||||
}, |
}, |
||||||
tool: { |
tool: { |
||||||
type: "bi.label", |
type: "bi.label", |
||||||
text: "这是一个下拉框", |
text: "这是一个下拉框", |
||||||
height: 35 |
height: 35, |
||||||
}, |
}, |
||||||
tabs: [{ |
tabs: [ |
||||||
type: "bi.multi_select_bar", |
{ |
||||||
height: 25, |
type: "bi.multi_select_bar", |
||||||
text: "全选", |
height: 25, |
||||||
onCheck: function (v) { |
text: "全选", |
||||||
if (v) { |
onCheck(v) { |
||||||
multiCombo.setValue(BI.map(BI.deepClone(self.years), "value")); |
if (v) { |
||||||
} else { |
multiCombo.setValue(map(deepClone(self.years), "value")); |
||||||
|
} else { |
||||||
|
multiCombo.setValue([]); |
||||||
|
} |
||||||
|
}, |
||||||
|
isAllCheckedBySelectedValue(selectedValue) { |
||||||
|
return selectedValue.length == self.years.length; |
||||||
|
// return true;
|
||||||
|
}, |
||||||
|
} |
||||||
|
], |
||||||
|
buttons: [ |
||||||
|
{ |
||||||
|
type: "bi.text_button", |
||||||
|
text: "清空", |
||||||
|
handler() { |
||||||
multiCombo.setValue([]); |
multiCombo.setValue([]); |
||||||
} |
}, |
||||||
|
|
||||||
}, |
}, |
||||||
isAllCheckedBySelectedValue: function (selectedValue) { |
{ |
||||||
return selectedValue.length == self.years.length; |
type: "bi.text_button", |
||||||
// return true;
|
text: "确定", |
||||||
} |
handler() { |
||||||
}], |
Msg.alert("", multiCombo.getValue()); |
||||||
buttons: [{ |
}, |
||||||
type: "bi.text_button", |
|
||||||
text: "清空", |
|
||||||
handler: function () { |
|
||||||
multiCombo.setValue([]); |
|
||||||
} |
|
||||||
}, { |
|
||||||
type: "bi.text_button", |
|
||||||
text: "确定", |
|
||||||
handler: function () { |
|
||||||
BI.Msg.alert("", multiCombo.getValue()); |
|
||||||
} |
} |
||||||
}] |
], |
||||||
}, |
}, |
||||||
width: 200 |
width: 200, |
||||||
}); |
}); |
||||||
|
|
||||||
var dynamicPopupCombo = BI.createWidget({ |
const dynamicPopupCombo = createWidget({ |
||||||
type: "bi.combo", |
type: "bi.combo", |
||||||
isNeedAdjustWidth: false, |
isNeedAdjustWidth: false, |
||||||
offsetStyle: "center", |
offsetStyle: "center", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "动态调整宽度", |
text: "动态调整宽度", |
||||||
height: 30 |
height: 30, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
el: { |
el: { |
||||||
items: BI.createItems(BI.deepClone(this.dynamic), { |
items: createItems(deepClone(this.dynamic), { |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
height: 25 |
height: 25, |
||||||
}), |
}), |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
} |
} |
||||||
|
], |
||||||
|
}, |
||||||
}, |
}, |
||||||
width: 200 |
width: 200, |
||||||
}); |
}); |
||||||
|
|
||||||
var dynamicCombo = BI.createWidget({ |
var dynamicCombo = createWidget({ |
||||||
type: "bi.combo", |
type: "bi.combo", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "搜索", |
text: "搜索", |
||||||
height: 30 |
height: 30, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
el: { |
el: { |
||||||
type: "bi.loader", |
type: "bi.loader", |
||||||
logic: { |
logic: { |
||||||
dynamic: true, |
dynamic: true, |
||||||
scrolly: true |
scrolly: true, |
||||||
}, |
}, |
||||||
el: { |
el: { |
||||||
behaviors: { |
behaviors: { |
||||||
redmark: function () { |
redmark() { |
||||||
return true; |
return true; |
||||||
} |
}, |
||||||
}, |
}, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
|
} |
||||||
|
], |
||||||
}, |
}, |
||||||
itemsCreator: function (options, popuplate) { |
itemsCreator(options, popuplate) { |
||||||
var times = options.times; |
const times = options.times; |
||||||
BI.delay(function () { |
delay(() => { |
||||||
if (times == 3) { |
if (times == 3) { |
||||||
popuplate([{ |
popuplate([ |
||||||
type: "bi.single_select_item", |
{ |
||||||
text: "这是最后一个", |
type: "bi.single_select_item", |
||||||
value: "这是最后一个", |
text: "这是最后一个", |
||||||
py: "zszhyg", |
value: "这是最后一个", |
||||||
height: 25 |
py: "zszhyg", |
||||||
}]); |
height: 25, |
||||||
|
} |
||||||
|
]); |
||||||
|
|
||||||
return; |
return; |
||||||
} |
} |
||||||
|
|
||||||
var map = BI.map(BI.makeArray(3, null), function (i, v) { |
const map = map(makeArray(3, null), (i, v) => { |
||||||
var val = i + "_" + BI.random(1, 100); |
const val = `${i}_${random(1, 100)}`; |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
text: val, |
text: val, |
||||||
value: val, |
value: val, |
||||||
height: 25 |
height: 25, |
||||||
}; |
}; |
||||||
}); |
}); |
||||||
popuplate(map); |
popuplate(map); |
||||||
|
|
||||||
}, 1000); |
}, 1000); |
||||||
|
|
||||||
}, |
}, |
||||||
hasNext: function (options) { |
hasNext(options) { |
||||||
return options.times < 3; |
return options.times < 3; |
||||||
} |
}, |
||||||
}, |
}, |
||||||
buttons: [{ |
buttons: [ |
||||||
type: "bi.text_button", |
{ |
||||||
text: "清空", |
type: "bi.text_button", |
||||||
handler: function () { |
text: "清空", |
||||||
dynamicCombo.setValue([]); |
handler() { |
||||||
} |
dynamicCombo.setValue([]); |
||||||
}, { |
}, |
||||||
type: "bi.text_button", |
}, |
||||||
text: "确定", |
{ |
||||||
handler: function () { |
type: "bi.text_button", |
||||||
BI.Msg.alert("", dynamicCombo.getValue()); |
text: "确定", |
||||||
|
handler() { |
||||||
|
Msg.alert("", dynamicCombo.getValue()); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}, |
}, |
||||||
width: 200 |
width: 200, |
||||||
}); |
}); |
||||||
|
|
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
items: [yearCombo, multiCombo, dynamicPopupCombo, dynamicCombo], |
items: [yearCombo, multiCombo, dynamicPopupCombo, dynamicCombo], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_createBottom: function () { |
_createBottom() { |
||||||
var combo = BI.createWidget({ |
const combo = 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_group", |
type: "bi.button_group", |
||||||
items: BI.createItems(BI.deepClone(this.years), { |
items: createItems(deepClone(this.years), { |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
iconWidth: 25, |
iconWidth: 25, |
||||||
height: 25, |
height: 25, |
||||||
handler: function (v) { |
handler(v) {}, |
||||||
|
|
||||||
} |
|
||||||
}), |
}), |
||||||
chooseType: 1, |
chooseType: 1, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
} |
} |
||||||
|
], |
||||||
|
}, |
||||||
}, |
}, |
||||||
width: 200 |
width: 200, |
||||||
}); |
}); |
||||||
combo.setValue(BI.deepClone(this.years)[0].value); |
combo.setValue(deepClone(this.years)[0].value); |
||||||
|
|
||||||
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); |
||||||
|
|
||||||
var monthCombo = BI.createWidget({ |
const monthCombo = createWidget({ |
||||||
type: "bi.combo", |
type: "bi.combo", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "多层样式下拉框", |
text: "多层样式下拉框", |
||||||
height: 30 |
height: 30, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
el: { |
el: { |
||||||
items: BI.createItems(BI.deepClone(this.months), { |
items: createItems(deepClone(this.months), { |
||||||
type: "bi.single_select_item", |
type: "bi.single_select_item", |
||||||
cls: "button-combo", |
cls: "button-combo", |
||||||
handler: function (v) { |
handler(v) {}, |
||||||
|
|
||||||
} |
|
||||||
}), |
}), |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.adaptive", |
{ |
||||||
items: [{ |
type: "bi.adaptive", |
||||||
el: { |
items: [ |
||||||
type: "bi.table", |
{ |
||||||
columns: 2, |
el: { |
||||||
rows: 6, |
type: "bi.table", |
||||||
columnSize: [0.5, "fill"], |
columns: 2, |
||||||
rowSize: 30 |
rows: 6, |
||||||
}, |
columnSize: [0.5, "fill"], |
||||||
left: 4, |
rowSize: 30, |
||||||
right: 4, |
}, |
||||||
top: 2, |
left: 4, |
||||||
bottom: 2 |
right: 4, |
||||||
}] |
top: 2, |
||||||
}, { |
bottom: 2, |
||||||
type: "bi.absolute", |
} |
||||||
el: { left: 4, top: 2, right: 4, bottom: 2 } |
], |
||||||
}] |
}, |
||||||
} |
{ |
||||||
|
type: "bi.absolute", |
||||||
|
el: { left: 4, top: 2, right: 4, bottom: 2 }, |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
}, |
}, |
||||||
width: 200 |
width: 200, |
||||||
}); |
}); |
||||||
|
|
||||||
var yearCombo = BI.createWidget({ |
const yearCombo = createWidget({ |
||||||
type: "bi.combo", |
type: "bi.combo", |
||||||
el: { |
el: { |
||||||
type: "bi.button", |
type: "bi.button", |
||||||
text: "自定义控件", |
text: "自定义控件", |
||||||
height: 30 |
height: 30, |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
el: { |
el: { |
||||||
type: "bi.navigation", |
type: "bi.navigation", |
||||||
direction: "bottom", |
direction: "bottom", |
||||||
logic: { |
logic: { |
||||||
dynamic: true |
dynamic: true, |
||||||
}, |
}, |
||||||
tab: { |
tab: { |
||||||
height: 30, |
height: 30, |
||||||
items: [{ |
items: [ |
||||||
once: false, |
{ |
||||||
text: "后退", |
once: false, |
||||||
value: -1, |
text: "后退", |
||||||
cls: "mvc-button layout-bg3" |
value: -1, |
||||||
}, { |
cls: "mvc-button layout-bg3", |
||||||
once: false, |
}, |
||||||
text: "前进", |
{ |
||||||
value: 1, |
once: false, |
||||||
cls: "mvc-button layout-bg4" |
text: "前进", |
||||||
}] |
value: 1, |
||||||
|
cls: "mvc-button layout-bg4", |
||||||
|
} |
||||||
|
], |
||||||
}, |
}, |
||||||
cardCreator: function (v) { |
cardCreator(v) { |
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.text_button", |
type: "bi.text_button", |
||||||
whiteSpace: "normal", |
whiteSpace: "normal", |
||||||
text: new Date().getFullYear() + v |
text: new Date().getFullYear() + v, |
||||||
}); |
}); |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
width: 200 |
width: 200, |
||||||
}); |
}); |
||||||
|
|
||||||
return BI.createWidget({ |
return createWidget({ |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
items: [combo, childCombo, monthCombo, yearCombo], |
items: [combo, childCombo, monthCombo, yearCombo], |
||||||
hgap: 20, |
hgap: 20, |
||||||
vgap: 20 |
vgap: 20, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
columns: 1, |
columns: 1, |
||||||
rows: 2, |
rows: 2, |
||||||
items: [{ |
items: [ |
||||||
column: 0, |
{ |
||||||
row: 0, |
column: 0, |
||||||
el: this._createTop() |
row: 0, |
||||||
}, { |
el: this._createTop(), |
||||||
column: 0, |
}, |
||||||
row: 1, |
{ |
||||||
el: this._createBottom() |
column: 0, |
||||||
}] |
row: 1, |
||||||
|
el: this._createBottom(), |
||||||
|
} |
||||||
|
], |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("demo.combo", Demo.Func); |
|
||||||
|
|||||||
@ -1,89 +1,81 @@ |
|||||||
Demo.Func = BI.inherit(BI.Widget, { |
import { shortcut, Widget, createWidget, createItems, deepClone } from "@/core"; |
||||||
props: { |
|
||||||
baseCls: "demo-func" |
|
||||||
}, |
|
||||||
|
|
||||||
child: [{ |
@shortcut() |
||||||
type: "bi.combo_group", |
export class Func extends Widget { |
||||||
el: { |
static xtype = "demo.combo_group"; |
||||||
type: "bi.icon_text_icon_item", |
|
||||||
text: "2010年", |
props = { baseCls: "demo-func" }; |
||||||
value: 2010, |
child = [ |
||||||
height: 25, |
{ |
||||||
iconCls: "close-ha-font" |
type: "bi.combo_group", |
||||||
|
el: { type: "bi.icon_text_icon_item", text: "2010年", 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", |
||||||
|
height: 25, |
||||||
|
text: "二月", |
||||||
|
value: 12, |
||||||
|
iconCls1: "close-ha-font", |
||||||
|
iconCls2: "close-ha-font", |
||||||
|
children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }], |
||||||
|
} |
||||||
|
], |
||||||
}, |
}, |
||||||
items: [{ |
{ text: "2011年", value: 2011 }, |
||||||
type: "bi.single_select_item", |
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
||||||
height: 25, |
{ text: "2013年", value: 2013 }, |
||||||
text: "一月", |
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
||||||
value: 11 |
{ text: "2015年", value: 2015, iconCls: "close-ha-font" } |
||||||
}, { |
]; |
||||||
type: "bi.icon_text_icon_item", |
|
||||||
height: 25, |
|
||||||
text: "二月", |
|
||||||
value: 12, |
|
||||||
iconCls1: "close-ha-font", |
|
||||||
iconCls2: "close-ha-font", |
|
||||||
children: [{type: "bi.single_select_item", text: "一号", value: 101, height: 25}] |
|
||||||
}] |
|
||||||
}, { |
|
||||||
text: "2011年", value: 2011 |
|
||||||
}, { |
|
||||||
text: "2012年", value: 2012, iconCls: "close-ha-font" |
|
||||||
}, { |
|
||||||
text: "2013年", value: 2013 |
|
||||||
}, { |
|
||||||
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, |
{ |
||||||
row: 0, |
column: 0, |
||||||
el: this._createBottom() |
row: 0, |
||||||
}] |
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", |
{ |
||||||
el: { |
type: "bi.expander", |
||||||
type: "bi.icon_text_node", |
el: { |
||||||
cls: "pull-right-ha-font mvc-border", |
type: "bi.icon_text_node", |
||||||
height: 25, |
cls: "pull-right-ha-font mvc-border", |
||||||
text: "Expander" |
height: 25, |
||||||
}, |
text: "Expander", |
||||||
popup: { |
}, |
||||||
cls: "mvc-border", |
popup: { |
||||||
items: BI.createItems([{ |
cls: "mvc-border", |
||||||
text: "项目1", |
items: createItems( |
||||||
value: 1 |
[ |
||||||
}, { |
{ |
||||||
text: "项目2", |
text: "项目1", |
||||||
value: 2 |
value: 1, |
||||||
}, { |
}, |
||||||
text: "项目3", |
{ |
||||||
value: 3 |
text: "项目2", |
||||||
}, { |
value: 2, |
||||||
text: "项目4", |
}, |
||||||
value: 4 |
{ |
||||||
}], { |
text: "项目3", |
||||||
type: "bi.single_select_item", |
value: 3, |
||||||
height: 25 |
}, |
||||||
}) |
{ |
||||||
|
text: "项目4", |
||||||
|
value: 4, |
||||||
|
} |
||||||
|
], |
||||||
|
{ |
||||||
|
type: "bi.single_select_item", |
||||||
|
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) => |
||||||
type: "bi.single_select_item", |
extend(v, { |
||||||
height: 25 |
type: "bi.single_select_item", |
||||||
}); |
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, |
{ |
||||||
text: "后退", |
once: false, |
||||||
value: -1, |
text: "后退", |
||||||
cls: "mvc-button layout-bg3" |
value: -1, |
||||||
}, { |
cls: "mvc-button layout-bg3", |
||||||
once: false, |
}, |
||||||
text: "前进", |
{ |
||||||
value: 1, |
once: false, |
||||||
cls: "mvc-button layout-bg4" |
text: "前进", |
||||||
}] |
value: 1, |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
_createItems: function (items) { |
@shortcut() |
||||||
return BI.createItems(items, { |
export class Func extends Widget { |
||||||
|
static xtype = "demo.searcher"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
_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, |
{ |
||||||
top: 50, |
el: adapter, |
||||||
left: 50, |
top: 50, |
||||||
width: 200, |
left: 50, |
||||||
height: 100 |
width: 200, |
||||||
}] |
height: 100, |
||||||
|
} |
||||||
|
], |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.absolute", |
type: "bi.absolute", |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
el: { |
{ |
||||||
type: "bi.absolute", |
el: { |
||||||
width: 200, |
type: "bi.absolute", |
||||||
height: 30, |
width: 200, |
||||||
items: [{ |
height: 30, |
||||||
el: { |
items: [ |
||||||
type: "bi.searcher", |
{ |
||||||
adapter: adapter, |
el: { |
||||||
width: 200, |
type: "bi.searcher", |
||||||
height: 30 |
adapter, |
||||||
}, |
width: 200, |
||||||
left: 0, |
height: 30, |
||||||
right: 0, |
}, |
||||||
top: 0, |
left: 0, |
||||||
bottom: 0 |
right: 0, |
||||||
}] |
top: 0, |
||||||
}, |
bottom: 0, |
||||||
top: 100, |
} |
||||||
left: 300 |
], |
||||||
}] |
}, |
||||||
|
top: 100, |
||||||
|
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" |
|
||||||
}, |
|
||||||
render: function () { |
|
||||||
|
|
||||||
var adapter = BI.createWidget({ |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.switcher"; |
||||||
|
|
||||||
|
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, |
{ |
||||||
top: 50, |
el: adapter, |
||||||
left: 20, |
top: 50, |
||||||
width: 200, |
left: 20, |
||||||
height: 300 |
width: 200, |
||||||
}] |
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", |
{ |
||||||
el: { |
type: "bi.switcher", |
||||||
type: "bi.button", |
el: { |
||||||
height: 25, |
type: "bi.button", |
||||||
text: "Switcher" |
height: 25, |
||||||
}, |
text: "Switcher", |
||||||
popup: { |
}, |
||||||
cls: "mvc-border layout-bg5", |
popup: { |
||||||
items: BI.createItems([{ |
cls: "mvc-border layout-bg5", |
||||||
text: "项目1", |
items: createItems( |
||||||
value: 1 |
[ |
||||||
}, { |
{ |
||||||
text: "项目2", |
text: "项目1", |
||||||
value: 2 |
value: 1, |
||||||
}, { |
}, |
||||||
text: "项目3", |
{ |
||||||
value: 3 |
text: "项目2", |
||||||
}, { |
value: 2, |
||||||
text: "项目4", |
}, |
||||||
value: 4 |
{ |
||||||
}], { |
text: "项目3", |
||||||
type: "bi.single_select_item", |
value: 3, |
||||||
height: 25 |
}, |
||||||
}) |
{ |
||||||
}, |
text: "项目4", |
||||||
adapter: adapter |
value: 4, |
||||||
}] |
} |
||||||
|
], |
||||||
|
{ |
||||||
|
type: "bi.single_select_item", |
||||||
|
height: 25, |
||||||
|
} |
||||||
|
), |
||||||
|
}, |
||||||
|
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" |
|
||||||
}, |
|
||||||
|
|
||||||
_createTabs: function (v) { |
@shortcut() |
||||||
|
export class Func extends Widget { |
||||||
|
static xtype = "demo.tab"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
_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", |
{ |
||||||
value: 1, |
text: "Tab1", |
||||||
width: 50, |
value: 1, |
||||||
cls: "mvc-button layout-bg3" |
width: 50, |
||||||
}, { |
cls: "mvc-button layout-bg3", |
||||||
text: "Tab2", |
}, |
||||||
value: 2, |
{ |
||||||
width: 50, |
text: "Tab2", |
||||||
cls: "mvc-button layout-bg4" |
value: 2, |
||||||
}], |
width: 50, |
||||||
layouts: [{ |
cls: "mvc-button layout-bg4", |
||||||
type: "bi.center_adapt", |
} |
||||||
items: [{ |
], |
||||||
el: { |
layouts: [ |
||||||
type: "bi.horizontal", |
{ |
||||||
width: 100 |
type: "bi.center_adapt", |
||||||
} |
items: [ |
||||||
}] |
{ |
||||||
}] |
el: { |
||||||
|
type: "bi.horizontal", |
||||||
|
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, |
{ |
||||||
left: 200, |
el: this.tab, |
||||||
top: 200 |
left: 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", |
{ |
||||||
ref: function (_ref) { |
type: "bi.button_group", |
||||||
ref = _ref; |
ref(_ref) { |
||||||
}, |
ref = _ref; |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE, |
|
||||||
layouts: [{ |
|
||||||
type: "bi.vertical", |
|
||||||
items: [{ |
|
||||||
type: "bi.vtape", |
|
||||||
height: 200 |
|
||||||
}] |
|
||||||
}], |
|
||||||
items: [{ |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)" |
|
||||||
}, |
}, |
||||||
height: 150 |
chooseType: ButtonGroup.CHOOSE_TYPE_NONE, |
||||||
}, { |
layouts: [ |
||||||
el: { |
{ |
||||||
type: "bi.button", |
type: "bi.vertical", |
||||||
text: "1" |
items: [ |
||||||
} |
{ |
||||||
}] |
type: "bi.vtape", |
||||||
}, { |
height: 200, |
||||||
type: "bi.button", |
} |
||||||
text: "populate", |
], |
||||||
handler: function () { |
} |
||||||
ref.populate([{ |
], |
||||||
el: { |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
text: "1" |
el: { |
||||||
}, |
type: "bi.label", |
||||||
height: 50 |
text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)", |
||||||
}, { |
}, |
||||||
el: { |
height: 150, |
||||||
type: "bi.button", |
|
||||||
text: "2" |
|
||||||
}, |
}, |
||||||
height: 50 |
{ |
||||||
}, { |
el: { |
||||||
el: { |
type: "bi.button", |
||||||
type: "bi.label", |
text: "1", |
||||||
text: "3" |
}, |
||||||
} |
} |
||||||
}]); |
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "populate", |
||||||
|
handler() { |
||||||
|
ref.populate([ |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "1", |
||||||
|
}, |
||||||
|
height: 50, |
||||||
|
}, |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.button", |
||||||
|
text: "2", |
||||||
|
}, |
||||||
|
height: 50, |
||||||
|
}, |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
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", |
||||||
type: "bi.label", |
} |
||||||
text: "0", |
], |
||||||
value: 0 |
items: [ |
||||||
}, { |
{ |
||||||
type: "bi.button", |
type: "bi.label", |
||||||
text: "1", |
text: "0", |
||||||
value: 1 |
value: 0, |
||||||
}] |
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "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, |
{ |
||||||
left: 10, |
el: grid, |
||||||
right: 10, |
left: 10, |
||||||
top: 10, |
right: 10, |
||||||
bottom: 10 |
top: 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: { |
{ |
||||||
type: "bi.grid", |
el: { |
||||||
columns: 1, |
type: "bi.grid", |
||||||
rows: 1, |
columns: 1, |
||||||
items: [{ |
rows: 1, |
||||||
column: 0, |
items: [ |
||||||
row: 0, |
{ |
||||||
el: grid |
column: 0, |
||||||
}] |
row: 0, |
||||||
}, |
el: grid, |
||||||
left: 10, |
} |
||||||
right: 10, |
], |
||||||
top: 10, |
}, |
||||||
bottom: 10 |
left: 10, |
||||||
}] |
right: 10, |
||||||
|
top: 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" |
|
||||||
}, |
|
||||||
|
|
||||||
_createItems: function () { |
@shortcut() |
||||||
var items = BI.map(BI.range(1000), function (i) { |
export class Func extends Widget { |
||||||
|
static xtype = "demo.virtual_group"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-func" }; |
||||||
|
|
||||||
|
_createItems() { |
||||||
|
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", |
{ |
||||||
cls: "layout-bg5", |
type: "bi.label", |
||||||
height: 50, |
cls: "layout-bg5", |
||||||
text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出" |
height: 50, |
||||||
}, { |
text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出", |
||||||
type: "bi.button_group", |
|
||||||
width: 500, |
|
||||||
height: 300, |
|
||||||
ref: function () { |
|
||||||
self.buttonGroup = this; |
|
||||||
}, |
}, |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
{ |
||||||
layouts: [{ |
type: "bi.button_group", |
||||||
type: "bi.vertical" |
width: 500, |
||||||
}], |
height: 300, |
||||||
items: this._createItems() |
ref() { |
||||||
}, { |
self.buttonGroup = this; |
||||||
type: "bi.button", |
}, |
||||||
text: "演示button_group的刷新", |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
handler: function () { |
layouts: [ |
||||||
buttonGroupItems.shift(); |
{ |
||||||
self.buttonGroup.populate(BI.deepClone(buttonGroupItems)); |
type: "bi.vertical", |
||||||
} |
} |
||||||
}, { |
], |
||||||
type: "bi.virtual_group", |
items: this._createItems(), |
||||||
width: 500, |
}, |
||||||
height: 300, |
{ |
||||||
ref: function () { |
type: "bi.button", |
||||||
self.virtualGroup = this; |
text: "演示button_group的刷新", |
||||||
|
handler() { |
||||||
|
buttonGroupItems.shift(); |
||||||
|
self.buttonGroup.populate(deepClone(buttonGroupItems)); |
||||||
|
}, |
||||||
}, |
}, |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
{ |
||||||
layouts: [{ |
type: "bi.virtual_group", |
||||||
type: "bi.vertical" |
width: 500, |
||||||
}], |
height: 300, |
||||||
items: this._createItems() |
ref() { |
||||||
}, { |
self.virtualGroup = this; |
||||||
type: "bi.button", |
}, |
||||||
text: "演示virtual_group的刷新", |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
handler: function () { |
layouts: [ |
||||||
virtualGroupItems.shift(); |
{ |
||||||
self.virtualGroup.populate(BI.deepClone(virtualGroupItems)); |
type: "bi.vertical", |
||||||
|
} |
||||||
|
], |
||||||
|
items: this._createItems(), |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "演示virtual_group的刷新", |
||||||
|
handler() { |
||||||
|
virtualGroupItems.shift(); |
||||||
|
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: { |
{ |
||||||
type: "bi.label", |
el: { |
||||||
text: "绝对布局", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "绝对布局", |
||||||
width: 300, |
cls: "layout-bg1", |
||||||
height: 200 |
width: 300, |
||||||
}, |
height: 200, |
||||||
left: 100, |
}, |
||||||
top: 100 |
left: 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", |
{ |
||||||
text: "其实是一个grid嵌套absolute的实现", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "其实是一个grid嵌套absolute的实现", |
||||||
whiteSpace: "normal" |
cls: "layout-bg1", |
||||||
}, { |
whiteSpace: "normal", |
||||||
type: "bi.label", |
}, |
||||||
text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal", |
{ |
||||||
cls: "layout-bg2", |
type: "bi.label", |
||||||
whiteSpace: "normal" |
text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal", |
||||||
}, { |
cls: "layout-bg2", |
||||||
type: "bi.label", |
whiteSpace: "normal", |
||||||
text: "Center 3", |
}, |
||||||
cls: "layout-bg3" |
{ |
||||||
}, { |
type: "bi.label", |
||||||
type: "bi.label", |
text: "Center 3", |
||||||
text: "Center 4", |
cls: "layout-bg3", |
||||||
cls: "layout-bg5" |
}, |
||||||
}], |
{ |
||||||
|
type: "bi.label", |
||||||
|
text: "Center 4", |
||||||
|
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", |
{ |
||||||
text: "水平垂直居中", |
type: "bi.label", |
||||||
width: 300, |
text: "水平垂直居中", |
||||||
height: 200, |
width: 300, |
||||||
cls: "layout-bg1" |
height: 200, |
||||||
}] |
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", |
{ |
||||||
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
||||||
whiteSpace: "normal" |
cls: "layout-bg1", |
||||||
}, { |
whiteSpace: "normal", |
||||||
type: "bi.label", |
}, |
||||||
text: "浮动式的中间布局", |
{ |
||||||
cls: "layout-bg2", |
type: "bi.label", |
||||||
whiteSpace: "normal" |
text: "浮动式的中间布局", |
||||||
}], |
cls: "layout-bg2", |
||||||
|
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", |
{ |
||||||
items: [{ |
type: "bi.left", |
||||||
type: "bi.label", |
items: [ |
||||||
height: 30, |
{ |
||||||
text: "Left-1", |
type: "bi.label", |
||||||
cls: "layout-bg1" |
height: 30, |
||||||
|
text: "Left-1", |
||||||
}, { |
cls: "layout-bg1", |
||||||
type: "bi.label", |
}, |
||||||
height: 30, |
{ |
||||||
text: "Left-2", |
type: "bi.label", |
||||||
cls: "layout-bg2" |
height: 30, |
||||||
|
text: "Left-2", |
||||||
}, { |
cls: "layout-bg2", |
||||||
type: "bi.label", |
}, |
||||||
height: 30, |
{ |
||||||
text: "Left-3", |
type: "bi.label", |
||||||
cls: "layout-bg3" |
height: 30, |
||||||
|
text: "Left-3", |
||||||
}, { |
cls: "layout-bg3", |
||||||
type: "bi.label", |
}, |
||||||
height: 30, |
{ |
||||||
text: "Left-4", |
type: "bi.label", |
||||||
cls: "layout-bg4" |
height: 30, |
||||||
|
text: "Left-4", |
||||||
}, { |
cls: "layout-bg4", |
||||||
type: "bi.label", |
}, |
||||||
height: 30, |
{ |
||||||
text: "Left-5", |
type: "bi.label", |
||||||
cls: "layout-bg5" |
height: 30, |
||||||
|
text: "Left-5", |
||||||
}], |
cls: "layout-bg5", |
||||||
hgap: 20 |
} |
||||||
}, { |
], |
||||||
type: "bi.right", |
hgap: 20, |
||||||
hgap: 20, |
}, |
||||||
items: [{ |
{ |
||||||
type: "bi.label", |
type: "bi.right", |
||||||
height: 30, |
hgap: 20, |
||||||
text: "Right-1", |
items: [ |
||||||
cls: "layout-bg1" |
{ |
||||||
|
type: "bi.label", |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
text: "Right-1", |
||||||
height: 30, |
cls: "layout-bg1", |
||||||
text: "Right-2", |
}, |
||||||
cls: "layout-bg2" |
{ |
||||||
|
type: "bi.label", |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
text: "Right-2", |
||||||
height: 30, |
cls: "layout-bg2", |
||||||
text: "Right-3", |
}, |
||||||
cls: "layout-bg3" |
{ |
||||||
|
type: "bi.label", |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
text: "Right-3", |
||||||
height: 30, |
cls: "layout-bg3", |
||||||
text: "Right-4", |
}, |
||||||
cls: "layout-bg4" |
{ |
||||||
|
type: "bi.label", |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
text: "Right-4", |
||||||
height: 30, |
cls: "layout-bg4", |
||||||
text: "Right-5", |
}, |
||||||
cls: "layout-bg5" |
{ |
||||||
|
type: "bi.label", |
||||||
}], |
height: 30, |
||||||
vgap: 20 |
text: "Right-5", |
||||||
}] |
cls: "layout-bg5", |
||||||
|
} |
||||||
|
], |
||||||
|
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, |
{ |
||||||
row: 0, |
column: 0, |
||||||
el: { |
row: 0, |
||||||
type: "bi.label", |
el: { |
||||||
text: "column-0, row-0", |
type: "bi.label", |
||||||
cls: "layout-bg1" |
text: "column-0, row-0", |
||||||
|
cls: "layout-bg1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 1, |
||||||
|
row: 0, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-1, row-0", |
||||||
|
cls: "layout-bg2", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 2, |
||||||
|
row: 0, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-2, row-0", |
||||||
|
cls: "layout-bg6", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 3, |
||||||
|
row: 0, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-3, row-0", |
||||||
|
cls: "layout-bg3", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 4, |
||||||
|
row: 0, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-4, row-0", |
||||||
|
cls: "layout-bg4", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 0, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-0, row-1", |
||||||
|
cls: "layout-bg5", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 1, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-1, row-1", |
||||||
|
cls: "layout-bg6", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 2, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-2, row-1", |
||||||
|
cls: "layout-bg7", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 3, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-3, row-1", |
||||||
|
cls: "layout-bg1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 4, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-4, row-1", |
||||||
|
cls: "layout-bg3", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 0, |
||||||
|
row: 2, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-0, row-2", |
||||||
|
cls: "layout-bg2", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 1, |
||||||
|
row: 2, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-1, row-2", |
||||||
|
cls: "layout-bg3", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 2, |
||||||
|
row: 2, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-2, row-2", |
||||||
|
cls: "layout-bg4", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 3, |
||||||
|
row: 2, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-3, row-2", |
||||||
|
cls: "layout-bg5", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
column: 4, |
||||||
|
row: 2, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-4, row-2", |
||||||
|
cls: "layout-bg6", |
||||||
|
}, |
||||||
} |
} |
||||||
}, { |
], |
||||||
column: 1, |
|
||||||
row: 0, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-1, row-0", |
|
||||||
cls: "layout-bg2" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 2, |
|
||||||
row: 0, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-2, row-0", |
|
||||||
cls: "layout-bg6" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 3, |
|
||||||
row: 0, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-3, row-0", |
|
||||||
cls: "layout-bg3" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 4, |
|
||||||
row: 0, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-4, row-0", |
|
||||||
cls: "layout-bg4" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 0, |
|
||||||
row: 1, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-0, row-1", |
|
||||||
cls: "layout-bg5" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 1, |
|
||||||
row: 1, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-1, row-1", |
|
||||||
cls: "layout-bg6" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 2, |
|
||||||
row: 1, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-2, row-1", |
|
||||||
cls: "layout-bg7" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 3, |
|
||||||
row: 1, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-3, row-1", |
|
||||||
cls: "layout-bg1" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 4, |
|
||||||
row: 1, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-4, row-1", |
|
||||||
cls: "layout-bg3" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 0, |
|
||||||
row: 2, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-0, row-2", |
|
||||||
cls: "layout-bg2" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 1, |
|
||||||
row: 2, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-1, row-2", |
|
||||||
cls: "layout-bg3" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 2, |
|
||||||
row: 2, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-2, row-2", |
|
||||||
cls: "layout-bg4" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 3, |
|
||||||
row: 2, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-3, row-2", |
|
||||||
cls: "layout-bg5" |
|
||||||
} |
|
||||||
}, { |
|
||||||
column: 4, |
|
||||||
row: 2, |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "column-4, row-2", |
|
||||||
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", |
{ |
||||||
height: 150, |
type: "bi.horizontal", |
||||||
hgap: 10, |
height: 150, |
||||||
items: [{ |
hgap: 10, |
||||||
type: "bi.label", |
items: [ |
||||||
whiteSpace: "normal", |
{ |
||||||
text: "因为大多数场景下都需要垂直居中，所以这个布局一般会被vertical_adapt布局设置scrollx=true取代", |
type: "bi.label", |
||||||
cls: "layout-bg3", |
whiteSpace: "normal", |
||||||
width: 500, |
text: "因为大多数场景下都需要垂直居中，所以这个布局一般会被vertical_adapt布局设置scrollx=true取代", |
||||||
height: 50 |
cls: "layout-bg3", |
||||||
}, { |
width: 500, |
||||||
type: "bi.label", |
height: 50, |
||||||
text: "水平布局", |
}, |
||||||
cls: "layout-bg4", |
{ |
||||||
width: 300, |
type: "bi.label", |
||||||
height: 30 |
text: "水平布局", |
||||||
}, { |
cls: "layout-bg4", |
||||||
type: "bi.label", |
width: 300, |
||||||
text: "水平布局", |
height: 30, |
||||||
cls: "layout-bg5", |
}, |
||||||
width: 300, |
{ |
||||||
height: 30 |
type: "bi.label", |
||||||
}, { |
text: "水平布局", |
||||||
type: "bi.label", |
cls: "layout-bg5", |
||||||
text: "水平布局", |
width: 300, |
||||||
cls: "layout-bg6", |
height: 30, |
||||||
width: 300, |
}, |
||||||
height: 30 |
{ |
||||||
}] |
type: "bi.label", |
||||||
}, { |
text: "水平布局", |
||||||
type: "bi.layout", |
cls: "layout-bg6", |
||||||
height: 1, |
width: 300, |
||||||
cls: "bi-border-bottom bi-high-light-border" |
height: 30, |
||||||
}, { |
} |
||||||
type: "bi.horizontal", |
], |
||||||
height: 150, |
}, |
||||||
verticalAlign: BI.VerticalAlign.Middle, |
{ |
||||||
horizontalAlign: BI.HorizontalAlign.Left, |
type: "bi.layout", |
||||||
vgap: 10, |
height: 1, |
||||||
items: [{ |
cls: "bi-border-bottom bi-high-light-border", |
||||||
type: "bi.label", |
}, |
||||||
text: "以horizontal实现的vertical_adapt垂直居中", |
{ |
||||||
cls: "layout-bg1", |
type: "bi.horizontal", |
||||||
width: 300, |
height: 150, |
||||||
height: 30 |
verticalAlign: BI.VerticalAlign.Middle, |
||||||
}, { |
horizontalAlign: BI.HorizontalAlign.Left, |
||||||
type: "bi.label", |
vgap: 10, |
||||||
text: "以horizontal实现的vertical_adapt垂直居中", |
items: [ |
||||||
cls: "layout-bg2", |
{ |
||||||
width: 300, |
type: "bi.label", |
||||||
height: 30 |
text: "以horizontal实现的vertical_adapt垂直居中", |
||||||
}] |
cls: "layout-bg1", |
||||||
}, { |
width: 300, |
||||||
type: "bi.layout", |
height: 30, |
||||||
height: 1, |
}, |
||||||
cls: "bi-border-bottom bi-high-light-border" |
{ |
||||||
}, { |
type: "bi.label", |
||||||
type: "bi.horizontal", |
text: "以horizontal实现的vertical_adapt垂直居中", |
||||||
height: 150, |
cls: "layout-bg2", |
||||||
verticalAlign: BI.VerticalAlign.Top, |
width: 300, |
||||||
horizontalAlign: BI.HorizontalAlign.Center, |
height: 30, |
||||||
items: [{ |
} |
||||||
type: "bi.label", |
], |
||||||
text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)", |
}, |
||||||
cls: "layout-bg1", |
{ |
||||||
width: 300, |
type: "bi.layout", |
||||||
height: 30 |
height: 1, |
||||||
}] |
cls: "bi-border-bottom bi-high-light-border", |
||||||
}, { |
}, |
||||||
type: "bi.layout", |
{ |
||||||
height: 1, |
type: "bi.horizontal", |
||||||
cls: "bi-border-bottom bi-high-light-border" |
height: 150, |
||||||
}, { |
verticalAlign: BI.VerticalAlign.Top, |
||||||
type: "bi.horizontal", |
horizontalAlign: BI.HorizontalAlign.Center, |
||||||
height: 150, |
items: [ |
||||||
verticalAlign: BI.VerticalAlign.Top, |
{ |
||||||
horizontalAlign: BI.HorizontalAlign.Center, |
type: "bi.label", |
||||||
columnSize: [300, "fill"], |
text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)", |
||||||
items: [{ |
cls: "layout-bg1", |
||||||
type: "bi.label", |
width: 300, |
||||||
text: "以horizontal代替horizontal_adapt实现的用于水平适应布局", |
height: 30, |
||||||
cls: "layout-bg1", |
} |
||||||
height: 30 |
], |
||||||
}, { |
}, |
||||||
type: "bi.label", |
{ |
||||||
text: "以horizontal代替horizontal_adapt实现的水平自适应列", |
type: "bi.layout", |
||||||
cls: "layout-bg2", |
height: 1, |
||||||
height: 30 |
cls: "bi-border-bottom bi-high-light-border", |
||||||
}] |
}, |
||||||
}, { |
{ |
||||||
type: "bi.layout", |
type: "bi.horizontal", |
||||||
height: 1, |
height: 150, |
||||||
cls: "bi-border-bottom bi-high-light-border" |
verticalAlign: BI.VerticalAlign.Top, |
||||||
}, { |
horizontalAlign: BI.HorizontalAlign.Center, |
||||||
type: "bi.center_adapt", |
columnSize: [300, "fill"], |
||||||
height: 150, |
items: [ |
||||||
verticalAlign: BI.VerticalAlign.Middle, |
{ |
||||||
horizontalAlign: BI.HorizontalAlign.Center, |
type: "bi.label", |
||||||
items: [{ |
text: "以horizontal代替horizontal_adapt实现的用于水平适应布局", |
||||||
type: "bi.label", |
cls: "layout-bg1", |
||||||
text: "以horizontal代替center_adapt实现的水平垂直居中", |
height: 30, |
||||||
width: 300, |
}, |
||||||
height: 100, |
{ |
||||||
cls: "layout-bg1" |
type: "bi.label", |
||||||
}] |
text: "以horizontal代替horizontal_adapt实现的水平自适应列", |
||||||
}, { |
cls: "layout-bg2", |
||||||
type: "bi.layout", |
height: 30, |
||||||
height: 1, |
} |
||||||
cls: "bi-border-bottom bi-high-light-border" |
], |
||||||
}] |
}, |
||||||
|
{ |
||||||
|
type: "bi.layout", |
||||||
|
height: 1, |
||||||
|
cls: "bi-border-bottom bi-high-light-border", |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.center_adapt", |
||||||
|
height: 150, |
||||||
|
verticalAlign: BI.VerticalAlign.Middle, |
||||||
|
horizontalAlign: BI.HorizontalAlign.Center, |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
type: "bi.label", |
||||||
|
text: "以horizontal代替center_adapt实现的水平垂直居中", |
||||||
|
width: 300, |
||||||
|
height: 100, |
||||||
|
cls: "layout-bg1", |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.layout", |
||||||
|
height: 1, |
||||||
|
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. |
|
||||||
*/ |
|
||||||
Demo.HorizontalAdapt = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "demo-horizontal-adapt" |
|
||||||
}, |
|
||||||
|
|
||||||
_createLayout: function () { |
@shortcut() |
||||||
return BI.createWidget({ |
export class HorizontalAdapt extends Widget { |
||||||
|
static xtype = "demo.horizontal_adapt"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-horizontal-adapt" }; |
||||||
|
|
||||||
|
_createLayout() { |
||||||
|
return createWidget({ |
||||||
type: "bi.horizontal_adapt", |
type: "bi.horizontal_adapt", |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
text: "例子1:可用做水平居中", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "例子1:可用做水平居中", |
||||||
width: 300, |
cls: "layout-bg1", |
||||||
height: 30 |
width: 300, |
||||||
}] |
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", |
{ |
||||||
text: "例子2:用于水平适应布局", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "例子2:用于水平适应布局", |
||||||
height: 30 |
cls: "layout-bg1", |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
}, |
||||||
text: "水平自适应列", |
{ |
||||||
cls: "layout-bg2", |
type: "bi.label", |
||||||
height: 30 |
text: "水平自适应列", |
||||||
}] |
cls: "layout-bg2", |
||||||
|
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, |
{ |
||||||
row: 0, |
column: 0, |
||||||
el: this._createLayout() |
row: 0, |
||||||
}, { |
el: this._createLayout(), |
||||||
column: 0, |
}, |
||||||
row: 1, |
{ |
||||||
el: this._createAdaptLayout() |
column: 0, |
||||||
}] |
row: 1, |
||||||
|
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. |
|
||||||
*/ |
|
||||||
Demo.HorizontalAuto = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "demo-horizontal-auto" |
|
||||||
}, |
|
||||||
|
|
||||||
_createLayout: function () { |
@shortcut() |
||||||
return BI.createWidget({ |
export class HorizontalAuto extends Widget { |
||||||
|
static xtype = "demo.horizontal_auto"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-horizontal-auto" }; |
||||||
|
|
||||||
|
_createLayout() { |
||||||
|
return createWidget({ |
||||||
type: "bi.horizontal_auto", |
type: "bi.horizontal_auto", |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
text: "水平居中", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "水平居中", |
||||||
width: 300, |
cls: "layout-bg1", |
||||||
height: 30 |
width: 300, |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
}, |
||||||
text: "水平居中优先使用该布局", |
{ |
||||||
cls: "layout-bg2", |
type: "bi.label", |
||||||
width: 300, |
text: "水平居中优先使用该布局", |
||||||
height: 30 |
cls: "layout-bg2", |
||||||
}] |
width: 300, |
||||||
|
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, |
{ |
||||||
row: 0, |
column: 0, |
||||||
el: this._createLayout() |
row: 0, |
||||||
}] |
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", |
{ |
||||||
text: "浮动式水平居中布局方案，用于宽度未知的情况", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "浮动式水平居中布局方案，用于宽度未知的情况", |
||||||
height: 30 |
cls: "layout-bg1", |
||||||
}] |
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", |
{ |
||||||
text: "左边的垂直居中", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "左边的垂直居中", |
||||||
width: 100, |
cls: "layout-bg1", |
||||||
height: 30 |
width: 100, |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
}, |
||||||
text: "左边的垂直居中", |
{ |
||||||
cls: "layout-bg2", |
type: "bi.label", |
||||||
width: 100, |
text: "左边的垂直居中", |
||||||
height: 30 |
cls: "layout-bg2", |
||||||
}], |
width: 100, |
||||||
right: [{ |
height: 30, |
||||||
type: "bi.label", |
} |
||||||
text: "右边的垂直居中", |
], |
||||||
cls: "layout-bg1", |
right: [ |
||||||
width: 100, |
{ |
||||||
height: 30 |
type: "bi.label", |
||||||
}, { |
text: "右边的垂直居中", |
||||||
type: "bi.label", |
cls: "layout-bg1", |
||||||
text: "右边的垂直居中", |
width: 100, |
||||||
cls: "layout-bg2", |
height: 30, |
||||||
width: 100, |
}, |
||||||
height: 30 |
{ |
||||||
}] |
type: "bi.label", |
||||||
} |
text: "右边的垂直居中", |
||||||
|
cls: "layout-bg2", |
||||||
|
width: 100, |
||||||
|
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", |
{ |
||||||
columnSize: [100, 100, ""], |
type: "bi.td", |
||||||
items: BI.createItems([ |
columnSize: [100, 100, ""], |
||||||
[{ |
items: createItems( |
||||||
el: { |
[ |
||||||
type: "bi.label", |
[ |
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
{ |
||||||
cls: "layout-bg1" |
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
|
cls: "layout-bg1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
|
cls: "layout-bg2", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
|
cls: "layout-bg3", |
||||||
|
}, |
||||||
|
} |
||||||
|
], |
||||||
|
[ |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
|
cls: "layout-bg5", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
|
cls: "layout-bg6", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
||||||
|
cls: "layout-bg7", |
||||||
|
}, |
||||||
|
} |
||||||
|
] |
||||||
|
], |
||||||
|
{ |
||||||
|
whiteSpace: "normal", |
||||||
} |
} |
||||||
}, { |
), |
||||||
el: { |
} |
||||||
type: "bi.label", |
], |
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
|
||||||
cls: "layout-bg2" |
|
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
|
||||||
cls: "layout-bg3" |
|
||||||
} |
|
||||||
}], [{ |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
|
||||||
cls: "layout-bg5" |
|
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
|
||||||
cls: "layout-bg6" |
|
||||||
} |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", |
|
||||||
cls: "layout-bg7" |
|
||||||
} |
|
||||||
}] |
|
||||||
], { |
|
||||||
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", |
{ |
||||||
cls: "layout-bg3", |
type: "bi.label", |
||||||
text: "垂直布局", |
cls: "layout-bg3", |
||||||
height: 30 |
text: "垂直布局", |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
}, |
||||||
cls: "layout-bg4", |
{ |
||||||
text: "垂直布局", |
type: "bi.label", |
||||||
height: 30 |
cls: "layout-bg4", |
||||||
}] |
text: "垂直布局", |
||||||
|
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. |
|
||||||
*/ |
|
||||||
Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "demo-vertical-adapt" |
|
||||||
}, |
|
||||||
|
|
||||||
_createLayout: function () { |
@shortcut() |
||||||
return BI.createWidget({ |
export class VerticalAdaptLayout extends Widget { |
||||||
|
static xtype = "demo.vertical_adapt"; |
||||||
|
|
||||||
|
props = { baseCls: "demo-vertical-adapt" }; |
||||||
|
|
||||||
|
_createLayout() { |
||||||
|
return createWidget({ |
||||||
type: "bi.vertical_adapt", |
type: "bi.vertical_adapt", |
||||||
vgap: 10, |
vgap: 10, |
||||||
items: [{ |
items: [ |
||||||
type: "bi.label", |
{ |
||||||
text: "垂直居中", |
type: "bi.label", |
||||||
cls: "layout-bg1", |
text: "垂直居中", |
||||||
width: 300, |
cls: "layout-bg1", |
||||||
height: 30 |
width: 300, |
||||||
}, { |
height: 30, |
||||||
type: "bi.label", |
}, |
||||||
text: "垂直居中", |
{ |
||||||
cls: "layout-bg2", |
type: "bi.label", |
||||||
width: 300, |
text: "垂直居中", |
||||||
height: 30 |
cls: "layout-bg2", |
||||||
}] |
width: 300, |
||||||
|
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, |
{ |
||||||
row: 0, |
column: 0, |
||||||
el: this._createLayout() |
row: 0, |
||||||
}] |
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", |
{ |
||||||
text: "create形式创建layer, 遮住当前面板, 返回创建的面板对象", |
type: "bi.button", |
||||||
height: 30, |
text: "create形式创建layer, 遮住当前面板, 返回创建的面板对象", |
||||||
handler: function () { |
height: 30, |
||||||
BI.Layers.create(id1, self, { |
handler() { |
||||||
//偏移量
|
Layers.create(id1, self, { |
||||||
offset: { |
// 偏移量
|
||||||
left: 10, |
offset: { |
||||||
right: 10, |
left: 10, |
||||||
top: 10, |
right: 10, |
||||||
bottom: 10 |
top: 10, |
||||||
}, |
bottom: 10, |
||||||
type: "bi.center_adapt", |
}, |
||||||
cls: "bi-card", |
type: "bi.center_adapt", |
||||||
items: [{ |
cls: "bi-card", |
||||||
type: "bi.button", |
items: [ |
||||||
text: "点击关闭", |
{ |
||||||
handler: function () { |
type: "bi.button", |
||||||
BI.Layers.hide(id1); |
text: "点击关闭", |
||||||
} |
handler() { |
||||||
}] |
Layers.hide(id1); |
||||||
}); |
}, |
||||||
BI.Layers.show(id1); |
} |
||||||
} |
], |
||||||
}, { |
}); |
||||||
type: "bi.button", |
Layers.show(id1); |
||||||
text: "make形式创建layer,可以指定放到哪个面板内,这里指定当前面板(默认放在body下撑满), 返回创建的面板对象", |
}, |
||||||
height: 30, |
}, |
||||||
handler: function () { |
{ |
||||||
BI.Layers.make(id2, self, { |
type: "bi.button", |
||||||
//偏移量
|
text: "make形式创建layer,可以指定放到哪个面板内,这里指定当前面板(默认放在body下撑满), 返回创建的面板对象", |
||||||
offset: { |
height: 30, |
||||||
left: 10, |
handler() { |
||||||
right: 10, |
Layers.make(id2, self, { |
||||||
top: 10, |
// 偏移量
|
||||||
bottom: 10 |
offset: { |
||||||
}, |
left: 10, |
||||||
type: "bi.center_adapt", |
right: 10, |
||||||
cls: "bi-card", |
top: 10, |
||||||
items: [{ |
bottom: 10, |
||||||
type: "bi.button", |
}, |
||||||
text: "点击关闭", |
type: "bi.center_adapt", |
||||||
handler: function () { |
cls: "bi-card", |
||||||
BI.Layers.remove(id2); |
items: [ |
||||||
} |
{ |
||||||
}] |
type: "bi.button", |
||||||
}); |
text: "点击关闭", |
||||||
BI.Layers.show(id2); |
handler() { |
||||||
|
Layers.remove(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