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