Ext弹出窗口动画的几种调用方式

转自http://www.blogjava.net/hansdyj/articles/175660.html

单击Button弹出和双击Grid弹出,获取动画焦点的方式不同

index.js

  HelloWindow  =   function ()   {
     var  win  =   this ;
     var  grid  =   new  HelloGrid();

    HelloWindow.superclass.constructor.call( this ,   {
        title : 'Hello Window',
        layout : 'fit',
        width :  500 ,
        height :  300 ,
        closeAction : 'hide',
        plain :  true ,
        items : [  {
            xtype : 'tabpanel',
            region : 'center',
            activeTab :  0 ,
            border :  false ,
            items : [ new  Ext.Panel(   {
                title : 'The first panel',
                autoTabs :  true ,
                activeTab :  0 ,
                deferredRender :  false ,
                border :  false ,
                html : 'the first panel'
            } ), grid]
        } ],

        buttons : [   {
            text : 'Submit',
            disabled :  true 
         } ,   {
            text : 'Close',
            handler :  function ()   {
                win.hide();
            } 
        } ]
    } );
} 
 
 Ext.extend(HelloWindow, Ext.Window,   {} );

HelloBtn  =   function ()   {
    HelloBtn.superclass.constructor.call( this ,   {
        text : 'Hello Button'
        ,
    } );
} 
 
 Ext.extend(HelloBtn, Ext.Button,   {} );

HelloGrid  =   function ()   {

     var  myData  =  [
            ['3m Co',  71.72 ,  0.02 ,  0.03 , ' 9 / 1   12 :00am'],
            ['Alcoa Inc',  29.01 ,  0.42 ,  1.47 , ' 9 / 1   12 :00am'],
            ['Altria Group Inc',  83.81 ,  0.28 ,  0.34 , ' 9 / 1   12 :00am'],
            ['American Express Company',  52.55 ,  0.01 ,  0.02 , ' 9 / 1   12 :00am'],
            ['American International Group, Inc.',  64.13 ,  0.31 ,  0.49 ,
                    ' 9 / 1   12 :00am'],
            ['AT & T Inc.',  31.61 ,  - 0.48 ,  - 1.54 , ' 9 / 1   12 :00am'],
            ['Boeing Co.',  75.43 ,  0.53 ,  0.71 , ' 9 / 1   12 :00am'],
            ['Caterpillar Inc.',  67.27 ,  0.92 ,  1.39 , ' 9 / 1   12 :00am'],
            ['Citigroup, Inc.',  49.37 ,  0.02 ,  0.04 , ' 9 / 1   12 :00am'],
            ['E.I. du Pont de Nemours and Company',  40.48 ,  0.51 ,  1.28 ,
                    ' 9 / 1   12 :00am'],
            ['Exxon Mobil Corp',  68.1 ,  - 0.43 ,  - 0.64 , ' 9 / 1   12 :00am'],
            ['General Electric Company',  34.14 ,  - 0.08 ,  - 0.23 , ' 9 / 1   12 :00am'],
            ['General Motors Corporation',  30.27 ,  1.09 ,  3.74 , ' 9 / 1   12 :00am'],
            ['Hewlett - Packard Co.',  36.53 ,  - 0.03 ,  - 0.08 , ' 9 / 1   12 :00am'],
            ['Honeywell Intl Inc',  38.77 ,  0.05 ,  0.13 , ' 9 / 1   12 :00am'],
            ['Intel Corporation',  19.88 ,  0.31 ,  1.58 , ' 9 / 1   12 :00am'],
            ['International Business Machines',  81.41 ,  0.44 ,  0.54 ,
                    ' 9 / 1   12 :00am'],
            ['Johnson  &  Johnson',  64.72 ,  0.06 ,  0.09 , ' 9 / 1   12 :00am'],
            ['JP Morgan  &  Chase  &  Co',  45.73 ,  0.07 ,  0.15 , ' 9 / 1   12 :00am'],
            ['McDonald\'s Corporation',  36.76 ,  0.86 ,  2.40 , ' 9 / 1   12 :00am'],
            ['Merck  &  Co., Inc.',  40.96 ,  0.41 ,  1.01 , ' 9 / 1   12 :00am'],
            ['Microsoft Corporation',  25.84 ,  0.14 ,  0.54 , ' 9 / 1   12 :00am'],
            ['Pfizer Inc',  27.96 ,  0.4 ,  1.45 , ' 9 / 1   12 :00am'],
            ['The Coca - Cola Company',  45.07 ,  0.26 ,  0.58 , ' 9 / 1   12 :00am'],
            ['The Home Depot, Inc.',  34.64 ,  0.35 ,  1.02 , ' 9 / 1   12 :00am'],
            ['The Procter  &  Gamble Company',  61.91 ,  0.01 ,  0.02 , ' 9 / 1   12 :00am'],
            ['United Technologies Corporation',  63.26 ,  0.55 ,  0.88 ,
                    ' 9 / 1   12 :00am'],
            ['Verizon Communications',  35.57 ,  0.39 ,  1.11 , ' 9 / 1   12 :00am'],
            ['Wal - Mart Stores, Inc.',  45.45 ,  0.73 ,  1.63 , ' 9 / 1   12 :00am']];

     //  example of custom renderer function 
       function  change(val)   {
         if  (val  >   0 )   {
             return  ' < span style = " color:green; " > '  +  val  +  ' </ span > ';
        }   else   if  (val  <   0 )   {
             return  ' < span style = " color:red; " > '  +  val  +  ' </ span > ';
        } 
         return  val;
    } 
 
     //  example of custom renderer function 
       function  pctChange(val)   {
         if  (val  >   0 )   {
             return  ' < span style = " color:green; " > '  +  val  +  ' %</ span > ';
        }   else   if  (val  <   0 )   {
             return  ' < span style = " color:red; " > '  +  val  +  ' %</ span > ';
        } 
         return  val;
    } 
 
     //  create the data store 
       this .store  =   new  Ext.data.SimpleStore(   {
        fields : [   {
            name : 'company'
        } ,   {
            name : 'price',
            type : ' float '
        } ,   {
            name : 'change',
            type : ' float '
        } ,   {
            name : 'pctChange',
            type : ' float '
        } ,   {
            name : 'lastChange',
            type : 'date',
            dateFormat : 'n / j h:ia'
        } ]
    } );
     this .store.loadData(myData);

    HelloGrid.superclass.constructor.call( this ,   {
        columns : [   {
            id : 'company',
            header :  " Company " ,
            width :  160 ,
            sortable :  true ,
            dataIndex : 'company'
        } ,   {
            header :  " Price " ,
            width :  75 ,
            sortable :  true ,
            renderer : 'usMoney',
            dataIndex : 'price'
        } ,   {
            header :  " Change " ,
            width :  75 ,
            sortable :  true ,
            renderer : change,
            dataIndex : 'change'
        } ,   {
            header :  " % Change " ,
            width :  75 ,
            sortable :  true ,
            renderer : pctChange,
            dataIndex : 'pctChange'
        } ,   {
            header :  " Last Updated " ,
            width :  85 ,
            sortable :  true ,
            renderer : Ext.util.Format.dateRenderer('m / d / Y'),
            dataIndex : 'lastChange'
        } ],
        stripeRows :  true ,
        autoExpandColumn : 'company',
        height :  350 ,
        width :  600 ,
        title : 'Hello Grid'
    } );
} 
 
 Ext.extend(HelloGrid, Ext.grid.GridPanel,   {} );

Ext.onReady( function ()   {
     var  helloBtn  =   new  HelloBtn();
    helloBtn.render('helloBtn');
    helloBtn.on('click',  function (e)   {
        win.show( this .getEl().dom);
    } );

     var  helloGrid  =   new  HelloGrid();
    helloGrid.render('helloGrid');
    helloGrid.on('rowdblclick', function (obj,rowIndex,e)  {
        win.show(Ext.get(e.target).dom);        
    } );
     var  win  =   new  HelloWindow();
} ); 
index.html
<html>
    <head>
        <title>index.html</title>
        <!-- ext -->
        <script type="text/javascript" src="./ext2/js/ext-base.js"></script>
        <script type="text/javascript" src="./ext2/js/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="./ext2/css/ext-all.css" />
        <script type="text/javascript" src="javascript/index.js"></script>

    </head>

    <body style="padding:20px;">
        <div id="helloBtn"></div><br>
        <div id="helloGrid"></div>
    </body>
</html>

评论

2 楼 magicyang918 2009-01-07  

dickwin 写道

在ie下不行 在firefox下通过 ....我也在找这个功能

在IE下可以，我的已经成功了

//新增
add: function() {
    if (!this.addWin) {
	this.addWin = new AddHistoryVersionWindow({});
			
	var addBtnDom = this.addBtn.getEl().dom;
	this.addWin.show(addBtnDom);
    }
}

1 楼 dickwin 2009-01-06  

在ie下不行 在firefox下通过 ....我也在找这个功能