单击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 >

代码下载:
/Files/hansdyj/example.rar