sencha touch2 gird 翻页

gird 翻页

• 
  

Js代码  

http://www.iteye.com/blogs/tag/sencha

1. //<debug>  
2. Ext.Loader.setPath({  
3.     'Ext': 'touch/src',  
4.     'room': 'app',  
5.     'Ext.ux.touch.grid': 'Ext.ux.touch.grid'  
6. });  
7. //</debug>  
8.   
9. Ext.require([  
10.              'Ext.ux.touch.grid.List',  
11.              'Ext.ux.touch.grid.feature.Feature',  
12.              'Ext.ux.touch.grid.feature.Sorter'  
13.          ]);  
14.   
15. Ext.application({  
16.     name: 'room',  
17.   
18.     requires: [  
19.         'Ext.MessageBox',  
20.         'Ext.carousel.Carousel'  
21.     ],  
22.   
23.     models:[  
24.     ],  
25.   
26.     views: [  
27.             ],  
28.   
29.     stores: [  
30.     ],  
31.   
32.     controllers: [  
33.                   'Main'  
34.     ],  
35.       
36.     icon: {  
37.         '57': 'resources/icons/Icon.png',  
38.         '72': 'resources/icons/Icon~ipad.png',  
39.         '114': 'resources/icons/Icon@2x.png',  
40.         '144': 'resources/icons/Icon~ipad@2x.png'  
41.     },  
42.   
43.     isIconPrecomposed: true,  
44.   
45.     startupImage: {  
46.         '320x460': 'resources/startup/320x460.jpg',  
47.         '640x920': 'resources/startup/640x920.png',  
48.         '768x1004': 'resources/startup/768x1004.png',  
49.         '748x1024': 'resources/startup/748x1024.png',  
50.         '1536x2008': 'resources/startup/1536x2008.png',  
51.         '1496x2048': 'resources/startup/1496x2048.png'  
52.     },  
53.   
54.     launch: function() {  
55.         // Destroy the #appLoadingIndicator element  
56.         Ext.fly('appLoadingIndicator').destroy();  
57.   
58.         // Initialize the main view  
59.       //  Ext.Viewport.add(Ext.create('room.view.Main'));  
60.           
61.           
62.         Ext.define('TestModel', {  
63.             extend : 'Ext.data.Model',  
64.   
65.             config : {  
66.                 fields : [  
67.                     'company',  
68.                     'price',  
69.                     'change',  
70.                     'pct',  
71.                     'updated'  
72.                 ]  
73.             }  
74.         });  
75.   
76.         var store = Ext.create('Ext.data.Store', {  
77.             model   : 'TestModel',  
78.             data    : [  
79.                 { company : '3m Co',                               price : 71.72, change : 0.02,  pct : 0.03,  updated : '9/1/2010' },  
80.                 { company : 'Alcoa Inc',                           price : 29.01, change : 0.42,  pct : 1.47,  updated : '9/1/2010' },  
81.                 { company : 'Altria Group Inc',                    price : 83.81, change : 0.28,  pct : 0.34,  updated : '9/1/2010' },  
82.                 { company : 'American Express Company',            price : 52.55, change : 0.01,  pct : 0.02,  updated : '9/1/2010' },  
83.                 { company : 'American International Group, Inc.',  price : 64.13, change : 0.31,  pct : 0.49,  updated : '9/1/2010' },  
84.                 { company : 'AT&#38;T Inc.',                       price : 31.61, change : -0.48, pct : -1.54, updated : '9/1/2010' },  
85.                 { company : 'Boeing Co.',                          price : 75.43, change : 0.53,  pct : 0.71,  updated : '9/1/2010' },  
86.                 { company : 'Caterpillar Inc.',                    price : 67.27, change : 0.92,  pct : 1.39,  updated : '9/1/2010' },  
87.                 { company : 'Citigroup, Inc.',                     price : 49.37, change : 0.02,  pct : 0.04,  updated : '9/1/2010' },  
88.                 { company : 'E.I. du Pont de Nemours and Company', price : 40.48, change : 0.51,  pct : 1.28,  updated : '9/1/2010' },  
89.                 { company : 'Exxon Mobil Corp',                    price : 68.1,  change : -0.43, pct : -0.64, updated : '9/1/2010' },  
90.                 { company : 'General Electric Company',            price : 34.14, change : -0.08, pct : -0.23, updated : '9/1/2010' },  
91.                 { company : 'General Motors Corporation',          price : 30.27, change : 1.09,  pct : 3.74,  updated : '9/1/2010' },  
92.                 { company : 'Hewlett-Packard Co.',                 price : 36.53, change : -0.03, pct : -0.08, updated : '9/1/2010' },  
93.                 { company : 'Honeywell Intl Inc',                  price : 38.77, change : 0.05,  pct : 0.13,  updated : '9/1/2010' },  
94.                 { company : 'Intel Corporation',                   price : 19.88, change : 0.31,  pct : 1.58,  updated : '9/1/2010' },  
95.                 { company : 'International Business Machines',     price : 81.41, change : 0.44,  pct : 0.54,  updated : '9/1/2010' },  
96.                 { company : 'Johnson &#38; Johnson',               price : 64.72, change : 0.06,  pct : 0.09,  updated : '9/1/2010' },  
97.                 { company : 'JP Morgan &#38; Chase &#38; Co',      price : 45.73, change : 0.07,  pct : 0.15,  updated : '9/1/2010' },  
98.                 { company : 'McDonald\'s Corporation',             price : 36.76, change : 0.86,  pct : 2.40,  updated : '9/1/2010' },  
99.                 { company : 'Merck &#38; Co., Inc.',               price : 40.96, change : 0.41,  pct : 1.01,  updated : '9/1/2010' },  
100.                 { company : 'Microsoft Corporation',               price : 25.84, change : 0.14,  pct : 0.54,  updated : '9/1/2010' },  
101.                 { company : 'Pfizer Inc',                          price : 27.96, change : 0.4,   pct : 1.45,  updated : '9/1/2010' },  
102.                 { company : 'The Coca-Cola Company',               price : 45.07, change : 0.26,  pct : 0.58,  updated : '9/1/2010' },  
103.                 { company : 'The Home Depot, Inc.',                price : 34.64, change : 0.35,  pct : 1.02,  updated : '9/1/2010' },  
104.                 { company : 'The Procter &#38; Gamble Company',    price : 61.91, change : 0.01,  pct : 0.02,  updated : '9/1/2010' },  
105.                 { company : 'United Technologies Corporation',     price : 63.26, change : 0.55,  pct : 0.88,  updated : '9/1/2010' },  
106.                 { company : 'Verizon Communications',              price : 35.57, change : 0.39,  pct : 1.11,  updated : '9/1/2010' },  
107.                 { company : 'Wal-Mart Stores, Inc.',               price : 45.45, change : 0.73,  pct : 1.63,  updated : '9/1/2010' }  
108.             ]  
109.         });  
110.   
111.         var gird= Ext.create('Ext.ux.touch.grid.List', {  
112.             store      : store,  
113.              id:'grid',  
114.              scrollable: {  
115.                 direction: 'vertical',  
116.                 directionLock: true  
117.             },  
118.               columns    : [  
119.               
120.                 {  
121.                     header    : 'Price',  
122.                     dataIndex : 'price',  
123.                     style     : 'text-align: center;',  
124.                     width     : '15%'  
125.                 },  
126.                 {  
127.                     header    : 'Change',  
128.                     dataIndex : 'change',  
129.                     cls       : 'centered-cell',  
130.                     width     : '15%'  
131.                 },  
132.                  
133.             ],  
134.             listeners:{  
135.         initialize:function(list){  
136.            
137.             var  s=  list.getScrollable().getScroller();  
138.                s.on('scroll',function(s,x,y,eOpts){  
139.                    var gs=  Ext.getCmp('list').getScrollable().getScroller();  
140.                    gs.scrollTo(x,y);  
141.                 });  
142.         }  
143.         }   
144.   
145.         });  
146.           
147.         var gird1= Ext.create('Ext.ux.touch.grid.List', {  
148.             store      : store,  
149.             columns    : [  
150.                  {  
151.                     header    : '% Change',  
152.                     dataIndex : 'pct',  
153.                     cls       : 'centered-cell',  
154.                     width     : '15%'  
155.                 },  
156.                 {  
157.                     header    : '% Change2',  
158.                     dataIndex : 'pct',  
159.                     cls       : 'centered-cell',  
160.                     width     : '15%'  
161.                 },  
162.                 {  
163.                     header    : 'Last Updated',  
164.                     dataIndex : 'updated',  
165.                     hidden    : true,  
166.                     style     : 'text-align: right; padding-right: 1em;',  
167.                     width     : '15%'  
168.                 }  
169.                   
170.             ],  
171.             listeners:{  
172.         initialize:function(list){  
173.            
174.             var  s=  list.getScrollable().getScroller();  
175.                s.on('scroll',function(s,x,y,eOpts){  
176.                    var gs=  Ext.getCmp('list').getScrollable().getScroller();  
177.                    gs.scrollTo(x,y);  
178.                 });  
179.         }  
180.         }   
181.   
182.         });  
183.           
184.       var c=  Ext.create('Ext.Carousel', {  
185.              
186.             indicator: false,  
187.             //fullscreen:true,  
188.             items: [  
189.                     gird,  
190.                     gird1  
191.                   
192.             ],  
193.             listeners:{  
194.             activeitemchange:function(c,v,old,eOpts){  
195.              Ext.getCmp('list').getScrollable().getScroller().scrollTo(0,0);  
196.               
197.               
198.             }  
199.             }  
200.         });  
201.   
202.        
203.      var list=Ext.create('Ext.List', {  
204.         id:'list',  
205.         itemTpl: '{company}',  
206.         store      : store,  
207.         scrollable :false,  
208.          
209.     });  
210.        
211.       
212.      Ext.Viewport.add( Ext.create('Ext.Panel', {  
213.       layout: 'hbox',  
214.       
215.       height:'1000',  
216.       items:[ {  
217.                 xtype: 'panel',  
218.                  
219.                 layout: 'fit',  
220.                 items:[{xtype:'titlebar',docked:'top',cls    : 'x-grid-header',title:'Company'},  
221.                        list],  
222.                 flex: 1  
223.             },  
224.             {  
225.                 xtype: 'panel',  
226.                 id:'panel2',  
227.                 layout: 'fit',  
228.             items: [c],  
229.                 flex: 3  
230.             }]  
231.       }));  
232.           
233.           
234.     },  
235.   
236.     onUpdated: function() {  
237.         Ext.Msg.confirm(  
238.             "Application Update",  
239.             "This application has just successfully been updated to the latest version. Reload now?",  
240.             function(buttonId) {  
241.                 if (buttonId === 'yes') {  
242.                     window.location.reload();  
243.                 }  
244.             }  
245.         );  
246.     }  
247. });