[Ext.Net]Gridpanelにハイパーリンクを挿入

今日はいきなりGridpanelのある列にハイパーリンクを挿入して、クリック機能を実現したいと思います.しかし、ネット上の資料を探しても、適当なものは見つからなかった.そこでいろいろな方法を試して、最終的に成功して、ここでみんなと私の成果を分かち合います!もともと、多くのテクニックは実際には絶えず革新と発見が必要だった.
こちらでは、コードの一部、Gridpanelの列を示しています.赤い部分を太くすることに注意してください.

<ext:GridPanel ID="FileRegGrid" runat="server" Title=">>      " StripeRows="true" Height="400" 
                    StoreID="FileInfoStore" AutoExpandColum="list" Margins="10 20 0 20" TrackMouseOver="true">
        <ColumnModel ID="ColumnModel" runat="server">
             <Columns>
               <ext:Column Header="    " width="80" DataIndex="ID" />
               <ext:Column Header="    " width="130" DataIndex="TitleName" />
               <ext:Column Header="    " width="80" DataIndex="TitleID" />
 　　　　　　　　<ext:Column Header="  " Width="80" DataIndex="TitleID">
 　　　　　　　　　　<Renderer Fn="details"/>
　　　　　　　　 </ext:Column>
               <ext:Column Header="    " width="130" DataIndex="FilesStatus" />
               <ext:Column Header="    " width="80" DataIndex="SystemDateTime">
                    <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d H:i:s')" />  
               </ext:Column>
               <ext:Column Header="    " width="80" DataIndex="OnFileDateTime">
                    <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />  
               </ext:Column>
               <ext:Column Header="  " width="80" DataIndex="SecretsLevelName" />
               <ext:Column Header="    " width="80" DataIndex="TimeLimit" />
                <ext:CommandColumn Width="60" Header="  " GroupName="Operate">
                    <Commands>
                        <ext:GridCommand Icon="Pencil" CommandName="Edit">
                            <ToolTip Text="  " />
                        </ext:GridCommand>
                        <ext:GridCommand Icon="Delete" CommandName="Delete">
                            <ToolTip Text="  " />
                        </ext:GridCommand>
                    </Commands>
                </ext:CommandColumn>
             </Columns>
          </ColumnModel>
</ext:GridPanel>

rendererは、一般にGridにおけるカラムモデルのレンダリングにおいて、その詳細をExt.gridに記録するために用いる.ColumnModelでのsetRenderer(Number col,Function fn)メソッドにあります.renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){}
含むパラメータの紹介:1.valueは現在のセルの値です.2.cellmetaに保存されているのはcellIdセルid、idは列番号、cssはこのセルのcssスタイルです.3.recordはこの行のすべてのデータです.何がほしいですか.record.data[「id」]はこれで入手できます.4.rowIndexは行番号で、最初から下に数えるという意味ではなく、ページ分け後の結果を計算しています.5.columnIndex列番号.6.store、これはすごいですね.実はこれはあなたが表を作ったときに伝えたdsです.つまり、表の中のすべてのデータを勝手に呼び出すことができます.ああ、すごいですね.
(違うよ、先輩にオノを!こちらのFnの後ろにあるのはJsの関数名です.

        function details(Id) {
            var temp = '<a href="Details.aspx?Id={0}" target="_blank" style="color:blue">  </a>';
            return String.format(temp, Id);
        }

効果図:クリックして表示して、ページをジャンプして、アドレスを通じて见ることができて、同时にIDの过去を伝えて、相応のページのジャンプをして、idの仕事を得ることができます.
次に、上記のコードを改善しました.ハイパーリンクをクリックすると、新しいページがポップアップします.

        function winShow() {
            question = confirm("            ?")
            if (question != "0") {
                window.open("ZL_IdentifyAdd.aspx", "NewWin", "status=yes, height=400, width=600");
            }
        }
        function details(Id) {
            var temp = '<a href="#" onclick="winShow()" style="color:blue">  </a>';
        }

効果図
プロンプトボックスをポップアップし、「OK」をクリックして、小さなウィンドウでページを開きます.
 
これは、同じページのWindowを直接ポップアップできるかどうか、また新しいアイデアが出てきましたが、前からHandler=「#{window_id}.show()」;を選択してウィンドウを開きます.そこで、私は友达と討論して、彼は考えを提供して、私は試して、成功しました.大まかな考え方は、やはり列にdetailsのFunctionをトリガーするかということです.そしてdetails関数ではハイパーリンクをクリックして別の関数btnClickにジャンプし,btnClickは実装ボタンのクリックイベントである.その前にbuttonコントロールを新規作成し、Hidden="true"を設定します.そしてbuttonのListenerイベントに具体的なClickを追加してクリックし、Handlerの方法でwindowのポップアップイベントを実現します.なぜ話が多いのかと聞かれるかもしれませんが、details関数の中でwindowのポップアップを直接実現すればいいのではないでしょうか.でも、私はやってみましたが、だめですね.
これはButtonコントロールで、Hiddenとクリックイベントを設定し、クリックしてwindowをポップアップし、FileReg_winは、ポップアップするWindowのIDです.

        <ext:Button ID="Link" runat="server" Hidden="true">
            <Listeners>
                <Click Handler="#{FileReg_win}.show();" />
            </Listeners>
        </ext:Button>

次に、具体的なjs関数を示します.

        function details(Id) {
            var temp = '<a href="#" onclick=" btnClick()" style="color:blue">   </a>';
            return String.format(temp, Id);
        }
        function btnClick() {
            document.getElementById("Link").click();
        }

これにより、ハイパーリンクをクリックしてWindowをポップアップすることができます.まだ何を待っているのか,やってみよう.臨時に書いたので、きちんとレイアウトができていませんので、ご了承ください.変換元:http://www.cnblogs.com/jianglan/archive/2012/04/03/2431545.html