//<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/[email protected]', '144': 'resources/icons/[email protected]' }, 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(); } } ); } });