Flex組件使用文檔

/Flex組件使用文檔1．Panel組件的使用 效果圖：使用場(chǎng)景：對(duì)于tree或者datagrid建議使用panel包裝，可以設(shè)計(jì)panel顯示的label例如***樹或者***列表。使用方法：<mx:Panelid=""width="100%"heigh="100%"title="系統(tǒng)匯總"> <mx:Tree/></mx:Panel>2．ExtPanel組件的使用效果圖：使用場(chǎng)景： 當(dāng)需要在panel的標(biāo)題框提供按鈕、輸入框、下拉菜單的時(shí)候，例如上圖所示的需求原來提供的Panel組件就不能滿足了，這時(shí)候需要使用ExtPanel組件。使用方法： <widget:ExtPanelid=""width="80%"height="100%"title="策略列表"layout="vertical"> <widget:ctrlHolder> //在這個(gè)位置放入按鈕、輸入框或下拉菜單，多個(gè)采用HBox包裝 </widget:ctrlHolder> //在這個(gè)位置放正常顯示的tree或datagrid </widget:ExtPanel>4．CheckBoxHeaderColumn組件用法效果圖：使用場(chǎng)景：這個(gè)組件是為datagrid列表的每一行增加一個(gè)checkbox單選框，同時(shí)會(huì)在表頭增加一個(gè)全選框撤選的開關(guān)。使用方法： <mx:DataGridid=""width="100%"height="100%"wordWrap="true"dataProvider=""> <mx:columns> <grid:CheckBoxHeaderColumnid="checkColumn"headerText="SELECT"dataField="SELECT"width="50"textAlign="center"/> <mx:DataGridColumnheaderText="序號(hào)"textAlign="center"labelFunction="countRowNum"width="70"/> </mx:columns> </mx:DataGrid>5．PageBar分頁組件效果圖：使用場(chǎng)景：當(dāng)列表數(shù)據(jù)量很大需要分頁的時(shí)候，可以使用這個(gè)分頁組件，該組件提供了分頁的基本功能。使用方法：<paging:PageBarwidth="100%"request="{_request}"pageChange="doPaging(event)"/>前臺(tái)代碼：[Bindable]publicvar_request:Object;varreq:Object=newObject(); req.pageSize=10; req.SERIESCODE=*******; req.actionUrl="action/sys/gp.bd.fetchSysByLevel.act"; _request=req;//分頁賦數(shù)據(jù) privatefunctiondoPaging(e:PageChangeEvent):void{ _systemListDP=newArrayCollection(e.pageData); }后天action代碼：//構(gòu)造方法publicFetchProductListAction(){ super(); List<String>keys=newArrayList<String>(); keys.add("SERIESCODE"); keys.add("currentPage");//currentPageNum當(dāng)前頁碼 keys.add("pageSize");//pageSize頁面數(shù)據(jù)條目大小 this.setDefKeys(keys); } @Override publicvoidexecute()throwsException{ StringseriesCode=this.getDefParam().getString("SERIESCODE"); StringpageNo=this.getDefParam().getString("currentPage"); StringpageSize=this.getDefParam().getString("pageSize"); List<GenericVO>rs=this.getService().fetchProductList(seriesCode,Integer.parseInt(pageNo),Integer.parseInt(pageSize)); this.setResultSet(rs); this.setStat(SUCCESS); }6．WindowShade組件效果圖：組件打開時(shí)效果組件關(guān)閉時(shí)效果使用場(chǎng)景：一般用在詳細(xì)信息頁面，當(dāng)數(shù)據(jù)比較多，而且數(shù)據(jù)可以分成幾個(gè)模塊的時(shí)候，可以使用該組件達(dá)到模塊之間的劃分效果。使用方法： <code:WindowShadelabel="基本信息"width="100%"opened="true"> //這個(gè)位置往往會(huì)是一個(gè)表單或者grid </code:WindowShade>需要主義的是opened的屬性是控制這個(gè)組件的打開或關(guān)閉狀態(tài)，默認(rèn)打開。7．ComboBox組件效果圖： 使用場(chǎng)景：和html頁面里面的下拉菜單使用方式一樣。使用方法：<mx:ComboBoxid=""width="250"dataProvider="{}"enabled="{isEditable}"prompt="{bindObjectProxy.PROVINCE!=null?bindObjectProxy.PROVINCE:'請(qǐng)選擇...'}"/>8．DataSetPicker用法效果圖：使用場(chǎng)景：使用方法：<picker:DataSetPickerid="serviceAgainstDegree"width="100%"datasetCode="GP_