diff --git a/demo/config.js b/demo/config.js
deleted file mode 100644
index 0822a116c..000000000
--- a/demo/config.js
+++ /dev/null
@@ -1,931 +0,0 @@
-/**
- * Created by User on 2017/3/21.
- */
-Demo.WIDGET = [{
-    id: 2,
-    pId: -1,
-    text: "文本框",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 1,
-    text: "树",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 7,
-    text: "表格",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 8,
-    text: "图表",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 3,
-    text: "日历",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 4,
-    text: "分页相关",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 5,
-    text: "tip提示",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 6,
-    text: "组合控件",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 9,
-    text: "选色控件",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 10,
-    text: "canvas绘图",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 11,
-    text: "svg绘图",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    text: "bi.message",
-    value: "message"
-}, {
-    pId: -1,
-    text: "bi.button",
-    value: "button"
-}, {
-    pId: -1,
-    text: "bi.multifile",
-    value: "multifile"
-}, {
-    pId: -1,
-    text: "bi.label",
-    value: "label"
-}, {
-    pId: 2,
-    text: "bi.editor",
-    value: "demo.absolute"
-}, {
-    pId: 2,
-    text: "bi.state_editor",
-    value: "state_editor"
-}, {
-    pId: 2,
-    text: "bi.record_editor",
-    value: "record_editor"
-}, {
-    pId: 2,
-    text: "bi.sign_editor",
-    value: "sign_editor"
-}, {
-    pId: 2,
-    text: "bi.shelter_editor",
-    value: "shelter_editor"
-}, {
-    pId: 2,
-    text: "bi.code_editor",
-    value: "code_editor"
-}, {
-    pId: 2,
-    text: "bi.textareaeditor",
-    value: "textareaeditor"
-}, {
-    pId: 6,
-    text: "bi.combo",
-    value: "combo"
-}, {
-    pId: 6,
-    text: "bi.combo(各种位置)",
-    value: "combo2"
-}, {
-    pId: 6,
-    text: "bi.expander",
-    value: "expander"
-}, {
-    pId: 6,
-    text: "bi.switcher",
-    value: "switcher"
-}, {
-    pId: 6,
-    text: "bi.searcher",
-    value: "searcher"
-}, {
-    pId: 6,
-    text: "bi.bubble_combo",
-    value: "bubble_combo"
-}, {
-    pId: 1,
-    text: "bi.customtree",
-    value: "customtree"
-}, {
-    pId: 1,
-    text: "bi.tree",
-    value: "tree"
-}, {
-    pId: 1,
-    text: "bi.sync_tree",
-    value: "synctree"
-}, {
-    pId: 1,
-    text: "bi.part_tree",
-    value: "parttree"
-}, {
-    pId: 1,
-    text: "bi.display_tree",
-    value: "displaytree"
-}, {
-    pId: 1,
-    text: "bi.simple_tree",
-    value: "simpletree"
-}, {
-    pId: 1,
-    text: "bi.level_tree",
-    value: "leveltree"
-}, {
-    pId: 1,
-    text: "bi.branch_tree",
-    value: "branch_tree"
-}, {
-    pId: 1,
-    text: "bi.handstand_branch_tree",
-    value: "handstand_branch_tree"
-}, {
-    pId: 2,
-    text: "bi.formula",
-    value: "formula"
-}, {
-    pId: 9,
-    text: "bi.farbtastic",
-    value: "farbtastic"
-}, {
-    pId: 9,
-    text: "bi.color_picker",
-    value: "color_picker"
-}, {
-    pId: 9,
-    text: "bi.color_picker_editor",
-    value: "color_picker_editor"
-}, {
-    pId: 7,
-    text: "bi.table_view",
-    value: "table_view"
-}, {
-    pId: 7,
-    text: "bi.table_tree",
-    value: "tabletree"
-}, {
-    pId: 7,
-    text: "bi.layer_tree_table",
-    value: "layer_tree_table"
-}, {
-    pId: 7,
-    text: "bi.tabler",
-    value: "tabler"
-}, {
-    pId: 8,
-    text: "bi.chart",
-    value: "chart"
-}, {
-    pId: 8,
-    text: "charts",
-    value: "charts"
-}, {
-    pId: 5,
-    text: "bi.bubble",
-    value: "bubble"
-}, {
-    pId: 5,
-    text: "bi.toast",
-    value: "toast"
-}, {
-    pId: 5,
-    text: "bi.tooltip",
-    value: "tooltip"
-}, {
-    pId: 4,
-    text: "bi.tab",
-    value: "tab"
-}, {
-    pId: 4,
-    text: "bi.pager",
-    value: "pager"
-}, {
-    pId: 4,
-    text: "bi.loader",
-    value: "loader"
-}, {
-    pId: 4,
-    text: "bi.navigation",
-    value: "navigation"
-}, {
-    pId: 4,
-    text: "bi.scroll_view",
-    value: "scrollview"
-}, {
-    pId: 4,
-    text: "bi.number_pager",
-    value: "numberpager"
-}, {
-    pId: 4,
-    text: "bi.direction_pager",
-    value: "directionpager"
-}, {
-    pId: 4,
-    text: "bi.skip_pager",
-    value: "skippager"
-}, {
-    pId: 4,
-    text: "bi.all_pager",
-    value: "allpager"
-}, {
-    pId: 4,
-    text: "bi.lazyloader",
-    value: "lazy_loader"
-}, {
-    pId: 3,
-    text: "bi.calendar",
-    value: "calendar"
-}, {
-    pId: 3,
-    text: "bi.year_calendar",
-    value: "year_calendar"
-}, {
-    pId: 10,
-    text: "bi.canvas",
-    value: "canvas"
-}, {
-    pId: 10,
-    text: "bi.complex_canvas",
-    value: "complex_canvas"
-}, {
-    pId: 11,
-    text: "bi.svg",
-    value: "svg"
-}, {
-    text: "bi.zero_clip",
-    value: "zclip"
-}, {
-    text: "bi.grid_view",
-    value: "gridview"
-}, {
-    text: "bi.collection_view",
-    value: "collectionview"
-}, {
-    text: "bi.grid_table",
-    value: "gridtable"
-}];
-Demo.layout = [{
-    text: "bi.center_adapt",
-    value: "center_adapt"
-}, {
-    text: "bi.float_center_adapt",
-    value: "float_center_adapt"
-}, {
-    text: "bi.absolute_center_adapt",
-    value: "absolute_center_adapt"
-}, {
-    text: "bi.flex_center",
-    value: "flex_center"
-}, {
-    text: "bi.inline_center_adapt",
-    value: "inline_center_adapt"
-}, {
-    text: "bi.vertical_adapt",
-    value: "vertical_adapt"
-}, {
-    text: "bi.inline_vertical_adapt",
-    value: "inline_vertical_adapt"
-}, {
-    text: "bi.horizontal_adapt",
-    value: "horizontal_adapt"
-}, {
-    text: "bi.horizontal_auto",
-    value: "horizontal_auto"
-}, {
-    text: "bi.horizontal_float",
-    value: "horizontal_float"
-}, {
-    text: "bi.left_right_vertical_adapt",
-    value: "left_right_vertical_adapt"
-}, {
-    text: "bi.center",
-    value: "center"
-}, {
-    text: "bi.float_center",
-    value: "float_center"
-}, {
-    text: "bi.vertical",
-    value: "vertical"
-}, {
-    text: "bi.horizontal",
-    value: "horizontal"
-}, {
-    text: "bi.border",
-    value: "border"
-}, {
-    text: "bi.card",
-    value: "card"
-}, {
-    text: "bi.left, bi.right",
-    value: "flow"
-}, {
-    text: "bi.lattice",
-    value: "lattice"
-}, {
-    text: "bi.inline",
-    value: "inline"
-}, {
-    text: "bi.htape",
-    value: "htape"
-}, {
-    text: "bi.vtape",
-    value: "vtape"
-}, {
-    text: "bi.grid",
-    value: "grid"
-}, {
-    text: "bi.table",
-    value: "table"
-}, {
-    text: "bi.division",
-    value: "division"
-}, {
-    text: "bi.window",
-    value: "window"
-}, {
-    text: "bi.td",
-    value: "td"
-}];
-Demo.DETAIL = [{
-    id: -2,
-    text: "各种基础小控件"
-},{
-    pId: -2,
-    id: -1,
-    text: "各种基础小控件"
-}, {
-    pId: -2,
-    id: 1,
-    text: "文本框控件"
-}, {
-    pId: -2,
-    id: 12,
-    text: "下拉框控件(可测)"
-}, {
-    pId: -2,
-    id: 2,
-    text: "年份控件(可测)"
-}, {
-    pId: -2,
-    id: 3,
-    text: "月份控件(可测)"
-}, {
-    pId: -2,
-    id: 4,
-    text: "季度控件(可测)"
-}, {
-    pId: -2,
-    id: 5,
-    text: "简单日期控件(不参与测试)"
-}, {
-    pId: -2,
-    id: 6,
-    text: "复杂日期控件(可测)"
-}, {
-    pId: -2,
-    id: 7,
-    text: "下拉列表(可测)"
-}, {
-    pId: -2,
-    id: 8,
-    text: "选择字段列表(可测)"
-}, {
-    pId: -2,
-    id: 9,
-    text: "公式编辑器(可测)"
-}, {
-    id: 10,
-    pId: -2,
-    text: "数值区间控件(可测)"
-}, {
-    id: 11,
-    pId: -2,
-    text: "下拉复选框有确定按钮(已阅)"
-}, {
-    id: 13,
-    pId: -2,
-    text: "移动和复制到分组(可测)"
-}, {
-    id: 14,
-    pId: -2,
-    text: "单选下拉树(可测)"
-}, {
-    id: 23,
-    pId: -2,
-    text: "可选下拉树(可测)"
-}, {
-    id: 15,
-    pId: -2,
-    text: "提示对话框(可测)"
-}, {
-    id: 16,
-    pId: -2,
-    text: "复选下拉树(已阅)"
-}, {
-    pId: -2,
-    id: 17,
-    text: "时间区间控件"
-}, {
-    pId: -2,
-    id: 30,
-    text: "简单搜索控件"
-}, {
-    pId: -2,
-    id: 18,
-    text: "简单选择字段"
-}, {
-    pId: -2,
-    id: 19,
-    text: "过滤结构"
-}, {
-    pId: -2,
-    id: 20,
-    text: "选色控件"
-}, {
-    pId: -2,
-    id: 21,
-    text: "文本控件"
-}, {
-    pId: -2,
-    id: 22,
-    text: "路径选择"
-}, {
-    pId: -2,
-    id: 24,
-    text: "文件管理"
-}, {
-    pId: -2,
-    id: 25,
-    text: "表关联树"
-}, {
-    pId: -2,
-    id: 26,
-    text: "关联视图"
-}, {
-    pId: -2,
-    id: 27,
-    text: "表格"
-}, {
-    pId: -2,
-    id: 32,
-    text: "序号表格"
-}, {
-    pId: -2,
-    id: 28,
-    text: "图片组件&web组件"
-}, {
-    pId: -2,
-    id: 29,
-    text: "布局"
-}, {
-    pId: -2,
-    id: 31,
-    text: "详细图表"
-}, {
-    pId: -2,
-    id: 33,
-    text: "树标签"
-}, {
-    pId: -2,
-    id: 34,
-    text: "单值滑块"
-}, {
-    pId: -2,
-    id: 35,
-    text: "区间滑块"
-}, {
-    pId: -2,
-    id: 36,
-    text: "文本列表"
-}, {
-    pId: -2,
-    id: 37,
-    text: "树列表"
-}, {
-    pId: -2,
-    id: 38,
-    text: "日期面板"
-}, {
-    pId: -2,
-    id: 39,
-    text: "螺旋分析tab控件"
-}, {
-    pId: -2,
-    id: 40,
-    text: "数值微调器"
-},
-
-
-    {
-        pId: -1,
-        text: "各种通用按钮",
-        value: "buttons"
-    }, {
-        pId: -1,
-        text: "各种提示性信息",
-        value: "tips"
-    }, {
-        pId: -1,
-        text: "各种items",
-        value: "items"
-    }, {
-        pId: -1,
-        text: "各种节点node",
-        value: "nodes"
-    }, {
-        pId: -1,
-        text: "各种segment",
-        value: "segments"
-    }, {
-        pId: -1,
-        text: "各种面板",
-        value: "panes"
-    }, {
-        pId: -1,
-        text: "bi.loading_mask",
-        value: "loadingmask"
-    }, {
-        pId: -1,
-        text: "可以切换的树",
-        value: "switch_tree"
-    }, {
-        pId: -1,
-        text: "进度条",
-        value: "progressbar"
-    }, {
-        pId: 1,
-        text: "bi.text_editor",
-        value: "text_editor"
-    }, {
-        pId: 1,
-        text: "bi.search_editor",
-        value: "search_editor"
-    }, {
-        pId: 1,
-        text: "bi.adapt_editor",
-        value: "adapt_editor"
-    }, {
-        pId: 1,
-        text: "bi.sign_initial_editor",
-        value: "sign_initial_editor"
-    }, {
-        pId: 1,
-        text: "bi.sign_style_editor",
-        value: "sign_style_editor"
-    }, {
-        pId: 2,
-        text: "bi.year_combo",
-        value: "year_combo"
-    }, {
-        pId: 3,
-        text: "bi.month_combo",
-        value: "month_combo"
-    }, {
-        pId: 4,
-        text: "bi.quarter_combo",
-        value: "quarter_combo"
-    }, {
-        pId: 5,
-        text: "bi.date_combo",
-        value: "date_combo"
-    }, {
-        pId: 7,
-        text: "bi.down_list_combo",
-        value: "down_list_combo"
-    }, {
-        pId: 12,
-        text: "各种trigger",
-        value: "triggers"
-    }, {
-        pId: 12,
-        text: "bi.text_value_combo",
-        value: "text_icon_combo"
-    }, {
-        pId: 12,
-        text: "bi.static_combo",
-        value: "single_select_combo"
-    }, {
-        pId: 12,
-        text: "bi.text_value_down_list_combo",
-        value: "text_icon_down_list_combo"
-    }, {
-        pId: 12,
-        text: "bi.param_date_combo",
-        value: "param_date_combo"
-    }, {
-        pId: 12,
-        text: "bi.icon_combo",
-        value: "icon_combo"
-    }, {
-        pId: 12,
-        text: "bi.formula_combo",
-        value: "formula_combo"
-    }, {
-        pId: 9,
-        text: "bi.formula_insert",
-        value: "formula_insert"
-    }, {
-        pId: 9,
-        text: "bi.formula_pane",
-        value: "formula_pane"
-    }, {
-        pId: 8,
-        text: "bi.select_data_tree",
-        value: "select_data_tree"
-    }, {
-        pId: 8,
-        text: "bi.select_data_switcher",
-        value: "select_data_switcher"
-    }, {
-        pId: 8,
-        text: "bi.select_data_search_result",
-        value: "select_data_search_result"
-    }, {
-        pId: 8,
-        text: "bi.select_data_searcher(点这)",
-        value: "select_data_searcher"
-    }, {
-        pId: 6,
-        text: "bi.multidate_combo",
-        value: "multidate_combo"
-    }, {
-        pId: 17,
-        text: "bi.time_interval",
-        value: "time_interval"
-    }, {
-        pId: 10,
-        text: "bi.numerical_interval",
-        value: "numerical_interval"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_trigger",
-        value: "multi_select_trigger"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_search_pane",
-        value: "multi_select_search_pane"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_popup_view",
-        value: "multi_select_popup_view"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_check_pane",
-        value: "multi_select_check_pane"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_combo",
-        value: "multi_select_combo"
-    }, {
-        pId: 13,
-        text: "bi.move2group_combo",
-        value: "move2group_combo"
-    }, {
-        pId: 13,
-        text: "bi.copy2group_combo",
-        value: "copy2group_combo"
-    }, {
-        pId: 14,
-        text: "bi.single_tree_combo",
-        value: "single_tree_combo"
-    }, {
-        pId: 14,
-        text: "bi.multilayer_single_tree_combo",
-        value: "multilayer_single_tree_combo"
-    }, {
-        pId: 23,
-        text: "bi.select_tree_combo",
-        value: "select_tree_combo"
-    }, {
-        pId: 23,
-        text: "bi.multilayer_select_tree_combo",
-        value: "multilayer_select_tree_combo"
-    }, {
-        pId: 15,
-        text: "bi.dialog",
-        value: "dialog"
-    }, {
-        pId: 16,
-        text: "bi.multi_tree",
-        value: "multi_tree"
-    }, {
-        pId: 18,
-        text: "bi.simple_select_data_searcher",
-        value: "simple_select_data_searcher"
-    }, {
-        pId: 19,
-        text: "bi.filter_pane",
-        value: "filter_pane"
-    }, {
-        pId: 19,
-        text: "bi.filter_operation",
-        value: "filter_operation"
-    }, {
-        pId: 19,
-        text: "bi.filter",
-        value: "filter"
-    }, {
-        pId: 20,
-        text: "bi.color_chooser",
-        value: "color_chooser"
-    }, {
-        pId: 21,
-        text: "bi.text_toolbar",
-        value: "text_toolbar"
-    }, {
-        pId: 21,
-        text: "bi.text_area",
-        value: "text_area"
-    }, {
-        pId: 22,
-        text: "bi.path_chooser",
-        value: "path_chooser"
-    }, {
-        pId: 22,
-        text: "bi.direction_path_chooser",
-        value: "direction_path_chooser"
-    }, {
-        pId: 24,
-        text: "bi.file_manager",
-        value: "file_manager"
-    }, {
-        pId: 25,
-        text: "bi.branch_relation",
-        value: "branch_relation"
-    }, {
-        pId: 26,
-        text: "bi.relation_view",
-        value: "relation_view"
-    }, {
-        pId: 27,
-        text: "bi.preview_table",
-        value: "preview_table"
-    }, {
-        pId: 27,
-        text: "bi.adaptive_table",
-        value: "adaptive_table"
-    }, {
-        pId: 27,
-        text: "bi.adaptive_table(冻结表头)",
-        value: "adaptive_table2"
-    }, {
-        pId: 27,
-        text: "bi.custom_scroll_table",
-        value: "custom_scroll_table"
-    }, {
-        pId: 27,
-        text: "bi.page_table",
-        value: "page_table"
-    }, {
-        pId: 27,
-        text: "bi.page_table(冻结)",
-        value: "page_table2"
-    }, {
-        pId: 27,
-        text: "bi.page_table(调整列宽)",
-        value: "page_table3"
-    }, {
-        pId: 27,
-        text: "bi.excel_table",
-        value: "excel_table"
-    }, {
-        pId: 27,
-        text: "bi.sortable_table",
-        value: "sortable_table"
-    }, {
-        pId: 27,
-        text: "bi.excel_view_display_manager",
-        value: "excel_view_display_manager"
-    }, {
-        pId: 32,
-        text: "bi.sequence_table",
-        value: "sequence_table"
-    }, {
-        pId: 32,
-        text: "bi.sequence_table(带有汇总)",
-        value: "sequence_table2"
-    }, {
-        pId: 28,
-        text: "bi.upload_image",
-        value: "upload_image"
-    }, {
-        pId: 28,
-        text: "bi.web_page",
-        value: "web_page"
-    }, {
-        pId: 29,
-        text: "bi.arrangement_droppable",
-        value: "arrangement_droppable"
-    }, {
-        pId: 29,
-        text: "bi.arrangement",
-        value: "arrangement"
-    }, {
-        pId: 29,
-        text: "bi.adaptive_arrangement",
-        value: "adaptive_arrangement"
-    }, {
-        pId: 29,
-        text: "bi.arrangement(网格布局)",
-        value: "grid_arrangement"
-    }, {
-        pId: 29,
-        text: "bi.adaptive_arrangement(网格布局)",
-        value: "grid_adaptive_arrangement"
-    }, {
-        pId: 30,
-        text: "bi.simple_searcher",
-        value: "simple_searcher"
-    }, {
-        pId: 31,
-        text: "选色",
-        value: "select_color_combo"
-    }, {
-        pId: 31,
-        text: "bi.detail_chart",
-        value: "detail_chart"
-    }, {
-        pId: 31,
-        text: "柱形",
-        value: "column_charts"
-    }, {
-        pId: 31,
-        text: "条形图",
-        value: "bar_charts"
-    }, {
-        pId: 31,
-        text: "面积图",
-        value: "area_charts"
-    }, {
-        pId: 31,
-        text: "其他",
-        value: "other_charts"
-    }, {
-        pId: 33,
-        text: "文本标签",
-        value: "list_label"
-    }, {
-        pId: 33,
-        text: "树标签",
-        value: "tree_label"
-    }, {
-        pId: 34,
-        text: "滑块",
-        value: "slider"
-    }, {
-        pId: 35,
-        text: "区间双滑块",
-        value: "interval_slider"
-    }, {
-        pId: 36,
-        text: "文本列表",
-        value: "string_list"
-    }, {
-        pId: 37,
-        text: "树列表",
-        value: "tree_list"
-    }, {
-        pId: 38,
-        text: "日期面板",
-        value: "data_pane"
-    }, {
-        pId: 39,
-        text: "螺旋分析tab控件",
-        value: "dynamic_group_tab"
-    }, {
-        pId: 40,
-        text: "数值微调器",
-        value: "finetuning_number_editor"
-    }];
\ No newline at end of file
diff --git a/demo/css/main.css b/demo/css/main.css
index b8d1bc014..7a34fff76 100644
--- a/demo/css/main.css
+++ b/demo/css/main.css
@@ -1,6 +1,44 @@
 * {
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+.layout-bg-white {
+  background-color: #ffffff;
+}
+.layout-bg-gray {
+  background-color: #eeeeee;
+}
+.layout-bg1 {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+.layout-bg2 {
+  color: #ffffff;
+  background-color: #008B8B;
+}
+.layout-bg3 {
+  color: #ffffff;
+  background-color: #6495ED;
+}
+.layout-bg4 {
+  color: #ffffff;
+  background-color: #ff69b4;
+}
+.layout-bg5 {
+  color: #ffffff;
+  background-color: #B8860B;
+}
+.layout-bg6 {
+  color: #ffffff;
+  background-color: #d9534f;
+}
+.layout-bg7 {
+  color: #ffffff;
+  background-color: #ea4738;
+}
+.layout-bg8 {
+  color: #ffffff;
+  background-color: #6495ed;
+}
 .demo-main .bg1 {
   background-color: #178cdf;
 }
diff --git a/demo/js/config.js b/demo/js/config.js
new file mode 100644
index 000000000..e2a314c17
--- /dev/null
+++ b/demo/js/config.js
@@ -0,0 +1,124 @@
+Demo.CONFIG = [{
+    id: 1,
+    text: "布局"
+}, {
+    id: 2,
+    text: "基础控件"
+}, {
+    id: 3,
+    text: "实例控件"
+}, {
+    id: 4,
+    text: "详细控件"
+}, {
+    id: 5,
+    text: "通用组件"
+}, {
+    pId: 1,
+    text: "bi.center_adapt",
+    value: "demo.center_adapt"
+}, {
+    pId: 1,
+    text: "bi.float_center_adapt",
+    value: "float_center_adapt"
+}, {
+    pId: 1,
+    text: "bi.absolute_center_adapt",
+    value: "absolute_center_adapt"
+}, {
+    pId: 1,
+    text: "bi.flex_center",
+    value: "flex_center"
+}, {
+    pId: 1,
+    text: "bi.inline_center_adapt",
+    value: "inline_center_adapt"
+}, {
+    pId: 1,
+    text: "bi.vertical_adapt",
+    value: "vertical_adapt"
+}, {
+    pId: 1,
+    text: "bi.inline_vertical_adapt",
+    value: "inline_vertical_adapt"
+}, {
+    pId: 1,
+    text: "bi.horizontal_adapt",
+    value: "horizontal_adapt"
+}, {
+    pId: 1,
+    text: "bi.horizontal_auto",
+    value: "horizontal_auto"
+}, {
+    pId: 1,
+    text: "bi.horizontal_float",
+    value: "horizontal_float"
+}, {
+    pId: 1,
+    text: "bi.left_right_vertical_adapt",
+    value: "left_right_vertical_adapt"
+}, {
+    pId: 1,
+    text: "bi.center",
+    value: "center"
+}, {
+    pId: 1,
+    text: "bi.float_center",
+    value: "float_center"
+}, {
+    pId: 1,
+    text: "bi.vertical",
+    value: "vertical"
+}, {
+    pId: 1,
+    text: "bi.horizontal",
+    value: "horizontal"
+}, {
+    pId: 1,
+    text: "bi.border",
+    value: "border"
+}, {
+    pId: 1,
+    text: "bi.card",
+    value: "card"
+}, {
+    pId: 1,
+    text: "bi.left, bi.right",
+    value: "flow"
+}, {
+    pId: 1,
+    text: "bi.lattice",
+    value: "lattice"
+}, {
+    pId: 1,
+    text: "bi.inline",
+    value: "inline"
+}, {
+    pId: 1,
+    text: "bi.htape",
+    value: "htape"
+}, {
+    pId: 1,
+    text: "bi.vtape",
+    value: "vtape"
+}, {
+    pId: 1,
+    text: "bi.grid",
+    value: "grid"
+}, {
+    pId: 1,
+    text: "bi.table",
+    value: "table"
+}, {
+    pId: 1,
+    text: "bi.division",
+    value: "division"
+}, {
+    pId: 1,
+    text: "bi.window",
+    value: "window"
+}, {
+    pId: 1,
+    text: "bi.td",
+    value: "td"
+}];
\ No newline at end of file
diff --git a/demo/js/layout/demo.center_adapt.js b/demo/js/layout/demo.center_adapt.js
new file mode 100644
index 000000000..d93db8c74
--- /dev/null
+++ b/demo/js/layout/demo.center_adapt.js
@@ -0,0 +1,81 @@
+Demo.CenterAdapt = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-absolute"
+    },
+    render: function () {
+        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",
+            hgap: 10,
+            items: [{
+                type: "bi.label",
+                text: "Center Adapt 1，center adapt布局只会影响容器内部的位置（水平和垂直居中）而不会影响到内部控件本身属性",
+                cls: "layout-bg1",
+                height: 30
+            }, {
+                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"
+            }, {
+                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"
+            }]
+        })
+    },
+});
+$.shortcut("demo.center_adapt", Demo.CenterAdapt);
\ No newline at end of file
diff --git a/demo/js/west.js b/demo/js/west.js
index 5edecfeb5..922e336bd 100644
--- a/demo/js/west.js
+++ b/demo/js/west.js
@@ -14,7 +14,7 @@ Demo.West = BI.inherit(BI.Widget, {
                         self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v);
                     }
                 }],
-                items: Demo.WIDGET
+                items: Demo.CONFIG
             }]
         }
     }
diff --git a/demo/less/main.less b/demo/less/main.less
index 263f68859..02d570723 100644
--- a/demo/less/main.less
+++ b/demo/less/main.less
@@ -2,6 +2,54 @@
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+.layout-bg-white {
+  background-color: #ffffff;
+}
+
+.layout-bg-gray {
+  background-color: #eeeeee;
+}
+
+.layout-bg1 {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+
+.layout-bg2 {
+  color: #ffffff;
+  background-color: #008B8B;
+}
+
+.layout-bg3 {
+  color: #ffffff;
+  background-color: #6495ED;
+}
+
+.layout-bg4 {
+  color: #ffffff;
+  background-color: #ff69b4;
+}
+
+.layout-bg5 {
+  color: #ffffff;
+  background-color: #B8860B;
+}
+
+.layout-bg6 {
+  color: #ffffff;
+  background-color: #d9534f;
+}
+
+.layout-bg7 {
+  color: #ffffff;
+  background-color: #ea4738;
+}
+
+.layout-bg8 {
+  color: #ffffff;
+  background-color: #6495ed;
+}
+
 .demo-main {
   & .bg1 {
     background-color: #178cdf;