guy 7 years ago
parent
commit
9ce43ecfdd
  1. 2
      bi/core.js
  2. 4
      demo/js/config/base.js
  3. 27
      demo/js/config/core.js
  4. 7
      demo/js/core/layout/demo.absolute.js
  5. 2
      demo/js/core/layout/demo.center.js
  6. 71
      demo/js/core/layout/demo.center_adapt.js
  7. 2
      demo/js/core/layout/demo.float_center.js
  8. 49
      demo/js/core/layout/demo.horizontal.js
  9. 25
      demo/js/core/layout/demo.horizontal_adapt.js
  10. 5
      demo/js/core/layout/demo.horizontal_auto.js
  11. 22
      demo/js/core/layout/demo.horizontal_float.js
  12. 47
      demo/js/core/layout/demo.inline.js
  13. 2
      demo/js/core/layout/demo.table.js
  14. 8
      demo/js/core/layout/demo.vertical.js
  15. 4
      demo/js/core/layout/demo.vertical_adapt.js
  16. 2
      dist/bundle.js
  17. 6
      dist/bundle.min.js
  18. 2
      dist/core.js
  19. 274
      dist/demo.js
  20. 2
      src/core/wrapper/layout/flex/flex.horizontal.js

2
bi/core.js

@ -12526,7 +12526,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout", baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: BI.VerticalAlign.Top,
columnSize: [], columnSize: [],
scrollx: true, scrollx: true,
hgap: 0, hgap: 0,

4
demo/js/config/base.js

@ -106,10 +106,6 @@ Demo.BASE_CONFIG = [{
pId: 204, pId: 204,
text: "bi.resizable_table", text: "bi.resizable_table",
value: "demo.resizable_table" value: "demo.resizable_table"
}, {
pId: 2,
text: "bi.canvas",
value: "demo.canvas"
}, { }, {
pId: 2, pId: 2,
text: "bi.pager", text: "bi.pager",

27
demo/js/config/core.js

@ -7,27 +7,31 @@ Demo.CORE_CONFIG = [{
text: "布局" text: "布局"
}, { }, {
pId: 101, pId: 101,
text: "自适应居中bi.center_adapt", text: "bi.absolute",
value: "demo.absolute"
}, {
pId: 101,
text: "bi.center_adapt",
value: "demo.center_adapt" value: "demo.center_adapt"
}, { }, {
pId: 101, pId: 101,
text: "自适应垂直居中bi.vertical_adapt", text: "bi.vertical_adapt",
value: "demo.vertical_adapt" value: "demo.vertical_adapt"
}, { }, {
pId: 101, pId: 101,
text: "自适应水平居中bi.horizontal_adapt", text: "bi.horizontal_adapt",
value: "demo.horizontal_adapt" value: "demo.horizontal_adapt"
}, { }, {
pId: 101, pId: 101,
text: "margin-auto自适应水平居中bi.horizontal_auto", text: "bi.horizontal_auto",
value: "demo.horizontal_auto" value: "demo.horizontal_auto"
}, { }, {
pId: 101, pId: 101,
text: "float水平居中bi.horizontal_float", text: "bi.horizontal_float",
value: "demo.horizontal_float" value: "demo.horizontal_float"
}, { }, {
pId: 101, pId: 101,
text: "左右垂直居中bi.left_right_vertical_adapt", text: "bi.left_right_vertical_adapt",
value: "demo.left_right_vertical_adapt" value: "demo.left_right_vertical_adapt"
}, { }, {
pId: 101, pId: 101,
@ -39,11 +43,11 @@ Demo.CORE_CONFIG = [{
value: "demo.float_center" value: "demo.float_center"
}, { }, {
pId: 101, pId: 101,
text: "垂直流式bi.vertical", text: "bi.vertical",
value: "demo.vertical" value: "demo.vertical"
}, { }, {
pId: 101, pId: 101,
text: "水平流式bi.horizontal", text: "bi.horizontal",
value: "demo.horizontal" value: "demo.horizontal"
}, { }, {
pId: 101, pId: 101,
@ -53,10 +57,6 @@ Demo.CORE_CONFIG = [{
pId: 101, pId: 101,
text: "bi.left, bi.right", text: "bi.left, bi.right",
value: "demo.flow" value: "demo.flow"
}, {
pId: 101,
text: "bi.inline",
value: "demo.inline"
}, { }, {
pId: 101, pId: 101,
text: "bi.htape", text: "bi.htape",
@ -77,6 +77,9 @@ Demo.CORE_CONFIG = [{
pId: 101, pId: 101,
text: "bi.td", text: "bi.td",
value: "demo.td" value: "demo.td"
}, {
pId: 101,
text: "..."
}, { }, {
pId: 1, pId: 1,
id: 102, id: 102,

7
demo/js/core/layout/demo.absolute.js

@ -7,8 +7,11 @@ Demo.AbsoluteLayout = BI.inherit(BI.Widget, {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
el: { el: {
type: "bi.button", type: "bi.label",
text: "absolute" text: "绝对布局",
cls: "layout-bg1",
width: 300,
height: 200
}, },
left: 100, left: 100,
top: 100 top: 100

2
demo/js/core/layout/demo.center.js

@ -10,7 +10,7 @@ Demo.CenterLayout = BI.inherit(BI.Widget, {
type: "bi.center", type: "bi.center",
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Center 1,这里虽然设置label的高度30,但是最终影响高度的是center布局", text: "其实是一个grid嵌套absolute的实现",
cls: "layout-bg1", cls: "layout-bg1",
whiteSpace: "normal" whiteSpace: "normal"
},{ },{

71
demo/js/core/layout/demo.center_adapt.js

@ -4,78 +4,15 @@ Demo.CenterAdapt = BI.inherit(BI.Widget, {
}, },
render: function () { render: function () {
return { return {
type: "bi.grid",
columns: 1,
rows: 2,
items: [{
column: 0,
row: 0,
el: this._createNoWidth()
}, {
column: 0,
row: 1,
el: this._createBottom()
}]
}
},
_createNoWidth: function () {
return BI.createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
hgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Center Adapt 1,center adapt布局只会影响容器内部的位置(水平和垂直居中)而不会影响到内部控件本身属性", text: "水平垂直居中",
cls: "layout-bg1", width: 300,
height: 30 height: 200,
}, {
type: "bi.label",
text: "Center Adapt 2,根据内部控件的宽度的比例来计算",
cls: "layout-bg2",
height: 30
}, {
type: "bi.label",
text: "Center Adapt 3,这些label都是没有宽度的",
cls: "layout-bg3",
height: 30
}, {
type: "bi.label",
text: "Center Adapt 4",
cls: "layout-bg5",
height: 30
}]
})
},
_createBottom: function () {
return BI.createWidget({
type: "bi.center_adapt",
items: [{
type: "bi.text_button",
text: "这个是有宽度和高度的按钮-1",
height: "100%",
width: 160,
cls: "layout-bg1" cls: "layout-bg1"
}, {
type: "bi.text_button",
text: "这个是有宽度和高度的按钮-2",
height: 30,
width: 160,
cls: "layout-bg2"
}, {
type: "bi.text_button",
text: "这个是有宽度和高度的按钮-3",
height: 30,
width: 160,
cls: "layout-bg3"
}, {
type: "bi.text_button",
text: "这个是有宽度和高度的按钮-4",
height: 30,
width: 160,
cls: "layout-bg5"
}] }]
}) }
}, },
}); });
BI.shortcut("demo.center_adapt", Demo.CenterAdapt); BI.shortcut("demo.center_adapt", Demo.CenterAdapt);

2
demo/js/core/layout/demo.float_center.js

@ -15,7 +15,7 @@ Demo.FloatCenterLayout = BI.inherit(BI.Widget, {
whiteSpace: "normal" whiteSpace: "normal"
}, { }, {
type: "bi.label", type: "bi.label",
text: "floatCenter与center的不同在于,它可以控制最小宽度和最大宽度", text: "浮动式的中间布局",
cls: "layout-bg2", cls: "layout-bg2",
whiteSpace: "normal" whiteSpace: "normal"
}], }],

49
demo/js/core/layout/demo.horizontal.js

@ -7,43 +7,20 @@ Demo.Horizontal = BI.inherit(BI.Widget, {
}, },
render: function () { render: function () {
return { return {
type: "bi.vertical", type: "bi.horizontal",
items: [{ items: [{
type: "bi.horizontal", type: "bi.label",
items: [{ text: "水平布局",
type: "bi.absolute", cls: "layout-bg3",
items: [{ width: 300,
el: { height: 30
type: "bi.text_button", }, {
cls: "layout-bg1", type: "bi.label",
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)", text: "水平布局",
height: 30 cls: "layout-bg4",
}, width: 300,
left: 0, height: 30
right: 0 }]
}],
width: 100,
height: 30
}, {
type: "bi.absolute",
items: [{
el: {
type: "bi.text_button",
cls: "layout-bg2",
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)",
height: 30
},
left: 0,
right: 0
}],
width: 200,
height: 30
}]
}],
lgap: 20,
rgap: 80,
tgap: 80,
bgap: 50
} }
} }
}); });

25
demo/js/core/layout/demo.horizontal_adapt.js

@ -9,23 +9,34 @@ Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
_createLayout: function () { _createLayout: function () {
return BI.createWidget({ return BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
vgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Horizontal Adapt左右自适应", text: "例子1:可用做水平居中",
cls: "layout-bg1", cls: "layout-bg1",
width: 300, width: 300,
height: 30 height: 30
}]
})
},
_createAdaptLayout: function () {
return BI.createWidget({
type: "bi.horizontal_adapt",
columnSize: [300, 'fill'],
items: [{
type: "bi.label",
text: "例子2:用于水平适应布局",
cls: "layout-bg1",
height: 30
}, { }, {
type: "bi.label", type: "bi.label",
text: "Horizontal Adapt左右自适应", text: "水平自适应列",
cls: "layout-bg2", cls: "layout-bg2",
//width: 300,
height: 30 height: 30
}] }]
}) })
}, },
render: function () { render: function () {
return { return {
type: "bi.grid", type: "bi.grid",
@ -35,6 +46,10 @@ Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
column: 0, column: 0,
row: 0, row: 0,
el: this._createLayout() el: this._createLayout()
}, {
column: 0,
row: 1,
el: this._createAdaptLayout()
}] }]
} }
} }

5
demo/js/core/layout/demo.horizontal_auto.js

@ -9,16 +9,15 @@ Demo.HorizontalAuto = BI.inherit(BI.Widget, {
_createLayout: function () { _createLayout: function () {
return BI.createWidget({ return BI.createWidget({
type: "bi.horizontal_auto", type: "bi.horizontal_auto",
vgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Horizontal Auto左右自适应", text: "水平居中",
cls: "layout-bg1", cls: "layout-bg1",
width: 300, width: 300,
height: 30 height: 30
}, { }, {
type: "bi.label", type: "bi.label",
text: "Horizontal Auto左右自适应", text: "水平居中优先使用该布局",
cls: "layout-bg2", cls: "layout-bg2",
width: 300, width: 300,
height: 30 height: 30

22
demo/js/core/layout/demo.horizontal_float.js

@ -6,28 +6,14 @@ Demo.HorizontalFloat = BI.inherit(BI.Widget, {
baseCls: "demo-horizontal-float" baseCls: "demo-horizontal-float"
}, },
_createLayout: function () { render: function () {
return BI.createWidget({ return {
type: "bi.horizontal_float", type: "bi.horizontal_float",
vgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Horizontal Float左右自适应", text: "浮动式水平居中布局方案,用于宽度未知的情况",
cls: "layout-bg1", cls: "layout-bg1",
width: 100 height: 30
}]
})
},
render: function () {
return {
type: "bi.grid",
columns: 1,
rows: 2,
items: [{
column: 0,
row: 0,
el: this._createLayout()
}] }]
} }
} }

47
demo/js/core/layout/demo.inline.js

@ -1,47 +0,0 @@
/**
* Created by User on 2017/3/22.
*/
Demo.InlineLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-inline"
},
render: function () {
return {
type: "bi.inline",
items: [{
type: "bi.label",
height: 30,
text: "Left-1",
cls: "layout-bg1",
hgap: 200
}, {
type: "bi.label",
height: 30,
text: "Left-2",
cls: "layout-bg2",
hgap: 200
}, {
type: "bi.label",
height: 30,
text: "Left-3",
cls: "layout-bg3",
hgap: 200
}, {
type: "bi.label",
height: 30,
text: "Left-4",
cls: "layout-bg4",
hgap: 200
}, {
type: "bi.label",
height: 30,
text: "Left-5",
cls: "layout-bg5",
hgap: 200
}],
hgap: 20,
vgap: 20
}
}
});
BI.shortcut("demo.inline", Demo.InlineLayout);

2
demo/js/core/layout/demo.table.js

@ -138,7 +138,7 @@ Demo.TableLayout = BI.inherit(BI.Widget, {
vgap: 10 vgap: 10
} }
}, },
render: function () { render: function () {
return { return {
type: "bi.grid", type: "bi.grid",

8
demo/js/core/layout/demo.vertical.js

@ -10,13 +10,13 @@ Demo.VerticalLayout = BI.inherit(BI.Widget, {
type: "bi.vertical", type: "bi.vertical",
items: [{ items: [{
type: "bi.label", type: "bi.label",
cls: "layout-bg1", cls: "layout-bg3",
text: "这里设置了hgap(水平间距),vgap(垂直间距)", text: "垂直布局",
height: 30 height: 30
}, { }, {
type: "bi.label", type: "bi.label",
cls: "layout-bg2", cls: "layout-bg4",
text: "这里设置了hgap(水平间距),vgap(垂直间距)", text: "垂直布局",
height: 30 height: 30
}] }]
} }

4
demo/js/core/layout/demo.vertical_adapt.js

@ -12,13 +12,13 @@ Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
vgap: 10, vgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Vertical Adapt上下自适应", text: "垂直居中",
cls: "layout-bg1", cls: "layout-bg1",
width: 300, width: 300,
height: 30 height: 30
}, { }, {
type: "bi.label", type: "bi.label",
text: "Vertical Adapt上下自适应", text: "垂直居中",
cls: "layout-bg2", cls: "layout-bg2",
width: 300, width: 300,
height: 30 height: 30

2
dist/bundle.js vendored

@ -26085,7 +26085,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout", baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: BI.VerticalAlign.Top,
columnSize: [], columnSize: [],
scrollx: true, scrollx: true,
hgap: 0, hgap: 0,

6
dist/bundle.min.js vendored

File diff suppressed because one or more lines are too long

2
dist/core.js vendored

@ -26034,7 +26034,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout", baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: BI.VerticalAlign.Top,
columnSize: [], columnSize: [],
scrollx: true, scrollx: true,
hgap: 0, hgap: 0,

274
dist/demo.js vendored

@ -3489,10 +3489,6 @@ BI.shortcut("demo.value_chooser_pane", Demo.ValueChooserPane);Demo.ADDONS_CONFIG
pId: 204, pId: 204,
text: "bi.resizable_table", text: "bi.resizable_table",
value: "demo.resizable_table" value: "demo.resizable_table"
}, {
pId: 2,
text: "bi.canvas",
value: "demo.canvas"
}, { }, {
pId: 2, pId: 2,
text: "bi.pager", text: "bi.pager",
@ -3756,27 +3752,31 @@ Demo.COMPONENT_CONFIG = [{
text: "布局" text: "布局"
}, { }, {
pId: 101, pId: 101,
text: "自适应居中bi.center_adapt", text: "bi.absolute",
value: "demo.absolute"
}, {
pId: 101,
text: "bi.center_adapt",
value: "demo.center_adapt" value: "demo.center_adapt"
}, { }, {
pId: 101, pId: 101,
text: "自适应垂直居中bi.vertical_adapt", text: "bi.vertical_adapt",
value: "demo.vertical_adapt" value: "demo.vertical_adapt"
}, { }, {
pId: 101, pId: 101,
text: "自适应水平居中bi.horizontal_adapt", text: "bi.horizontal_adapt",
value: "demo.horizontal_adapt" value: "demo.horizontal_adapt"
}, { }, {
pId: 101, pId: 101,
text: "margin-auto自适应水平居中bi.horizontal_auto", text: "bi.horizontal_auto",
value: "demo.horizontal_auto" value: "demo.horizontal_auto"
}, { }, {
pId: 101, pId: 101,
text: "float水平居中bi.horizontal_float", text: "bi.horizontal_float",
value: "demo.horizontal_float" value: "demo.horizontal_float"
}, { }, {
pId: 101, pId: 101,
text: "左右垂直居中bi.left_right_vertical_adapt", text: "bi.left_right_vertical_adapt",
value: "demo.left_right_vertical_adapt" value: "demo.left_right_vertical_adapt"
}, { }, {
pId: 101, pId: 101,
@ -3788,11 +3788,11 @@ Demo.COMPONENT_CONFIG = [{
value: "demo.float_center" value: "demo.float_center"
}, { }, {
pId: 101, pId: 101,
text: "垂直流式bi.vertical", text: "bi.vertical",
value: "demo.vertical" value: "demo.vertical"
}, { }, {
pId: 101, pId: 101,
text: "水平流式bi.horizontal", text: "bi.horizontal",
value: "demo.horizontal" value: "demo.horizontal"
}, { }, {
pId: 101, pId: 101,
@ -3802,10 +3802,6 @@ Demo.COMPONENT_CONFIG = [{
pId: 101, pId: 101,
text: "bi.left, bi.right", text: "bi.left, bi.right",
value: "demo.flow" value: "demo.flow"
}, {
pId: 101,
text: "bi.inline",
value: "demo.inline"
}, { }, {
pId: 101, pId: 101,
text: "bi.htape", text: "bi.htape",
@ -3826,6 +3822,9 @@ Demo.COMPONENT_CONFIG = [{
pId: 101, pId: 101,
text: "bi.td", text: "bi.td",
value: "demo.td" value: "demo.td"
}, {
pId: 101,
text: "..."
}, { }, {
pId: 1, pId: 1,
id: 102, id: 102,
@ -4786,8 +4785,11 @@ BI.shortcut("demo.custom_tree", Demo.Func);Demo.AbsoluteLayout = BI.inherit(BI.W
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
el: { el: {
type: "bi.button", type: "bi.label",
text: "absolute" text: "绝对布局",
cls: "layout-bg1",
width: 300,
height: 200
}, },
left: 100, left: 100,
top: 100 top: 100
@ -4897,78 +4899,15 @@ BI.shortcut("demo.border", Demo.BorderLayout);Demo.CenterAdapt = BI.inherit(BI.W
}, },
render: function () { render: function () {
return { return {
type: "bi.grid",
columns: 1,
rows: 2,
items: [{
column: 0,
row: 0,
el: this._createNoWidth()
}, {
column: 0,
row: 1,
el: this._createBottom()
}]
}
},
_createNoWidth: function () {
return BI.createWidget({
type: "bi.center_adapt", type: "bi.center_adapt",
hgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Center Adapt 1,center adapt布局只会影响容器内部的位置(水平和垂直居中)而不会影响到内部控件本身属性", text: "水平垂直居中",
cls: "layout-bg1", width: 300,
height: 30 height: 200,
}, {
type: "bi.label",
text: "Center Adapt 2,根据内部控件的宽度的比例来计算",
cls: "layout-bg2",
height: 30
}, {
type: "bi.label",
text: "Center Adapt 3,这些label都是没有宽度的",
cls: "layout-bg3",
height: 30
}, {
type: "bi.label",
text: "Center Adapt 4",
cls: "layout-bg5",
height: 30
}]
})
},
_createBottom: function () {
return BI.createWidget({
type: "bi.center_adapt",
items: [{
type: "bi.text_button",
text: "这个是有宽度和高度的按钮-1",
height: "100%",
width: 160,
cls: "layout-bg1" cls: "layout-bg1"
}, {
type: "bi.text_button",
text: "这个是有宽度和高度的按钮-2",
height: 30,
width: 160,
cls: "layout-bg2"
}, {
type: "bi.text_button",
text: "这个是有宽度和高度的按钮-3",
height: 30,
width: 160,
cls: "layout-bg3"
}, {
type: "bi.text_button",
text: "这个是有宽度和高度的按钮-4",
height: 30,
width: 160,
cls: "layout-bg5"
}] }]
}) }
}, },
}); });
BI.shortcut("demo.center_adapt", Demo.CenterAdapt);/** BI.shortcut("demo.center_adapt", Demo.CenterAdapt);/**
@ -4983,7 +4922,7 @@ Demo.CenterLayout = BI.inherit(BI.Widget, {
type: "bi.center", type: "bi.center",
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Center 1,这里虽然设置label的高度30,但是最终影响高度的是center布局", text: "其实是一个grid嵌套absolute的实现",
cls: "layout-bg1", cls: "layout-bg1",
whiteSpace: "normal" whiteSpace: "normal"
},{ },{
@ -5022,7 +4961,7 @@ Demo.FloatCenterLayout = BI.inherit(BI.Widget, {
whiteSpace: "normal" whiteSpace: "normal"
}, { }, {
type: "bi.label", type: "bi.label",
text: "floatCenter与center的不同在于,它可以控制最小宽度和最大宽度", text: "浮动式的中间布局",
cls: "layout-bg2", cls: "layout-bg2",
whiteSpace: "normal" whiteSpace: "normal"
}], }],
@ -5262,23 +5201,34 @@ Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
_createLayout: function () { _createLayout: function () {
return BI.createWidget({ return BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
vgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Horizontal Adapt左右自适应", text: "例子1:可用做水平居中",
cls: "layout-bg1", cls: "layout-bg1",
width: 300, width: 300,
height: 30 height: 30
}]
})
},
_createAdaptLayout: function () {
return BI.createWidget({
type: "bi.horizontal_adapt",
columnSize: [300, 'fill'],
items: [{
type: "bi.label",
text: "例子2:用于水平适应布局",
cls: "layout-bg1",
height: 30
}, { }, {
type: "bi.label", type: "bi.label",
text: "Horizontal Adapt左右自适应", text: "水平自适应列",
cls: "layout-bg2", cls: "layout-bg2",
//width: 300,
height: 30 height: 30
}] }]
}) })
}, },
render: function () { render: function () {
return { return {
type: "bi.grid", type: "bi.grid",
@ -5288,6 +5238,10 @@ Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
column: 0, column: 0,
row: 0, row: 0,
el: this._createLayout() el: this._createLayout()
}, {
column: 0,
row: 1,
el: this._createAdaptLayout()
}] }]
} }
} }
@ -5303,16 +5257,15 @@ Demo.HorizontalAuto = BI.inherit(BI.Widget, {
_createLayout: function () { _createLayout: function () {
return BI.createWidget({ return BI.createWidget({
type: "bi.horizontal_auto", type: "bi.horizontal_auto",
vgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Horizontal Auto左右自适应", text: "水平居中",
cls: "layout-bg1", cls: "layout-bg1",
width: 300, width: 300,
height: 30 height: 30
}, { }, {
type: "bi.label", type: "bi.label",
text: "Horizontal Auto左右自适应", text: "水平居中优先使用该布局",
cls: "layout-bg2", cls: "layout-bg2",
width: 300, width: 300,
height: 30 height: 30
@ -5341,28 +5294,14 @@ Demo.HorizontalFloat = BI.inherit(BI.Widget, {
baseCls: "demo-horizontal-float" baseCls: "demo-horizontal-float"
}, },
_createLayout: function () { render: function () {
return BI.createWidget({ return {
type: "bi.horizontal_float", type: "bi.horizontal_float",
vgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Horizontal Float左右自适应", text: "浮动式水平居中布局方案,用于宽度未知的情况",
cls: "layout-bg1", cls: "layout-bg1",
width: 100 height: 30
}]
})
},
render: function () {
return {
type: "bi.grid",
columns: 1,
rows: 2,
items: [{
column: 0,
row: 0,
el: this._createLayout()
}] }]
} }
} }
@ -5376,43 +5315,20 @@ Demo.Horizontal = BI.inherit(BI.Widget, {
}, },
render: function () { render: function () {
return { return {
type: "bi.vertical", type: "bi.horizontal",
items: [{ items: [{
type: "bi.horizontal", type: "bi.label",
items: [{ text: "水平布局",
type: "bi.absolute", cls: "layout-bg3",
items: [{ width: 300,
el: { height: 30
type: "bi.text_button", }, {
cls: "layout-bg1", type: "bi.label",
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)", text: "水平布局",
height: 30 cls: "layout-bg4",
}, width: 300,
left: 0, height: 30
right: 0 }]
}],
width: 100,
height: 30
}, {
type: "bi.absolute",
items: [{
el: {
type: "bi.text_button",
cls: "layout-bg2",
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)",
height: 30
},
left: 0,
right: 0
}],
width: 200,
height: 30
}]
}],
lgap: 20,
rgap: 80,
tgap: 80,
bgap: 50
} }
} }
}); });
@ -5456,52 +5372,6 @@ Demo.HtapeLayout = BI.inherit(BI.Widget, {
BI.shortcut("demo.htape", Demo.HtapeLayout);/** BI.shortcut("demo.htape", Demo.HtapeLayout);/**
* Created by User on 2017/3/22. * Created by User on 2017/3/22.
*/ */
Demo.InlineLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-inline"
},
render: function () {
return {
type: "bi.inline",
items: [{
type: "bi.label",
height: 30,
text: "Left-1",
cls: "layout-bg1",
hgap: 200
}, {
type: "bi.label",
height: 30,
text: "Left-2",
cls: "layout-bg2",
hgap: 200
}, {
type: "bi.label",
height: 30,
text: "Left-3",
cls: "layout-bg3",
hgap: 200
}, {
type: "bi.label",
height: 30,
text: "Left-4",
cls: "layout-bg4",
hgap: 200
}, {
type: "bi.label",
height: 30,
text: "Left-5",
cls: "layout-bg5",
hgap: 200
}],
hgap: 20,
vgap: 20
}
}
});
BI.shortcut("demo.inline", Demo.InlineLayout);/**
* Created by User on 2017/3/22.
*/
Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, { Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "demo-left-right-vertical-adapt" baseCls: "demo-left-right-vertical-adapt"
@ -5682,7 +5552,7 @@ Demo.TableLayout = BI.inherit(BI.Widget, {
vgap: 10 vgap: 10
} }
}, },
render: function () { render: function () {
return { return {
type: "bi.grid", type: "bi.grid",
@ -5775,13 +5645,13 @@ Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
vgap: 10, vgap: 10,
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Vertical Adapt上下自适应", text: "垂直居中",
cls: "layout-bg1", cls: "layout-bg1",
width: 300, width: 300,
height: 30 height: 30
}, { }, {
type: "bi.label", type: "bi.label",
text: "Vertical Adapt上下自适应", text: "垂直居中",
cls: "layout-bg2", cls: "layout-bg2",
width: 300, width: 300,
height: 30 height: 30
@ -5814,13 +5684,13 @@ Demo.VerticalLayout = BI.inherit(BI.Widget, {
type: "bi.vertical", type: "bi.vertical",
items: [{ items: [{
type: "bi.label", type: "bi.label",
cls: "layout-bg1", cls: "layout-bg3",
text: "这里设置了hgap(水平间距),vgap(垂直间距)", text: "垂直布局",
height: 30 height: 30
}, { }, {
type: "bi.label", type: "bi.label",
cls: "layout-bg2", cls: "layout-bg4",
text: "这里设置了hgap(水平间距),vgap(垂直间距)", text: "垂直布局",
height: 30 height: 30
}] }]
} }

2
src/core/wrapper/layout/flex/flex.horizontal.js

@ -9,7 +9,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout", baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: BI.VerticalAlign.Top,
columnSize: [], columnSize: [],
scrollx: true, scrollx: true,
hgap: 0, hgap: 0,

Loading…
Cancel
Save