root / trunk / web / js / main2.js @ 10
History | View | Annotate | Download (2.07 KB)
| 1 | 9 | andrej.cim | window.addEvent('domready', function(){ |
|---|---|---|---|
| 2 | // NOTE: This is an example showing simple state management. During development,
|
||
| 3 | // it is generally best to disable state management as dynamically-generated ids
|
||
| 4 | // can change across page loads, leading to unpredictable results. The developer
|
||
| 5 | // should ensure that stable state ids are set for stateful components in real apps.
|
||
| 6 | Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
|
||
| 7 | |||
| 8 | // create the Data Store
|
||
| 9 | var store = new Ext.data.JsonStore({ |
||
| 10 | proxy: new Ext.data.HttpProxy({ |
||
| 11 | url: 'log.json' |
||
| 12 | }), |
||
| 13 | totalProperty:'total', |
||
| 14 | idProperty: 'id', |
||
| 15 | root: 'rows', |
||
| 16 | fields:[
|
||
| 17 | {name:'date', type:'date', dateFormat:'M d, Y h:i:s A'},
|
||
| 18 | {name:'type'},
|
||
| 19 | {name:'message'}
|
||
| 20 | ] |
||
| 21 | }); |
||
| 22 | |||
| 23 | // create the Grid
|
||
| 24 | var grid = new Ext.grid.GridPanel({ |
||
| 25 | title: 'Log', |
||
| 26 | store: store,
|
||
| 27 | loadMask: true, |
||
| 28 | columns: [
|
||
| 29 | {id:'date',header: 'Date', width: 100, renderer: Ext.util.Format.dateRenderer('Y-m-d H:i'), dataIndex: 'date'},
|
||
| 30 | {id:'type',header: 'Type', width: 100, dataIndex: 'type'},
|
||
| 31 | {id:'message',header: 'Message', dataIndex: 'message'}
|
||
| 32 | ], |
||
| 33 | stripeRows: true, |
||
| 34 | autoExpandColumn: 'message', |
||
| 35 | height: 350, |
||
| 36 | //width: 'auto',
|
||
| 37 | stateful: true, |
||
| 38 | stateId: 'grid', |
||
| 39 | |||
| 40 | // paging bar on the bottom©
|
||
| 41 | bbar: new Ext.PagingToolbar({ |
||
| 42 | pageSize: 15, |
||
| 43 | store: store,
|
||
| 44 | displayInfo: true, |
||
| 45 | displayMsg: 'Displaying {0} - {1} of {2}', |
||
| 46 | emptyMsg: "No messages to display" |
||
| 47 | }) |
||
| 48 | }); |
||
| 49 | store.load(); |
||
| 50 | |||
| 51 | var tabs = new Ext.TabPanel({ |
||
| 52 | renderTo: 'tabs1', |
||
| 53 | width:'auto', |
||
| 54 | activeTab: 0, |
||
| 55 | frame:true, |
||
| 56 | defaults:{autoHeight: true}, |
||
| 57 | boxMaxHeight: 400, |
||
| 58 | items:[
|
||
| 59 | {autoLoad:{url: 'info.jsp', scripts:true }, title: 'Info'},
|
||
| 60 | {autoLoad:{url: 'status.jsp', scripts:true }, title: 'Status'},
|
||
| 61 | grid |
||
| 62 | ] |
||
| 63 | }); |
||
| 64 | }); |