内联itemRendererにitemrenderer
12月20th, 2006 — Dreamer 12月20日、 2006年-ドリーマー英文原文:《Inline itemRenderer》英語のテキスト: "インラインitemrenderer "
原文地址:http://weblogs.macromedia.com/pent/archives/2006/12/inline_itemrend.cfm元の住所: http://weblogs.macromedia.com/pent/archives/2006/12/inline_itemrend.cfm
原文作者:Peter Entオリジナルの著者:ピーターent
译者:Dreamer。翻訳:ドリーマーです。 本文未经同意,谢绝转载。本稿では、同意せず、再版を拒否しています。
近来我很高兴和我们的一个客户Davita 的Ryan Green一起工作,他同意我公开这一段代码。最近、私は喜ばしく思っていると考え、お客さまやダヴィータの1つのライアン緑色のために協力、彼はこのセクションで合意して私のコードをオープンします。 我喜欢这段代码因为它虽然很简单然而却包含了很多有趣的东西。私はそれのためのコードは非常にシンプルでありながら多くの興味深いものが含まれています。 在这个例子中我对Ryan 的原始代码做了一些更改。この例で私は、元のコードライアンはいくつかの変更を適用します。
下载例子源码: 点击这里ダウンロードの例ソース: クリックしてください
我从别人那里听到过一些问题,他们将按钮或者其他的交互式组件放到DataGrid的一个单元格中并且想知道如何通过按钮来改变DataGrid。どこからの意見を聞いて、いくつかの問題は、かれらは他のインタラクティブなコンポーネントのDataGridにボタンをクリックするか、セルと希望を知ってどのように変更してDataGridのボタンをクリックしています。 一个常见的使用就是删除本行记录。 、共通の使用は、銀行のレコードを削除します。 这里介绍了一种方法,在一个简单的订单列表中,点击"add to cart"链接会减少库存中货物的数量。しかし、次に示すのは、法は、単純な命令のリストをクリックして"カートに入れる"リンクは在庫品の量を減らすためです。 当数量减少到0的时候该链接就会被禁用而且其标签更改为“out of stock”。時の数が減少して0時のリンクとそのラベルを変更することが禁止"在庫切れ"です。
让我们从声明DataGrid开始。 DataGridのステートメントからのスタート]ボタンをご連絡します。 你将会看到一个内联的itemRenderer,对于此问题来说这是一个优雅的解决方案。関節内のが表示さitemrenderer 、この問題を解決する、これはエレガントなソリューションです。 你也可以使用一个代码相同的自定义组件作为itemRenderer。カスタムコードを使用することも、同じコンポーネントをitemrendererです。
width="390" height="169">幅= " 390 "高さ= " 169 " >
<mx:columns>
<mx:DataGridColumn headerText="Product" dataField="product"/> <mx:datagridcolumn headertext="product" datafield="product"/>
<mx:DataGridColumn headerText="Quantity" dataField="quantity"/> <mx:datagridcolumn headertext="quantity" datafield="quantity"/>
<mx:DataGridColumn headerText="Order" dataField="action" > <mx:datagridcolumn headertext="order" datafield="action">
<mx:itemRenderer> <mx:itemrenderer>
<mx:Component> <mx:component>
<mx:LinkButton label="{data.action}" < MXの: linkbuttonラベル= " ( data.action ) "
enabled="{data.quantity > 0}"有効になって= " ( data.quantity > 0 ) "
click="sendEvent()">クリックして= " sendevent ( ) " >
<mx:Script> <mx:script>
<![CDATA[ < ! [のCDATA [
private function sendEvent() : voidプライベート関数sendevent ( ) :無効
{ (
dispatchEvent( new CustomEvent(data) ); dispatchevent (新customevent (データ) ) ;
} )
]]> ] " >
</mx:Script> < / MXの:スクリプト>
</mx:LinkButton> < / MXの: linkbutton >
</mx:Component> < /のMX :コンポーネント>
</mx:itemRenderer> < / MXの: itemrenderer >
</mx:DataGridColumn> < / MXの: DataGridColumnの>
</mx:columns> < / MXの:列" >
</mx:DataGrid> < / MXの:データグリッド>
效果如图:図結果:
最后一列的itemRenderer是一个LinkButton。最後には、 linkbuttonのいずれかのitemrendererです。 LinkButton的label是相应记录中"action"域的值。 linkbuttonのラベルは、対応するレコードは、 "アクション"ドメインの値です。 只有"quantity"域的值大于0的时候LinkButton才是激活的。のみ"数量"ドメインlinkbuttonときには0より大きい値が有効にします。 当点击LinkButton的时候,会调用脚本代码中的sendEvent()方法。 linkbuttonをクリックしたときに呼び出されるときに、スクリプトコードsendevent ( )メソッドを使用します。
注意:此处的itemRenderer是一个LinkButton,但是你也可以使用一个容器,比如一个Canvas,然后将LinkButton和其他与你的数据相关的组件放进去。 注: itemrenderer次に示すのは、 linkbutton 、しかし、コンテナを使用することも、このようなキャンバスとして、 linkbuttonやその他のデータを入力し、あなたに関連してコンポーネントをします。
处理的点击事件方法sendEvent会分派一个ChartEvent(一个自定义事件)。をクリックしてこの事件を処理する方法には割り当てられたsendevent chartevent (カスタムの場合) 。 ChartEvent只针对本行的数据记录。 chartevent銀行のデータのみを記録します。
注意:如果你对itemRenderer很陌生,请记住多数Flex组件,包括用来作为itemRenderer的组件都有一个data属性。 注意:もしitemrenderer非常に奇妙な、覚えているの過半数のFlexコンポーネントを含むコンポーネントを使用されてitemrendererは、データの属性を設定します。 这个属性是由dataProvider中与itemRenderer所在行相应的记录所设定的。 この属性は、 DataProviderのitemrendererと、それに対応するレコードの行の設定です。
下面是CartEvent类的代码:以下は、 carteventカテゴリコード:
{ (
static public const ADD_TO_CART:String = "addToChart";静的な公共const add_to_cart :文字列= " addtochart " ;
public function CartEvent(data:Object, bubbles:Boolean=true, cancelable:Boolean=false)公共の関数cartevent (データ:オブジェクト、泡:ブール値= trueの場合、解約:ブール値=偽)
{ (
super(ADD_TO_CART, bubbles, cancelable);スーパー( add_to_cart 、泡、解約) ;
this.data = data; this.data =データ;
} )
public var data:Object;公共varのデータ:オブジェクト;
} )
这里没有多少需要说明的。に注意する必要はないの数です。 事件类型是"addToCart"。の種類のイベントは、 " addtocart "です。 这不是DataGrid分派的事件,那么你将如何监听并使用这个事件呢?これは、割り当てられたのDataGridていない場合は、あなたが監視し、今回の事件を使用する方法ですか? » 问题的关键在于事件的bubbles属性的值:它默认在CartEvent构造函数中被设定为true。最重要事項となる問題は、イベントのプロパティの値を泡:これはデフォルトでcartevent構造関数はtrueに設定されています。
由于DataGrid并不正式地支持"addToCart",所以你不能将它作为一个属性放到<mx:DataGrid>标签中。 DataGridの機能として正式にサポートしていない" addtocart " 、これすることはできません。 <mx: datagrid>の属性として言えばタブをクリックします。 但是你可以在ActionScript中为它设定一个事件处理器:しかし、それActionScriptを設定することもできますイベントプロセッサ:
使用customHander()函数:の使用をcustomhander ( )関数:
{ (
// the data record is included in the event; it can be modified and / /データレコードが含まれているイベント;それを変更することができます
// put back into the dataProvider where it will be picked up by the / / DataProviderの場所に戻されるのピックアップされるので、
// DataGrid / /データグリッド
event.data.quantity -= 1; event.data.quantity -= 1 ;
dp.itemUpdated(event.data,"quantity"); dp.itemupdated ( event.data 、 "数量" ) ;
if( event.data.quantity <= 0 ) {もし( event.data.quantity < = 0 ) (
event.data.action = "out of stock"; event.data.action = "在庫切れ" ;
dp.itemUpdated(event.data,"action"); dp.itemupdated ( event.data 、 "アクション" ) ;
} )
} )
当某一行中的LinkButton被点击的时候,将会分派一个CartEvent,该事件将由customHandler()函数处理。行のときにlinkbuttonをクリックすると、割り当てられたcarteventは、この事件はcustomhandler ( )関数を処理します。 这个函数将更改对应数据记录的"quantity"的值然后dataProvider就被更新了。この関数は変化に対応するデータレコードの"数量"とDataProviderの値が更新されています。 当"quantity"的值变成0的时候,"action"域中的文本将会更改为"out of stock",同时dataProvider也将被更新。ときに、 "量"は、時間の値を0 、 "アクション"のドメインをテキストに変更されるから"在庫切れ" 、 DataProviderの中にも更新済みです。
一直点击Sprockets产品(看下图)的"add to cart"的链接直到它的数量减为0。クリックして製品として開発されたsprockets (場合を除いて) 、 "カートに入れる"のリンクの数が0になるまで減少します。 然后LinkButton的标签就会变成"out of stock"并且被禁用。 linkbutton入力し、ラベルになる"在庫切れ"とは無効になっています。
注意当数据更新的时候属性的名字也传给了itemUpdated()方法,这样做可以保证只有那个域被更新了。時期に注意しても、データが更新済みの属性の名前を渡され、 itemupdated ( )メソッドは、そのドメインを保証することができますのみ更新されています。 如果dataProvider有排序操作的话,该域不是排序的一部分,更新它不会引发dataProvider自动排序。 DataProviderの並べ替えの操作の場合、このドメインではない部分の並べ替え、更新プログラムのことはありませんDataProviderのリードに自動的に並べ替えています。
这个例子可以有很多变型。この例では、多くのバリエーションが起きることにします。 例如,CartEvent可以传递行的索引而不是数据本身,然后customHandler就可以使用该索引从dataProvider中提取数据。たとえば、転送をcarteventことではなく、データ自体のインデックスと入力し、インデックスを使用してcustomhandlerからデータを抽出するのDataProviderのです。 在某些情况下索引可能比数据本身更有价值,或者你也可以同时使用这两个。いくつかの場合、インデックスよりも5月に他の貴重なデータ自体か、またはこれら2つ使用することができます。
那么itemClick呢? ので、 ItemClickイベント»
现在你可能会想:只通过itemClick就达到上述的目的阿,为何还好那样做?今すぐかもしれない: ItemClickイベントを介してのみ、上記の目的を達成するためにアフガニスタン、なぜ良い» 。です。 没错,使用itemClick你可以知道哪一行的哪个域被点击了。はい、使用することができますラインのItemClickが知っているドメインをクリックしてください。 然后你就可以更新数据,DataGrid中的显示也会自动更新。データを入力し、更新することができますし、データグリッド内での表示が自動的に更新されます。
但是这种方法的优势是:你有一个可交互的单元格——在本例中是一个LinkButton,但是它可以很复杂。しかし、この方法の利点は:細胞の対話をすることができます-この場合は、 l inkbutton、それすることが非常に複雑です。 当你需要一个自定义的itemRenderer的时候不妨考虑一下这种方法。 itemrendererときの時間を必要とするカスタムこのアプローチを検討することをお勧めします。
本文链接: http://www.zhuoqun.net/html/y2006/373.html 转载请注明出处,谢谢。 このリンク: http://www.zhuoqun.net/html/y2006/373.html転載をご参考までに、よろしくお願いします。
TrackBack引用地址: http://www.zhuoqun.net/html/y2006/373.html/trackback トラックバック使用される住所: http://www.zhuoqun.net/html/y2006/373.html/trackback








谢谢你的文章帮助我解决了一个棘手的问题!いただきありがとうございます記事索引を助けてくれるの難問を解決する!