Ext.NET-レイアウト編

10981 ワード

概要
前のページではExt.NETの基礎知識を紹介し、Ext.NETレイアウトを簡単に説明しました.ここでは完全な例示コードを使ってExt.NETのレイアウトを見てみます.
例示コードダウンロードアドレス>>>
本稿の目的
本論文ではTree、Gridを使って、私たちが最もよく使うコントロールであり、適応的なページレイアウトを実現します.
トップ:Panelを使用して、たたむことができます.左側:TreePanelを使って、折りたたむことができます.中間:GridPanelを使用して、主要エリアは、折りたたむことができません.底部:GridPanelを使用して、折りたたむことができます.
まず、最終的に実現した効果を見てみます.
全体レイアウト
すべての折り畳み効果
gridMainをクリックすると、Windowが追加されます.
始まる前に
新しいWebFromフォームを作成します
WebFromフォームを新規作成し、ASPXファイルに次のコードを追加します.






    Ext.Net

について前の編で述べたが、 ， Web js css 。



 
 ， Viewport 
 CSS 
 ，  CSS  


 Viewport
 ( )， Viewport， の に のコード


Viewport  ， ， Web Viewport。
 Viewport 。
 ， ， ，Viewport Layout="BorderLayout"を しなければならない.

 
 Viewport ， ；

    
        
        
        
        
        
        
        
        
    


 
 


Viewport ...、ItemsではExt.NETが するコントロールしか できません. にはHTMLやASP.NETが するコントロールを く があります.
 ContinerのRegion は、 がViewport の を しており、Regionの は
とすることができる. North:トップ;
 South:ボトム;
 East: ;
ウェスト: ;
センター: き を めています.Border Layoutのレイアウトには、コントロールのRegionがセンターである があります.
 のASPXコードは の りです.




    
    Ext.Net    
    


    
    
        
            
            
            
            
            
            
            
            
        
    

 に べたように、Ext.NETはExtJsのパッケージで、ASPXページの のEXT.NETマークコードをExtJSに しています.これは が したExtJsコードです.Ext.net.ResourceMgr.init({
    id: "ctl01",
    theme: "neptune"
});
Ext.onReady(function () {
    Ext.create("Ext.container.Viewport", {
        renderTo: Ext.getBody(),
        items: [
            {
                cls: "north",
                html: "North",
                xtype: "container",
                region: "north"
            },
            {
                cls: "west",
                html: "West",
                xtype: "container",
                region: "west"
            },
            {
                cls: "center",
                html: "Center",
                xtype: "container",
                region: "center"
            },
            {
                cls: "sourth",
                html: "Sourth",
                xtype: "container",
                region: "south"
            }
        ],
        layout: "border"
    });
});
ブラウザのソース を して、Javascriptコードがフォーマットされていない は、Web.co nfigファイルに のように してください.
 な は のWEBサイトのextnet を してください.
ページレイアウトを 
コード
 の な は、Border Layoutの も なレイアウトを しています. に、コード を てみます. のデモのために されたコードを します. のページのASPXコードはこのようなものです.




    
    Ext.Net    


    
    
        
        
    

 たちは...にPanel(... ...)とTreePanel(pnlTop)と つのGridPanel(pnlLeftとgridMain 142)を します.コードは の りです.
    
        
        
        
            
                
                
                
                
            
        
        
            
                
                    
                        
                            
                                
                                
                            
                        
                         
                        
                    
                
                
                    
                        
                            
                                
                                
                            
                        
                        
                        
                    
                
            
        
    
 の は の りです.
 たちはそれぞれのPanelについてそれぞれ します.
トップパネル (gridChild) ID="pnlTop":タイトルバーを します.
 Header="false": の に されます.
 Region="North": するHTMLコンテンツは、 のHtml="The North"と に れてはいけない.
 : じCSSのpaddingは しかない.
 BodyPadding="10": りたたみ はMiniであり、オプションはCollapseMode="Mini"、Default、Headerであり、 はここを してください.
 Mini: りたたむことができます.
 Collapsible="true":サイズを することができます. はここで します.
 たちはこのPanelの さについて の もしていませんので、 に じて にデフォルトの さを します.もっと くのPanelについての はここにあります.
 TreePanel (Split="true")
ここではレイアウトを するためだけに、TreePanelには の もない.
 の  ID="pnlLeft": の に されます.
 Region="West": つの の 、 はここを してください.
 Flex="1":タイトル ;
 Title="LeftTree": ツールボタンを す;
 HideCollapseTool="true": りたたむことができます.
 Collapsible="true":サイズを することができます. はここで します.
Tools 
    
    
    
    
このようなコードはTreePanelタイトルバーの の2つのボタンを しています.ここでToolTip はマウスのペンディング のヒントテキストです.
センターエリアの 
 のコードは、Viewportの4つの (Split="true")のセンター を し(Flex="4")、そのサブコントロールもBorderレイアウトを することを している(Region="Center").
        ......
GridPanel 
 はレイアウトを するためだけに、ここのGridPanelには の もない. つのGridPanelは、IDとFlex が なる は、 に じです.Layout="BorderLayout"に2つのDock のコントロールが されています. つは...のToolbarとDock="Top"のPaging Toolbarです. の から つはツールバーで、もう つは ページツールバーです.
Windowを 
ポップアップ を するためには、Windowコントロールを する があります.Dock="Bottom"では、

windows 8開発-作業スレッドと更新UIを使う

process.env.NODE_ENV開発と生産モデル