source: trunk/web/addons/job_monarch/lib/extjs-30/examples/debug/debug-console.html @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 12.4 KB
Line 
1<html>
2<head>
3  <title>Debug Console</title>
4        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
5        <link rel="stylesheet" type="text/css" href="debug.css" />
6
7    <!-- GC -->
8        <!-- LIBS -->
9        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
10        <!-- ENDLIBS -->
11
12    <script type="text/javascript" src="../../ext-all.js"></script>
13    <script type="text/javascript" src="debug.js"></script>
14
15        <style type="text/css">
16        html, body {
17        font:normal 12px verdana;
18        margin:0;
19        padding:0;
20        border:0 none;
21        overflow:hidden;
22        height:100%;
23    }
24        p {
25            margin:5px;
26        }
27    .settings {
28        background-image:url(../shared/icons/fam/folder_wrench.png);
29    }
30    .nav {
31        background-image:url(../shared/icons/fam/folder_go.png);
32    }
33    </style>
34        <script type="text/javascript">
35    Ext.onReady(function(){
36
37        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
38
39Ext.ns('App');
40
41App.BookStore = function(config) {
42        var config = config || {};
43        Ext.applyIf(config, {
44                reader: new Ext.data.XmlReader({
45           // records will have an "Item" tag
46           record: 'Item',
47           id: 'ASIN',
48           totalRecords: '@total'
49       }, [
50           // set up the fields mapping into the xml doc
51           // The first needs mapping, the others are very basic
52           {name: 'Author', mapping: 'ItemAttributes > Author'},
53           'Title',
54                   'Manufacturer',
55                   'ProductGroup',
56                   // Detail URL is not part of the column model of the grid
57                   'DetailPageURL'
58       ])
59        });
60        // call the superclass's constructor
61        App.BookStore.superclass.constructor.call(this, config);
62};
63Ext.extend(App.BookStore, Ext.data.Store);
64
65
66
67App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
68        // override
69        initComponent : function() {
70                Ext.apply(this, {
71                        // Pass in a column model definition
72                        // Note that the DetailPageURL was defined in the record definition but is not used
73                        // here. That is okay.
74                columns: [
75                    {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
76                    {header: "Title", dataIndex: 'Title', sortable: true},
77                    {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
78                    {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}
79                ],
80                        sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
81                        // Note the use of a storeId, this will register thisStore
82                        // with the StoreMgr and allow us to retrieve it very easily.
83                        store: new App.BookStore({
84                                storeId: 'gridBookStore',
85                                url: 'sheldon.xml'
86                        }),
87                        // force the grid to fit the space which is available
88                        viewConfig: {
89                                forceFit: true
90                        }
91                });
92                // finally call the superclasses implementation
93                App.BookGrid.superclass.initComponent.call(this);
94        }
95});
96Ext.reg('bookgrid', App.BookGrid);
97
98
99/**
100 * App.BookDetail
101 * @extends Ext.Panel
102 * This is a specialized Panel which is used to show information about
103 * a book.
104 *
105 * This demonstrates adding 2 custom properties (tplMarkup and
106 * startingMarkup) to the class. It also overrides the initComponent
107 * method and adds a new method called updateDetail.
108 *
109 * The class will be registered with an xtype of 'bookdetail'
110 */
111App.BookDetail = Ext.extend(Ext.Panel, {
112        // add tplMarkup as a new property
113        tplMarkup: [
114                'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
115                'Author: {Author}<br/>',
116                'Manufacturer: {Manufacturer}<br/>',
117                'Product Group: {ProductGroup}<br/>'
118        ],
119        // startingMarup as a new property
120        startingMarkup: 'Please select a book to see additional details',
121        // override initComponent to create and compile the template
122        // apply styles to the body of the panel and initialize
123        // html to startingMarkup
124        initComponent: function() {
125                this.tpl = new Ext.Template(this.tplMarkup);
126                Ext.apply(this, {
127                        bodyStyle: {
128                                background: '#ffffff',
129                                padding: '7px'
130                        },
131                        html: this.startingMarkup
132                });
133                // call the superclass's initComponent implementation
134                App.BookDetail.superclass.initComponent.call(this);
135        },
136        // add a method which updates the details
137        updateDetail: function(data) {
138                this.tpl.overwrite(this.body, data);
139        }
140});
141// register the App.BookDetail class with an xtype of bookdetail
142Ext.reg('bookdetail', App.BookDetail);
143
144
145/**
146 * App.BookMasterDetail
147 * @extends Ext.Panel
148 *
149 * This is a specialized panel which is composed of both a bookgrid
150 * and a bookdetail panel. It provides the glue between the two
151 * components to allow them to communicate. You could consider this
152 * the actual application.
153 *
154 */
155App.BookMasterDetail = Ext.extend(Ext.Panel, {
156        // override initComponent
157        initComponent: function() {
158                // used applyIf rather than apply so user could
159                // override the defaults
160                Ext.applyIf(this, {
161                        frame: true,
162                        title: 'Book List',
163                        width: 540,
164                        height: 400,
165                        layout: 'border',
166                        items: [{
167                                xtype: 'bookgrid',
168                                itemId: 'gridPanel',
169                                region: 'north',
170                                height: 210,
171                                split: true
172                        },{
173                                xtype: 'bookdetail',
174                                itemId: 'detailPanel',
175                                region: 'center'
176                        }]
177                })
178                // call the superclass's initComponent implementation
179                App.BookMasterDetail.superclass.initComponent.call(this);
180        },
181        // override initEvents
182        initEvents: function() {
183                // call the superclass's initEvents implementation
184                App.BookMasterDetail.superclass.initEvents.call(this);
185
186                // now add application specific events
187                // notice we use the selectionmodel's rowselect event rather
188                // than a click event from the grid to provide key navigation
189                // as well as mouse navigation
190                var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
191                bookGridSm.on('rowselect', this.onRowSelect, this);
192        },
193        // add a method called onRowSelect
194        // This matches the method signature as defined by the 'rowselect'
195        // event defined in Ext.grid.RowSelectionModel
196        onRowSelect: function(sm, rowIdx, r) {
197                // getComponent will retrieve itemId's or id's. Note that itemId's
198                // are scoped locally to this instance of a component to avoid
199                // conflicts with the ComponentMgr
200                var detailPanel = this.getComponent('detailPanel');
201                detailPanel.updateDetail(r.data);
202        }
203});
204// register an xtype with this class
205Ext.reg('bookmasterdetail', App.BookMasterDetail);
206
207
208// Finally now that we've defined all of our classes we can instantiate
209// an instance of the app and renderTo an existing div called 'binding-example'
210// Note now that classes have encapsulated this behavior we can easily create
211// an instance of this app to be used in many different contexts, you could
212// easily place this application in an Ext.Window for example
213        // create an instance of the app
214        var bookApp = new App.BookMasterDetail({
215                renderTo: 'center2'
216        });
217        // We can retrieve a reference to the data store
218        // via the StoreMgr by its storeId
219        Ext.StoreMgr.get('gridBookStore').load();
220
221
222
223
224       var viewport = new Ext.Viewport({
225            id: 'viewport-component',
226            layout:'border',
227            items:[
228                new Ext.BoxComponent({ // raw
229                    id:'north-panel',
230                    region:'north',
231                    el: 'north',
232                    height:32
233                }),{
234                    id:'south-panel',
235                    region:'south',
236                    contentEl: 'south',
237                    split:true,
238                    height: 100,
239                    minSize: 100,
240                    maxSize: 200,
241                    collapsible: true,
242                    title:'South',
243                    margins:'0 0 0 0'
244                }, {
245                    id:'east-panel',
246                    region:'east',
247                    title: 'East Side',
248                    collapsible: true,
249                    split:true,
250                    width: 225,
251                    minSize: 175,
252                    maxSize: 400,
253                    layout:'fit',
254                    margins:'0 5 0 0',
255                    items:
256                        new Ext.TabPanel({
257                            border:false,
258                            activeTab:1,
259                            tabPosition:'bottom',
260                            items:[{
261                                html:'<p>A TabPanel component can be a region.</p>',
262                                title: 'A Tab',
263                                autoScroll:true
264                            },
265                            new Ext.grid.PropertyGrid({
266                                id:'propGrid',
267                                title: 'Property Grid',
268                                closable: true,
269                                source: {
270                                    "(name)": "Properties Grid",
271                                    "grouping": false,
272                                    "autoFitColumns": true,
273                                    "productionQuality": false,
274                                    "created": new Date(Date.parse('10/15/2006')),
275                                    "tested": false,
276                                    "version": .01,
277                                    "borderWidth": 1
278                                }
279                            })]
280                        })
281                 },{
282                    region:'west',
283                    id:'west-panel',
284                    title:'West',
285                    split:true,
286                    width: 200,
287                    minSize: 175,
288                    maxSize: 400,
289                    collapsible: true,
290                    margins:'0 0 0 5',
291                    layout:'accordion',
292                    layoutConfig:{
293                        animate:true
294                    },
295                    items: [{
296                        id:'west-nav',
297                        contentEl: 'west',
298                        title:'Navigation',
299                        border:false,
300                        iconCls:'nav'
301                    },{
302                        id:'west-settings',
303                        title:'Settings',
304                        html:'<p>Some settings in here.</p>',
305                        border:false,
306                        iconCls:'settings'
307                    }]
308                },
309                new Ext.TabPanel({
310                    id:'center-region',
311                    region:'center',
312                    deferredRender:false,
313                    activeTab:0,
314                    items:[{
315                        id:'first-tab',
316                        contentEl:'center1',
317                        title: 'Close Me',
318                        closable:true,
319                        autoScroll:true
320                    },{
321                        id:'second-tab',
322                        contentEl:'center2',
323                        title: 'Center Panel',
324                        autoScroll:true
325                    }]
326                })
327             ]
328        });
329    });
330        </script>
331</head>
332<body>
333<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
334  <div id="west">
335    <p>Hi. I'm the west panel.</p>
336  </div>
337  <div id="north">
338    <p>north - generally for menus, toolbars and/or advertisements</p>
339  </div>
340  <div id="center2">
341  </div>
342  <div id="center1">
343        <p>Included in ext-all-debug.js is the Ext Debug Console. It offers a limited amount of <a href="http://getfirebug.com">FireBug</a>
344        functionality cross browser. The most important feature is the "DOM Inspector" and CSS and DOM attribute editing. In any browser where "console"
345        is not already defined, the Ext console will handle console.log(), time() and other calls.
346    </p>
347   <p>
348       <b>Try It</b><br/>
349       This page includes ext-all-debug.js and some test markup so you can try it out. Click on the image below to bring up the console.
350   </p>
351   <a href="#" onclick="Ext.log('Hello from the Ext console. This is logged using the Ext.log function.');return false;"><img src="debug.png" style="margin:15px;"/></a>
352
353    <p>
354        The full source is available in the "source" directory of the Ext download.
355    </p>
356  </div>
357  <div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
358  </div>
359  <div id="south">
360    <p>south - generally for informational stuff, also could be for status bar</p>
361  </div>
362
363 </body>
364</html>
Note: See TracBrowser for help on using the repository browser.