DESIGN-4216 feat: 容器组件提供一些滚动api

src/base/combination/group.button.js

@@ -197,7 +197,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
             items = this._packageItems(items, this._packageBtns(this.buttons));
         }
 
-        this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items)));
+        this.layouts = BI.createWidget(BI.extend({ element: this }, this._packageLayout(items)));
     },
 
     setNotSelectedValue: function (v) {
@@ -331,6 +331,16 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
         return node;
     },
 
+    /**
+     * 滚动到指定的节点
+     */
+    scrollToValue: function (value, scrollIntoViewOptions) {
+        var node = this.getNodeByValue(value);
+        if (node) {
+            node.element[0].scrollIntoView(scrollIntoViewOptions);
+        }
+    },
+
     empty: function () {
         BI.ButtonGroup.superclass.empty.apply(this, arguments);
         this.options.items = [];

src/base/combination/group.virtual.js

@@ -96,6 +96,20 @@ BI.VirtualGroup = BI.inherit(BI.Widget, {
         return v;
     },
 
+    getNodeByValue: function (value) {
+        return this.buttonMap[value];
+    },
+
+    /**
+     * 滚动到指定的节点
+     */
+    scrollToValue: function (value, scrollIntoViewOptions) {
+        var node = this.getNodeByValue(value);
+        if (node) {
+            node.element[0].scrollIntoView(scrollIntoViewOptions);
+        }
+    },
+
     getValue: function () {
         var v = [];
         BI.each(this.buttonMap, function (i, item) {
@@ -113,7 +127,7 @@ BI.VirtualGroup = BI.inherit(BI.Widget, {
         this.options.items = items;
         items = this._packageBtns(items);
         if (!this.layouts) {
-            this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items)));
+            this.layouts = BI.createWidget(BI.extend({ element: this }, this._packageLayout(items)));
         } else {
             this.layouts.populate(items, {
                 context: this

src/base/list/listview.js

@@ -1,5 +1,5 @@
 /**
- * 表示当前对象
+ * 边滚动边加载的列表控件
  *
  * Created by GUY on 2017/5/23.
  * @class BI.ListView
@@ -33,8 +33,8 @@ BI.ListView = BI.inherit(BI.Widget, {
             items: [BI.extend({
                 type: "bi.vertical",
                 scrolly: false,
-                ref: function () {
-                    self.container = this;
+                ref: function (_ref) {
+                    self.container = _ref;
                 }
             }, o.el)],
             element: this
@@ -69,8 +69,8 @@ BI.ListView = BI.inherit(BI.Widget, {
         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 index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0;
+        var cnt = this.renderedIndex + 1;
         var lastHeight;
         var getElementHeight = function () {
             return self.container.element.height();
@@ -112,6 +112,12 @@ BI.ListView = BI.inherit(BI.Widget, {
         this.cache = {};
     },
 
+    scrollTo: function (scrollTop) {
+        this.options.scrollTop = scrollTop;
+        this._calculateBlocksToRender();
+        this.element.scrollTop(scrollTop);
+    },
+
     populate: function (items) {
         if (items && this.options.items !== items) {
             this.restore();

src/base/list/virtuallist.js

@@ -46,7 +46,6 @@ BI.VirtualList = BI.inherit(BI.Widget, {
                     self.bottomBlank = this;
                 }
             }],
-            element: this
         };
     },
 
@@ -78,7 +77,7 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) {
             var items = o.items.slice(index, index + o.blockSize);
             this.container.addItems(items.map(function (item, i) {
-                return o.itemFormatter(item, index + i)
+                return o.itemFormatter(item, index + i);
             }), this);
             var addedHeight = getElementHeight() - lastHeight;
             this.tree.set(cnt, addedHeight);
@@ -177,6 +176,12 @@ BI.VirtualList = BI.inherit(BI.Widget, {
         this.container.attr("items", []);
     },
 
+    scrollTo: function (scrollTop) {
+        this.options.scrollTop = scrollTop;
+        this._calculateBlocksToRender();
+        this.element.scrollTop(scrollTop);
+    },
+
     restore: function () {
         this.renderedIndex = -1;
         this._clearChildren();

typescript/base/combination/group.button.ts

@@ -40,4 +40,6 @@ export declare class ButtonGroup extends Widget {
     getNodeByValue(value: any): any;
 
     getValue<T>(): T[];
+    
+    scrollToValue(value: any, scrollIntoViewOptions?: boolean | Obj): void;
 }

typescript/base/combination/group.virtual.ts

@@ -13,4 +13,6 @@ export declare class VirtualGroup extends Widget {
     getValue<T>(): T[];
 
     populate(items?: any, ...args: any[]): void
+
+    scrollToValue(value: any, scrollIntoViewOptions?: boolean | Obj): void;
 }

typescript/base/list/listview.ts

@@ -1,4 +1,4 @@
-import { Widget } from '../../core/widget';
+import { Widget } from "../../core/widget";
 
 export declare class ListView extends Widget {
     static xtype: string;
@@ -6,4 +6,6 @@ export declare class ListView extends Widget {
     restore(): void;
 
     populate<T>(items: T[]): void;
+
+    scrollTo(scrollTop: number): void;
 }

typescript/base/list/virtuallist.ts

@@ -0,0 +1,11 @@
+import { Widget } from "../../core/widget";
+
+export declare class VirtualList extends Widget {
+    static xtype: string;
+
+    restore(): void;
+
+    populate<T>(items: T[]): void;
+
+    scrollTo(scrollTop: number): void;
+}

typescript/index.ts

@@ -20,12 +20,12 @@ import { IconChangeButton } from "./case/button/icon/icon.change";
 import { MultiSelectItem } from "./case/button/item.multiselect";
 import { BubbleCombo } from "./case/combo/bubblecombo/combo.bubble";
 import { TextValueCombo } from "./case/combo/combo.textvalue";
-import { SmallTextValueCombo } from './case/combo/combo.textvaluesmall';
+import { SmallTextValueCombo } from "./case/combo/combo.textvaluesmall";
 import { SearchTextValueCombo } from "./case/combo/searchtextvaluecombo/combo.searchtextvalue";
 import { SignEditor } from "./case/editor/editor.sign";
-import { StateEditor } from './case/editor/editor.state';
+import { StateEditor } from "./case/editor/editor.state";
 import { AllValueMultiTextValueCombo } from "./component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo";
-import { Form } from './component/form/form';
+import { Form } from "./component/form/form";
 import { AbstractTreeValueChooser } from "./component/treevaluechooser/abstract.treevaluechooser";
 import { AbstractListTreeValueChooser } from "./component/treevaluechooser/abstract.treevaluechooser.list";
 import { Action, ActionFactory } from "./core/action/action";
@@ -53,7 +53,10 @@ import { DownListCombo } from "./widget/downlist/combo.downlist";
 import { DownListPopup } from "./widget/downlist/popup.downlist";
 import { Icon } from "./base/single/icon/icon";
 import { LeftVerticalAdaptLayout } from "./core/wrapper/layout/adapt/adapt.leftvertical";
-import { LeftRightVerticalAdaptLayout, RightVerticalAdaptLayout } from "./core/wrapper/layout/adapt/adapt.leftrightvertical";
+import {
+    LeftRightVerticalAdaptLayout,
+    RightVerticalAdaptLayout,
+} from "./core/wrapper/layout/adapt/adapt.leftrightvertical";
 import { IconTextIconItem } from "./base/single/button/listitem/icontexticonitem";
 import { HorizontalAutoLayout } from "./core/wrapper/layout/adapt/auto.horizontal";
 import { InlineVerticalAdaptLayout } from "./core/wrapper/layout/adapt/inline.vertical";
@@ -82,14 +85,14 @@ import { MultiSelectCombo } from "./widget/multiselect/multiselect.combo";
 import { SearchEditor } from "./widget/editor/editor.search";
 import { MultiLayerSingleLevelTree } from "./widget/multilayersingletree/multilayersingletree.leveltree";
 import { SimpleColorChooser } from "./case/colorchooser/colorchooser.simple";
-import { ColorChooser } from './case/colorchooser/colorchooser';
+import { ColorChooser } from "./case/colorchooser/colorchooser";
 import { A } from "./base/a/a";
 import { Html } from "./base/single/html/html";
 import { Switcher } from "./base/combination/switcher";
-import { Expander } from './base/combination/expander';
+import { Expander } from "./base/combination/expander";
 import { Loader } from "./base/combination/loader";
 import { ListPane } from "./case/layer/pane.list";
-import { MultiPopupView } from './case/layer/layer.multipopup';
+import { MultiPopupView } from "./case/layer/layer.multipopup";
 import { MultiSelectBar } from "./case/toolbar/toolbar.multiselect";
 import { SelectList } from "./case/list/list.select";
 import { AbstractAllValueChooser } from "./component/allvaluechooser/abstract.allvaluechooser";
@@ -130,7 +133,7 @@ import { TextValueDownListCombo } from "./widget/textvaluedownlistcombo/combo.te
 import { Switch } from "./case/button/switch";
 import { HorizontalLayout } from "./core/wrapper/layout/layout.horizontal";
 import { ShelterEditor } from "./case/editor/editor.shelter";
-import { TextTrigger } from './case/trigger/trigger.text';
+import { TextTrigger } from "./case/trigger/trigger.text";
 import { SelectTextTrigger } from "./case/trigger/trigger.text.select";
 import { DateInterval } from "./widget/timeinterval/dateinterval";
 import { DynamicDatePane } from "./widget/datepane/datepane";
@@ -151,43 +154,44 @@ import { Segment } from "./case/segment/segment";
 import { LinearSegment } from "./case/linersegment/linear.segment";
 import { Img } from "./base/single/img/img";
 import { EditorIconCheckCombo } from "./case/combo/editoriconcheckcombo/combo.editiconcheck";
-import { IconTextValueCombo } from './case/combo/icontextvaluecombo/combo.icontextvalue';
-import { ListView } from './base/list/listview';
-import { FloatCenterLayout } from './core/wrapper/layout/middle/middle.float.center';
-import { _msg } from './base/foundation/message';
-import { _web } from './core/platform/web';
-import { DynamicYearMonthPopup } from './widget/yearmonth/popup.yearmonth';
-import { _utils } from './core/utils';
+import { IconTextValueCombo } from "./case/combo/icontextvaluecombo/combo.icontextvalue";
+import { ListView } from "./base/list/listview";
+import { VirtualList } from "./base/list/virtuallist";
+import { FloatCenterLayout } from "./core/wrapper/layout/middle/middle.float.center";
+import { _msg } from "./base/foundation/message";
+import { _web } from "./core/platform/web";
+import { DynamicYearMonthPopup } from "./widget/yearmonth/popup.yearmonth";
+import { _utils } from "./core/utils";
 import { Controller } from "./core/controller/controller";
 import { LayerController } from "./core/controller/controller.layer";
 import { DateCalendarPopup } from "./widget/date/calendar/popup.calendar.date";
 import { Tree, Node } from "./core/utils/tree";
 import { TextNode } from "./base/single/button/node/textnode";
 import { TextValueCheckComboPopup } from "./case/combo/textvaluecheckcombo/popup.textvaluecheck";
-import { ImageButton } from './base/single/button/buttons/button.image';
+import { ImageButton } from "./base/single/button/buttons/button.image";
 import { History, Router } from "./router/router";
-import { DateTimeCombo } from './widget/datetime/datetime.combo';
+import { DateTimeCombo } from "./widget/datetime/datetime.combo";
 import { FloatHorizontalLayout } from "./core/wrapper/layout/adapt/float.horizontal";
 import { AdaptiveLayout } from "./core/wrapper/layout/layout.adaptive";
-import { HexColorChooserPopup } from './case/colorchooser/colorchooser.popup.hex';
-import { BlankIconTextItem } from './base/single/button/listitem/blankicontextitem';
+import { HexColorChooserPopup } from "./case/colorchooser/colorchooser.popup.hex";
+import { BlankIconTextItem } from "./base/single/button/listitem/blankicontextitem";
 import { Broadcasts, Layers } from "./base/base";
 import { BroadcastController } from "./core/controller/controller.broadcast";
 import { Pager } from "./base/pager/pager";
-import { TimeInterval } from './widget/timeinterval/timeinterval';
-import { DynamicDateTimePane } from './widget/datetimepane/datetimepane';
-import { SingleSelectInsertList } from './widget/singleselect/singleselectlist.insert';
-import { MultiSelectTree } from './widget/multiselecttree/multiselecttree';
+import { TimeInterval } from "./widget/timeinterval/timeinterval";
+import { DynamicDateTimePane } from "./widget/datetimepane/datetimepane";
+import { SingleSelectInsertList } from "./widget/singleselect/singleselectlist.insert";
+import { MultiSelectTree } from "./widget/multiselecttree/multiselecttree";
 import { HtmlLabel } from "./base/single/label/html.label";
-import { TreeValueChooserPane } from './component/treevaluechooser/pane.treevaluechooser';
-import { TdLayout } from './core/wrapper/layout/layout.td';
-import { MultiLayerSelectLevelTree } from './widget/multilayerselecttree/multilayerselecttree.leveltree';
-import { SelectTreeExpander } from './widget/selecttree/selecttree.expander';
+import { TreeValueChooserPane } from "./component/treevaluechooser/pane.treevaluechooser";
+import { TdLayout } from "./core/wrapper/layout/layout.td";
+import { MultiLayerSelectLevelTree } from "./widget/multilayerselecttree/multilayerselecttree.leveltree";
+import { SelectTreeExpander } from "./widget/selecttree/selecttree.expander";
 import { DownListGroupItem } from "./widget/downlist/item.downlistgroup";
 import { VerticalStickyLayout } from "./core/wrapper/layout/sticky/sticky.vertical";
 import { HorizontalStickyLayout } from "./core/wrapper/layout/sticky/sticky.horizontal";
 import { TableLayout } from "./core/wrapper/layout/layout.table";
-import './shims-tsx';
+import "./shims-tsx";
 import { Workers } from "./core/worker/workers";
 
 
@@ -356,6 +360,7 @@ export interface BI extends _func, _i18n, _base, _inject, _var, _web, _utils {
     EditorIconCheckCombo: typeof EditorIconCheckCombo;
     IconTextValueCombo: typeof IconTextValueCombo;
     ListView: typeof ListView;
+    VirtualList: typeof VirtualList;
     FloatCenterLayout: typeof FloatCenterLayout;
     Msg: _msg;
     DynamicYearMonthPopup: typeof DynamicYearMonthPopup;
@@ -550,6 +555,7 @@ export {
     EditorIconCheckCombo,
     IconTextValueCombo,
     ListView,
+    VirtualList,
     FloatCenterLayout,
     DynamicYearMonthPopup,
     DateCalendarPopup,