Flex中怎么給表格中的滾動(dòng)條定位避免刷新回到原處
更新時(shí)間：2014年10月20日 16:27:25 投稿：whsnow
如果表格中的字段過多，會(huì)出現(xiàn)滾動(dòng)條，在將滾動(dòng)條滾到一定的位置時(shí)，重新刷新又回到原處，本文教大家如何給滾動(dòng)條定位
1、問題背景
如果表格中的字段過多，會(huì)出現(xiàn)滾動(dòng)條，在將滾動(dòng)條滾到一定的位置時(shí)，重新刷新表格，滾動(dòng)條會(huì)回到原處，原來查看的字段還得繼續(xù)滾動(dòng)，才能查看到。
2、實(shí)現(xiàn)實(shí)例
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="initHandler(event)"
width="100%" height="100%">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
//表格數(shù)據(jù)綁定
private var gridArray:ArrayCollection = new ArrayCollection([
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"}
]);
/**
* 初始化函數(shù)
*/
protected function initHandler(event:FlexEvent):void
{
}
/**
* 刷新按鈕函數(shù)
*/
protected function refresh_clickHandler(event:MouseEvent):void
{
var hx:Object = hsb.left;
var hy:Number = hsb.y;
//var dx:Number = dataGrid.contentMouseX;
//var dy:Number = dataGrid.contentMouseY;
//Alert.show("hx："+hx+"\n"+"hy: "+hy + "\n" + "dx: " + dx + "\n" + "dy: " + dy);
Alert.show("hx："+hx+"\n"+"hy: "+hy);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 將非可視元素（例如服務(wù)、值對(duì)象）放在此處 -->
</fx:Declarations>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="20"
paddingTop="10" horizontalAlign="center">
<mx:HBox width="100%" height="30">
<s:Label width="100%"/>
<s:Button id="refresh" label="刷新" click="refresh_clickHandler(event)"/>
</mx:HBox>
<mx:DataGrid width="1350" height="90%" id="dataGrid" dataProvider="{gridArray}" horizontalScrollPolicy="on" textAlign="center">
<mx:columns>
<mx:DataGridColumn headerText="2013年01月" dataField="Jan" width="200"/>
<mx:DataGridColumn headerText="2013年02月" dataField="Feb" width="200"/>
<mx:DataGridColumn headerText="2013年03月" dataField="Mar" width="200"/>
<mx:DataGridColumn headerText="2013年04月" dataField="Apr" width="200"/>
<mx:DataGridColumn headerText="2013年05月" dataField="May" width="200"/>
<mx:DataGridColumn headerText="2013年06月" dataField="Jun" width="200"/>
<mx:DataGridColumn headerText="2013年07月" dataField="Jul" width="200"/>
<mx:DataGridColumn headerText="2013年08月" dataField="Aug" width="200"/>
<mx:DataGridColumn headerText="2013年09月" dataField="Sep" width="200"/>
<mx:DataGridColumn headerText="2013年10月" dataField="Oct" width="200"/>
<mx:DataGridColumn headerText="2013年11月" dataField="Nov" width="200"/>
<mx:DataGridColumn headerText="2013年12月" dataField="Dec" width="200"/>
<mx:DataGridColumn headerText="2014年01月" dataField="Jan1" width="200"/>
<mx:DataGridColumn headerText="2014年02月" dataField="Feb1" width="200"/>
<mx:DataGridColumn headerText="2014年03月" dataField="Mar1" width="200"/>
<mx:DataGridColumn headerText="2014年04月" dataField="Apr1" width="200"/>
<mx:DataGridColumn headerText="2014年05月" dataField="May1" width="200"/>
<mx:DataGridColumn headerText="2014年06月" dataField="Jun1" width="200"/>
<mx:DataGridColumn headerText="2014年07月" dataField="Jul1" width="200"/>
<mx:DataGridColumn headerText="2014年08月" dataField="Aug1" width="200"/>
<mx:DataGridColumn headerText="2014年09月" dataField="Sep1" width="200"/>
<mx:DataGridColumn headerText="2014年10月" dataField="Oct1" width="200"/>
<mx:DataGridColumn headerText="2014年11月" dataField="Nov1" width="200"/>
<mx:DataGridColumn headerText="2014年12月" dataField="Dec1" width="200"/>
</mx:columns>
</mx:DataGrid>
<!--
<s:HScrollBar id="hsb" width="100%" viewport="{dataGrid}"/>
-->
<s:HScrollBar id="hsb" width="100%"/>
</mx:VBox>
</s:Application>
3、實(shí)現(xiàn)結(jié)果
相關(guān)文章
Flex中實(shí)現(xiàn)對(duì)一個(gè)text渲染不同的字體顏色示例
本文為大家詳細(xì)介紹下Flex中如何實(shí)現(xiàn)對(duì)一個(gè)text渲染不同的字體顏色，具體的實(shí)現(xiàn)思路及代碼如下，有興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
flex調(diào)用webservice中的自定義類的方法
flex如何調(diào)用webservice中的自定義類，下面有個(gè)不錯(cuò)的示例，不了解的朋友可以參考下2014-01-01
Flex中TitleWindow傳值思路及實(shí)現(xiàn)
這篇文章主要介紹了Flex中TitleWindow傳值思路及實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
動(dòng)態(tài)加載swf皮膚，對(duì)經(jīng)常使用flex的朋友來說并不陌生，在本文為大家詳細(xì)介紹下具體的實(shí)現(xiàn)方法，感興趣的朋友可以參考下2013-09-09
本節(jié)主要介紹了flex actionScript讀取文件實(shí)現(xiàn)代碼，需要的朋友可以參考下2014-07-07
下面小編就為大家?guī)硪黄媪私鈌lex的用途。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
Flex上傳本地圖片并提前瀏覽的實(shí)現(xiàn)方法
個(gè)性頭像最終需要上傳到服務(wù)器的文件系統(tǒng)中，但是程序希望在用戶選擇后直接有個(gè)預(yù)覽，針對(duì)這個(gè)問題，下面有個(gè)不粗的實(shí)現(xiàn)，希望對(duì)大家有所幫助2014-01-01
如何在Renderer中設(shè)置屬性 Renderer中設(shè)置屬性的方法實(shí)例
如何在Renderer中設(shè)置屬性 Renderer中設(shè)置屬性的方法實(shí)例，需要的朋友可以參考一下2013-06-06
Flex打開新窗口將主窗口數(shù)據(jù)傳給子窗口然后返回
主窗口打開子窗口，主窗口有數(shù)據(jù)傳給打開的子窗口，子窗口關(guān)閉時(shí)直接返回主窗口，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考2013-12-12
flex中event.preventDefault()方法取消事件的默認(rèn)行為
當(dāng)點(diǎn)擊datagrid的第一和第四項(xiàng)時(shí)，itemEdit事件將不起作用，許多事件都有默認(rèn)執(zhí)行的關(guān)聯(lián)行為，接下來為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈2013-04-04