listview

bi/base.css

@@ -1342,30 +1342,30 @@ li.CodeMirror-hint-active {
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 /**********BI.BIListView*************/
-.bi-list-view {
+.bi-popup-view {
   position: fixed !important;
   overflow-y: visible !important;
   overflow-x: visible !important;
   overflow: visible !important;
   cursor: default;
 }
-.bi-list-view .list-view-outer {
+.bi-popup-view .list-view-outer {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
-.bi-list-view .list-view-toolbar {
+.bi-popup-view .list-view-toolbar {
   line-height: 30px;
 }
-.bi-list-view .list-view-toolbar > .center-element {
+.bi-popup-view .list-view-toolbar > .center-element {
   border-left: 1px solid #d4dadd;
 }
-.bi-list-view .list-view-toolbar > .first-element {
+.bi-popup-view .list-view-toolbar > .first-element {
   border-left: none;
 }
-.bi-theme-dark .bi-list-view .list-view-toolbar > .center-element {
+.bi-theme-dark .bi-popup-view .list-view-toolbar > .center-element {
   border-left: 1px solid #525466;
 }
-.bi-theme-dark .bi-list-view .list-view-toolbar > .first-element {
+.bi-theme-dark .bi-popup-view .list-view-toolbar > .first-element {
   border-left: none;
 }

bi/base.js

@@ -15155,7 +15155,7 @@ BI.FloatBox.EVENT_FLOAT_BOX_OPEN = "EVENT_FLOAT_BOX_CLOSED";
 BI.PopupView = BI.inherit(BI.Widget, {
     _defaultConfig: function () {
         return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-list-view",
+            baseCls: "bi-popup-view",
             maxWidth: 'auto',
             minWidth: 100,
             //maxHeight: 200,
@@ -15458,7 +15458,117 @@ BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.searcher_view", BI.SearcherView);/**
  * 表示当前对象
  *
- * Created by GUY on 2015/9/7.
+ * Created by GUY on 2017/5/23.
+ * @class BI.ListView
+ * @extends BI.Widget
+ */
+BI.ListView = BI.inherit(BI.Widget, {
+    props: function () {
+        return {
+            baseCls: "bi-list-view",
+            overscanHeight: 100,
+            blockSize: 10,
+            scrollTop: 0,
+            el: {},
+            items: []
+        };
+    },
+
+    init: function () {
+        var self = this;
+        this.renderedIndex = -1;
+        this.cache = {};
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.vertical",
+            items: [BI.extend({
+                type: "bi.vertical",
+                scrolly: false,
+                ref: function () {
+                    self.container = this;
+                }
+            }, o.el)],
+            element: this
+        }
+    },
+
+    mounted: function () {
+        var self = this, o = this.options;
+        this._populate();
+        this.element.scroll(function (e) {
+            o.scrollTop = self.element.scrollTop();
+            self._calculateBlocksToRender();
+        });
+        BI.ResizeDetector.addResizeListener(this, function () {
+            self._calculateBlocksToRender();
+        });
+    },
+
+    _renderMoreIf: function () {
+        var self = this, o = this.options;
+        var height = this.element.height();
+        var minContentHeight = o.scrollTop + height + o.overscanHeight;
+        var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0,
+            cnt = this.renderedIndex + 1;
+        var lastHeight;
+        var getElementHeight = function () {
+            return self.container.element.height();
+        };
+        while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) {
+            var items = o.items.slice(index, index + o.blockSize);
+            this.container.addItems(items);
+            var addedHeight = getElementHeight() - lastHeight;
+            this.cache[cnt] = {
+                index: index,
+                scrollTop: lastHeight,
+                height: addedHeight
+            };
+            this.renderedIndex = cnt;
+            cnt++;
+            index += o.blockSize;
+        }
+    },
+
+    _calculateBlocksToRender: function () {
+        var o = this.options;
+        this._renderMoreIf();
+    },
+
+    _populate: function (items) {
+        var o = this.options;
+        if (items && this.options.items !== items) {
+            this.options.items = items;
+        }
+        this._calculateBlocksToRender();
+        this.element.scrollTop(o.scrollTop);
+    },
+
+    restore: function () {
+        this.renderedIndex = -1;
+        this.container.empty();
+        this.cache = {};
+    },
+
+    populate: function (items) {
+        if (items && this.options.items !== items) {
+            this.restore();
+        }
+        this._populate();
+    },
+
+    destroyed: function () {
+        this.restore();
+    }
+});
+BI.shortcut('bi.list_view', BI.ListView);
+
+/**
+ * 表示当前对象
+ *
+ * Created by GUY on 2017/5/22.
  * @class BI.VirtualList
  * @extends BI.Widget
  */
@@ -15474,12 +15584,9 @@ BI.VirtualList = BI.inherit(BI.Widget, {
     },
 
     init: function () {
+        var self = this;
         this.renderedIndex = -1;
         this.cache = {};
-        this._scrollLock = false;
-        this._debounceRelease = BI.debounce(function () {
-            self._scrollLock = false;
-        }, 1000 / 60);
     },
 
     render: function () {
@@ -15553,8 +15660,6 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
         var start = this.tree.greatestLowerBound(minContentHeightFrom);
         var end = this.tree.leastUpperBound(minContentHeightTo);
-        // this.topBlank.setHeight(0);
-        // this.bottomBlank.setHeight(0);
         var needDestroyed = [];
         for (var i = 0; i < start; i++) {
             var index = this.cache[i].index;
@@ -15585,16 +15690,12 @@ BI.VirtualList = BI.inherit(BI.Widget, {
             }
             if (this.cache[i].destroyed === true) {
                 for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
-                    var w = this.container._children[j] = BI.createWidget(BI.extend({
+                    var w = this.container._addElement(j, BI.extend({root: true}, BI.stripEL(o.items[j])));
-                        root: true
-                    }, BI.stripEL(o.items[j])));
-                    w.element.css("position", "relative");//vertical布局下position要改成relative
                     currentFragment.appendChild(w.element[0]);
                 }
                 this.cache[i].destroyed = false;
             }
         }
-        this._scrollLock = true;
         this.container.element.prepend(firstFragment);
         this.container.element.append(lastFragment);
         this.topBlank.setHeight(this.cache[start < 0 ? 0 : start].scrollTop);
@@ -15603,7 +15704,6 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         BI.each(needDestroyed, function (i, child) {
             child && child._destroy();
         });
-        this._debounceRelease();
     },
 
     _populate: function (items) {
@@ -15628,6 +15728,7 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         this.renderedIndex = -1;
         this._clearChildren();
         this.cache = {};
+        this.options.scrollTop = 0;
     },
 
     populate: function (items) {

bi/core.js

@@ -15386,7 +15386,7 @@ BI.FloatBoxController = BI.inherit(BI.Controller, {
         }
         this.floatContainer[name] = BI.createWidget({
             type: "bi.absolute",
-            cls: "bi-list-view",
+            cls: "bi-popup-view",
             items: [{
                 el: (this.floatLayer[name] = BI.createWidget({
                     type: 'bi.absolute',
@@ -15574,7 +15574,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             }]
         });
         if (w) {
-            layout.element.addClass("bi-list-view");
+            layout.element.addClass("bi-popup-view");
             layout.element.css({
                 left: w.offset().left + (offset.left || 0),
                 top: w.offset().top + (offset.top || 0),

demo/js/config/core.js

@@ -105,7 +105,11 @@ Demo.CORE_CONFIG = [{
     pId: 102,
     text: "bi.collection_view",
     value: "demo.collection_view"
-},{
+}, {
+    pId: 102,
+    text: "bi.list_view",
+    value: "demo.list_view"
+}, {
     pId: 102,
     text: "bi.virtual_list",
     value: "demo.virtual_list"

demo/js/core/abstract/demo.list_view.js

@@ -0,0 +1,22 @@
+Demo.Func = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-func"
+    },
+    render: function () {
+        return {
+            type: "bi.list_view",
+            el: {
+                type: "bi.left"
+            },
+            items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) {
+                return BI.extend({}, item, {
+                    type: "bi.label",
+                    width: 200,
+                    height: 200,
+                    text: (i + 1) + "." + item.text,
+                });
+            })
+        }
+    }
+});
+BI.shortcut("demo.list_view", Demo.Func);

docs/base.css

@@ -1342,30 +1342,30 @@ li.CodeMirror-hint-active {
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 /**********BI.BIListView*************/
-.bi-list-view {
+.bi-popup-view {
   position: fixed !important;
   overflow-y: visible !important;
   overflow-x: visible !important;
   overflow: visible !important;
   cursor: default;
 }
-.bi-list-view .list-view-outer {
+.bi-popup-view .list-view-outer {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
-.bi-list-view .list-view-toolbar {
+.bi-popup-view .list-view-toolbar {
   line-height: 30px;
 }
-.bi-list-view .list-view-toolbar > .center-element {
+.bi-popup-view .list-view-toolbar > .center-element {
   border-left: 1px solid #d4dadd;
 }
-.bi-list-view .list-view-toolbar > .first-element {
+.bi-popup-view .list-view-toolbar > .first-element {
   border-left: none;
 }
-.bi-theme-dark .bi-list-view .list-view-toolbar > .center-element {
+.bi-theme-dark .bi-popup-view .list-view-toolbar > .center-element {
   border-left: 1px solid #525466;
 }
-.bi-theme-dark .bi-list-view .list-view-toolbar > .first-element {
+.bi-theme-dark .bi-popup-view .list-view-toolbar > .first-element {
   border-left: none;
 }

docs/base.js

@@ -15155,7 +15155,7 @@ BI.FloatBox.EVENT_FLOAT_BOX_OPEN = "EVENT_FLOAT_BOX_CLOSED";
 BI.PopupView = BI.inherit(BI.Widget, {
     _defaultConfig: function () {
         return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-list-view",
+            baseCls: "bi-popup-view",
             maxWidth: 'auto',
             minWidth: 100,
             //maxHeight: 200,
@@ -15458,7 +15458,117 @@ BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.searcher_view", BI.SearcherView);/**
  * 表示当前对象
  *
- * Created by GUY on 2015/9/7.
+ * Created by GUY on 2017/5/23.
+ * @class BI.ListView
+ * @extends BI.Widget
+ */
+BI.ListView = BI.inherit(BI.Widget, {
+    props: function () {
+        return {
+            baseCls: "bi-list-view",
+            overscanHeight: 100,
+            blockSize: 10,
+            scrollTop: 0,
+            el: {},
+            items: []
+        };
+    },
+
+    init: function () {
+        var self = this;
+        this.renderedIndex = -1;
+        this.cache = {};
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.vertical",
+            items: [BI.extend({
+                type: "bi.vertical",
+                scrolly: false,
+                ref: function () {
+                    self.container = this;
+                }
+            }, o.el)],
+            element: this
+        }
+    },
+
+    mounted: function () {
+        var self = this, o = this.options;
+        this._populate();
+        this.element.scroll(function (e) {
+            o.scrollTop = self.element.scrollTop();
+            self._calculateBlocksToRender();
+        });
+        BI.ResizeDetector.addResizeListener(this, function () {
+            self._calculateBlocksToRender();
+        });
+    },
+
+    _renderMoreIf: function () {
+        var self = this, o = this.options;
+        var height = this.element.height();
+        var minContentHeight = o.scrollTop + height + o.overscanHeight;
+        var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0,
+            cnt = this.renderedIndex + 1;
+        var lastHeight;
+        var getElementHeight = function () {
+            return self.container.element.height();
+        };
+        while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) {
+            var items = o.items.slice(index, index + o.blockSize);
+            this.container.addItems(items);
+            var addedHeight = getElementHeight() - lastHeight;
+            this.cache[cnt] = {
+                index: index,
+                scrollTop: lastHeight,
+                height: addedHeight
+            };
+            this.renderedIndex = cnt;
+            cnt++;
+            index += o.blockSize;
+        }
+    },
+
+    _calculateBlocksToRender: function () {
+        var o = this.options;
+        this._renderMoreIf();
+    },
+
+    _populate: function (items) {
+        var o = this.options;
+        if (items && this.options.items !== items) {
+            this.options.items = items;
+        }
+        this._calculateBlocksToRender();
+        this.element.scrollTop(o.scrollTop);
+    },
+
+    restore: function () {
+        this.renderedIndex = -1;
+        this.container.empty();
+        this.cache = {};
+    },
+
+    populate: function (items) {
+        if (items && this.options.items !== items) {
+            this.restore();
+        }
+        this._populate();
+    },
+
+    destroyed: function () {
+        this.restore();
+    }
+});
+BI.shortcut('bi.list_view', BI.ListView);
+
+/**
+ * 表示当前对象
+ *
+ * Created by GUY on 2017/5/22.
  * @class BI.VirtualList
  * @extends BI.Widget
  */
@@ -15474,12 +15584,9 @@ BI.VirtualList = BI.inherit(BI.Widget, {
     },
 
     init: function () {
+        var self = this;
         this.renderedIndex = -1;
         this.cache = {};
-        this._scrollLock = false;
-        this._debounceRelease = BI.debounce(function () {
-            self._scrollLock = false;
-        }, 1000 / 60);
     },
 
     render: function () {
@@ -15553,8 +15660,6 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
         var start = this.tree.greatestLowerBound(minContentHeightFrom);
         var end = this.tree.leastUpperBound(minContentHeightTo);
-        // this.topBlank.setHeight(0);
-        // this.bottomBlank.setHeight(0);
         var needDestroyed = [];
         for (var i = 0; i < start; i++) {
             var index = this.cache[i].index;
@@ -15585,16 +15690,12 @@ BI.VirtualList = BI.inherit(BI.Widget, {
             }
             if (this.cache[i].destroyed === true) {
                 for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
-                    var w = this.container._children[j] = BI.createWidget(BI.extend({
+                    var w = this.container._addElement(j, BI.extend({root: true}, BI.stripEL(o.items[j])));
-                        root: true
-                    }, BI.stripEL(o.items[j])));
-                    w.element.css("position", "relative");//vertical布局下position要改成relative
                     currentFragment.appendChild(w.element[0]);
                 }
                 this.cache[i].destroyed = false;
             }
         }
-        this._scrollLock = true;
         this.container.element.prepend(firstFragment);
         this.container.element.append(lastFragment);
         this.topBlank.setHeight(this.cache[start < 0 ? 0 : start].scrollTop);
@@ -15603,7 +15704,6 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         BI.each(needDestroyed, function (i, child) {
             child && child._destroy();
         });
-        this._debounceRelease();
     },
 
     _populate: function (items) {
@@ -15628,6 +15728,7 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         this.renderedIndex = -1;
         this._clearChildren();
         this.cache = {};
+        this.options.scrollTop = 0;
     },
 
     populate: function (items) {

docs/core.js

@@ -20984,7 +20984,7 @@ BI.FloatBoxController = BI.inherit(BI.Controller, {
         }
         this.floatContainer[name] = BI.createWidget({
             type: "bi.absolute",
-            cls: "bi-list-view",
+            cls: "bi-popup-view",
             items: [{
                 el: (this.floatLayer[name] = BI.createWidget({
                     type: 'bi.absolute',
@@ -21172,7 +21172,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             }]
         });
         if (w) {
-            layout.element.addClass("bi-list-view");
+            layout.element.addClass("bi-popup-view");
             layout.element.css({
                 left: w.offset().left + (offset.left || 0),
                 top: w.offset().top + (offset.top || 0),

docs/demo.js

@@ -3038,7 +3038,11 @@ Demo.COMPONENT_CONFIG = [{
     pId: 102,
     text: "bi.collection_view",
     value: "demo.collection_view"
-},{
+}, {
+    pId: 102,
+    text: "bi.list_view",
+    value: "demo.list_view"
+}, {
     pId: 102,
     text: "bi.virtual_list",
     value: "demo.virtual_list"
@@ -3407,6 +3411,27 @@ BI.shortcut("demo.grid_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-func"
     },
+    render: function () {
+        return {
+            type: "bi.list_view",
+            el: {
+                type: "bi.left"
+            },
+            items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) {
+                return BI.extend({}, item, {
+                    type: "bi.label",
+                    width: 200,
+                    height: 200,
+                    text: (i + 1) + "." + item.text,
+                });
+            })
+        }
+    }
+});
+BI.shortcut("demo.list_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-func"
+    },
 
     _createItems: function () {
         var items = BI.makeArray(100, {

src/base/layer/layer.popup.js

@@ -6,7 +6,7 @@
 BI.PopupView = BI.inherit(BI.Widget, {
     _defaultConfig: function () {
         return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-list-view",
+            baseCls: "bi-popup-view",
             maxWidth: 'auto',
             minWidth: 100,
             //maxHeight: 200,

src/base/list/listview.js

@@ -0,0 +1,110 @@
+/**
+ * 表示当前对象
+ *
+ * Created by GUY on 2017/5/23.
+ * @class BI.ListView
+ * @extends BI.Widget
+ */
+BI.ListView = BI.inherit(BI.Widget, {
+    props: function () {
+        return {
+            baseCls: "bi-list-view",
+            overscanHeight: 100,
+            blockSize: 10,
+            scrollTop: 0,
+            el: {},
+            items: []
+        };
+    },
+
+    init: function () {
+        var self = this;
+        this.renderedIndex = -1;
+        this.cache = {};
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.vertical",
+            items: [BI.extend({
+                type: "bi.vertical",
+                scrolly: false,
+                ref: function () {
+                    self.container = this;
+                }
+            }, o.el)],
+            element: this
+        }
+    },
+
+    mounted: function () {
+        var self = this, o = this.options;
+        this._populate();
+        this.element.scroll(function (e) {
+            o.scrollTop = self.element.scrollTop();
+            self._calculateBlocksToRender();
+        });
+        BI.ResizeDetector.addResizeListener(this, function () {
+            self._calculateBlocksToRender();
+        });
+    },
+
+    _renderMoreIf: function () {
+        var self = this, o = this.options;
+        var height = this.element.height();
+        var minContentHeight = o.scrollTop + height + o.overscanHeight;
+        var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0,
+            cnt = this.renderedIndex + 1;
+        var lastHeight;
+        var getElementHeight = function () {
+            return self.container.element.height();
+        };
+        while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) {
+            var items = o.items.slice(index, index + o.blockSize);
+            this.container.addItems(items);
+            var addedHeight = getElementHeight() - lastHeight;
+            this.cache[cnt] = {
+                index: index,
+                scrollTop: lastHeight,
+                height: addedHeight
+            };
+            this.renderedIndex = cnt;
+            cnt++;
+            index += o.blockSize;
+        }
+    },
+
+    _calculateBlocksToRender: function () {
+        var o = this.options;
+        this._renderMoreIf();
+    },
+
+    _populate: function (items) {
+        var o = this.options;
+        if (items && this.options.items !== items) {
+            this.options.items = items;
+        }
+        this._calculateBlocksToRender();
+        this.element.scrollTop(o.scrollTop);
+    },
+
+    restore: function () {
+        this.renderedIndex = -1;
+        this.container.empty();
+        this.cache = {};
+    },
+
+    populate: function (items) {
+        if (items && this.options.items !== items) {
+            this.restore();
+        }
+        this._populate();
+    },
+
+    destroyed: function () {
+        this.restore();
+    }
+});
+BI.shortcut('bi.list_view', BI.ListView);
+

src/base/list/virtuallist.js

@@ -1,7 +1,7 @@
 /**
  * 表示当前对象
  *
- * Created by GUY on 2015/9/7.
+ * Created by GUY on 2017/5/22.
  * @class BI.VirtualList
  * @extends BI.Widget
  */
@@ -17,12 +17,9 @@ BI.VirtualList = BI.inherit(BI.Widget, {
     },
 
     init: function () {
+        var self = this;
         this.renderedIndex = -1;
         this.cache = {};
-        this._scrollLock = false;
-        this._debounceRelease = BI.debounce(function () {
-            self._scrollLock = false;
-        }, 1000 / 60);
     },
 
     render: function () {
@@ -96,8 +93,6 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
         var start = this.tree.greatestLowerBound(minContentHeightFrom);
         var end = this.tree.leastUpperBound(minContentHeightTo);
-        // this.topBlank.setHeight(0);
-        // this.bottomBlank.setHeight(0);
         var needDestroyed = [];
         for (var i = 0; i < start; i++) {
             var index = this.cache[i].index;
@@ -128,16 +123,12 @@ BI.VirtualList = BI.inherit(BI.Widget, {
             }
             if (this.cache[i].destroyed === true) {
                 for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
-                    var w = this.container._children[j] = BI.createWidget(BI.extend({
+                    var w = this.container._addElement(j, BI.extend({root: true}, BI.stripEL(o.items[j])));
-                        root: true
-                    }, BI.stripEL(o.items[j])));
-                    w.element.css("position", "relative");//vertical布局下position要改成relative
                     currentFragment.appendChild(w.element[0]);
                 }
                 this.cache[i].destroyed = false;
             }
         }
-        this._scrollLock = true;
         this.container.element.prepend(firstFragment);
         this.container.element.append(lastFragment);
         this.topBlank.setHeight(this.cache[start < 0 ? 0 : start].scrollTop);
@@ -146,7 +137,6 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         BI.each(needDestroyed, function (i, child) {
             child && child._destroy();
         });
-        this._debounceRelease();
     },
 
     _populate: function (items) {
@@ -171,6 +161,7 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         this.renderedIndex = -1;
         this._clearChildren();
         this.cache = {};
+        this.options.scrollTop = 0;
     },
 
     populate: function (items) {

src/core/controller/controller.floatbox.js

@@ -47,7 +47,7 @@ BI.FloatBoxController = BI.inherit(BI.Controller, {
         }
         this.floatContainer[name] = BI.createWidget({
             type: "bi.absolute",
-            cls: "bi-list-view",
+            cls: "bi-popup-view",
             items: [{
                 el: (this.floatLayer[name] = BI.createWidget({
                     type: 'bi.absolute',

src/core/controller/controller.layer.js

@@ -93,7 +93,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             }]
         });
         if (w) {
-            layout.element.addClass("bi-list-view");
+            layout.element.addClass("bi-popup-view");
             layout.element.css({
                 left: w.offset().left + (offset.left || 0),
                 top: w.offset().top + (offset.top || 0),

src/css/base/view/popupview.css

@@ -2,30 +2,30 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 /**********BI.BIListView*************/
-.bi-list-view {
+.bi-popup-view {
   position: fixed !important;
   overflow-y: visible !important;
   overflow-x: visible !important;
   overflow: visible !important;
   cursor: default;
 }
-.bi-list-view .list-view-outer {
+.bi-popup-view .list-view-outer {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
-.bi-list-view .list-view-toolbar {
+.bi-popup-view .list-view-toolbar {
   line-height: 30px;
 }
-.bi-list-view .list-view-toolbar > .center-element {
+.bi-popup-view .list-view-toolbar > .center-element {
   border-left: 1px solid #d4dadd;
 }
-.bi-list-view .list-view-toolbar > .first-element {
+.bi-popup-view .list-view-toolbar > .first-element {
   border-left: none;
 }
-.bi-theme-dark .bi-list-view .list-view-toolbar > .center-element {
+.bi-theme-dark .bi-popup-view .list-view-toolbar > .center-element {
   border-left: 1px solid #525466;
 }
-.bi-theme-dark .bi-list-view .list-view-toolbar > .first-element {
+.bi-theme-dark .bi-popup-view .list-view-toolbar > .first-element {
   border-left: none;
 }

src/less/base/view/popupview.less

@@ -1,7 +1,7 @@
 @import "../../bibase";
 
 /**********BI.BIListView*************/
-.bi-list-view {
+.bi-popup-view {
   position: fixed !important;
   overflow-y: visible !important;
   overflow-x: visible !important;
@@ -22,7 +22,7 @@
 }
 
 .bi-theme-dark {
-  .bi-list-view {
+  .bi-popup-view {
     & .list-view-toolbar {
       & > .center-element {
         border-left: 1px solid @color-bi-border-line-theme-dark;