gird 翻页

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'room': 'app',
    'Ext.ux.touch.grid': 'Ext.ux.touch.grid'
});
//</debug>

Ext.require([
             'Ext.ux.touch.grid.List',
             'Ext.ux.touch.grid.feature.Feature',
             'Ext.ux.touch.grid.feature.Sorter'
         ]);

Ext.application({
    name: 'room',

    requires: [
        'Ext.MessageBox',
        'Ext.carousel.Carousel'
    ],

    models:[
    ],

    views: [
            ],

    stores: [
    ],

    controllers: [
                  'Main'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
      //  Ext.Viewport.add(Ext.create('room.view.Main'));


        Ext.define('TestModel', {
            extend : 'Ext.data.Model',

            config : {
                fields : [
                    'company',
                    'price',
                    'change',
                    'pct',
                    'updated'
                ]
            }
        });

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

        var gird= Ext.create('Ext.ux.touch.grid.List', {
            store      : store,
             id:'grid',
             scrollable: {
        	    direction: 'vertical',
        	    directionLock: true
        	},
              columns    : [

                {
                    header    : 'Price',
                    dataIndex : 'price',
                    style     : 'text-align: center;',
                    width     : '15%'
                },
                {
                    header    : 'Change',
                    dataIndex : 'change',
                    cls       : 'centered-cell',
                    width     : '15%'
                },

            ],
            listeners:{
		initialize:function(list){

		    var  s=  list.getScrollable().getScroller();
			   s.on('scroll',function(s,x,y,eOpts){
				   var gs=  Ext.getCmp('list').getScrollable().getScroller();
				   gs.scrollTo(x,y);
				});
		}
	    } 

        });

        var gird1= Ext.create('Ext.ux.touch.grid.List', {
            store      : store,
            columns    : [
                 {
                    header    : '% Change',
                    dataIndex : 'pct',
                    cls       : 'centered-cell',
                    width     : '15%'
                },
                {
                    header    : '% Change2',
                    dataIndex : 'pct',
                    cls       : 'centered-cell',
                    width     : '15%'
                },
                {
                    header    : 'Last Updated',
                    dataIndex : 'updated',
                    hidden    : true,
                    style     : 'text-align: right; padding-right: 1em;',
                    width     : '15%'
                }

            ],
            listeners:{
		initialize:function(list){

		    var  s=  list.getScrollable().getScroller();
			   s.on('scroll',function(s,x,y,eOpts){
				   var gs=  Ext.getCmp('list').getScrollable().getScroller();
				   gs.scrollTo(x,y);
				});
		}
	    } 

        });

      var c=  Ext.create('Ext.Carousel', {

            indicator: false,
            //fullscreen:true,
            items: [
                    gird,
                    gird1

            ],
            listeners:{
            activeitemchange:function(c,v,old,eOpts){
        	 Ext.getCmp('list').getScrollable().getScroller().scrollTo(0,0);


            }
            }
        });


     var list=Ext.create('Ext.List', {
	   	id:'list',
	    itemTpl: '{company}',
	    store      : store,
	    scrollable :false,

	});


     Ext.Viewport.add( Ext.create('Ext.Panel', {
	  layout: 'hbox',

	  height:'1000',
	  items:[ {
	            xtype: 'panel',

	            layout: 'fit',
	            items:[{xtype:'titlebar',docked:'top',cls    : 'x-grid-header',title:'Company'},
	                   list],
	            flex: 1
	        },
	        {
	            xtype: 'panel',
	            id:'panel2',
	            layout: 'fit',
	  	    items: [c],
	            flex: 3
	        }]
      }));


    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});