1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | |
---|
10 | Ext.onReady(function(){ |
---|
11 | |
---|
12 | // This is a shared function that simulates a load action on a StatusBar. |
---|
13 | // It is reused by most of the example panels. |
---|
14 | var loadFn = function(btn, statusBar){ |
---|
15 | btn = Ext.getCmp(btn); |
---|
16 | statusBar = Ext.getCmp(statusBar); |
---|
17 | |
---|
18 | btn.disable(); |
---|
19 | statusBar.showBusy(); |
---|
20 | |
---|
21 | (function(){ |
---|
22 | statusBar.clearStatus({useDefaults:true}); |
---|
23 | btn.enable(); |
---|
24 | }).defer(2000); |
---|
25 | }; |
---|
26 | |
---|
27 | /* |
---|
28 | * ================ Basic StatusBar example ======================= |
---|
29 | */ |
---|
30 | new Ext.Panel({ |
---|
31 | title: 'Basic StatusBar', |
---|
32 | renderTo: 'basic', |
---|
33 | width: 350, |
---|
34 | height: 100, |
---|
35 | bodyStyle: 'padding:10px;', |
---|
36 | items:[{ |
---|
37 | xtype: 'button', |
---|
38 | id: 'basic-button', |
---|
39 | text: 'Do Loading', |
---|
40 | handler: loadFn.createCallback('basic-button', 'basic-statusbar') |
---|
41 | }], |
---|
42 | bbar: new Ext.StatusBar({ |
---|
43 | defaultText: 'Default status', |
---|
44 | id: 'basic-statusbar', |
---|
45 | items: [{ |
---|
46 | text: 'A Button' |
---|
47 | }, '-', 'Plain Text', ' ', ' '] |
---|
48 | }) |
---|
49 | }); |
---|
50 | |
---|
51 | /* |
---|
52 | * ================ Right-aligned StatusBar example ======================= |
---|
53 | */ |
---|
54 | new Ext.Panel({ |
---|
55 | title: 'Right-aligned StatusBar', |
---|
56 | renderTo: 'right-aligned', |
---|
57 | width: 350, |
---|
58 | height: 100, |
---|
59 | bodyStyle: 'padding:10px;', |
---|
60 | items:[{ |
---|
61 | xtype: 'button', |
---|
62 | id: 'right-button', |
---|
63 | text: 'Do Loading', |
---|
64 | handler: loadFn.createCallback('right-button', 'right-statusbar') |
---|
65 | }], |
---|
66 | bbar: new Ext.StatusBar({ |
---|
67 | defaultText: 'Default status', |
---|
68 | id: 'right-statusbar', |
---|
69 | statusAlign: 'right', // the magic config |
---|
70 | items: [{ |
---|
71 | text: 'A Button' |
---|
72 | }, '-', 'Plain Text', ' ', ' '] |
---|
73 | }) |
---|
74 | }); |
---|
75 | |
---|
76 | /* |
---|
77 | * ================ StatusBar Window example ======================= |
---|
78 | */ |
---|
79 | var win = new Ext.Window({ |
---|
80 | title: 'StatusBar Window', |
---|
81 | width: 400, |
---|
82 | minWidth: 350, |
---|
83 | height: 150, |
---|
84 | modal: true, |
---|
85 | closeAction: 'hide', |
---|
86 | bodyStyle: 'padding:10px;', |
---|
87 | items:[{ |
---|
88 | xtype: 'button', |
---|
89 | id: 'win-button', |
---|
90 | text: 'Do Loading', |
---|
91 | handler: loadFn.createCallback('win-button', 'win-statusbar') |
---|
92 | }], |
---|
93 | bbar: new Ext.StatusBar({ |
---|
94 | id: 'win-statusbar', |
---|
95 | defaultText: 'Ready', |
---|
96 | items: [{ |
---|
97 | text: 'A Button' |
---|
98 | }, '-', |
---|
99 | new Date().format('n/d/Y'), ' ', ' ', '-', { |
---|
100 | xtype:'tbsplit', |
---|
101 | text:'Status Menu', |
---|
102 | menuAlign: 'br-tr?', |
---|
103 | menu: new Ext.menu.Menu({ |
---|
104 | items: [{text: 'Item 1'}, {text: 'Item 2'}] |
---|
105 | }) |
---|
106 | }] |
---|
107 | }) |
---|
108 | }); |
---|
109 | |
---|
110 | new Ext.Button({ |
---|
111 | text: 'Show Window', |
---|
112 | renderTo: 'window', |
---|
113 | handler: function(){ |
---|
114 | win.show(); |
---|
115 | } |
---|
116 | }); |
---|
117 | |
---|
118 | /* |
---|
119 | * ================ Ext Word Processor example ======================= |
---|
120 | * |
---|
121 | * The StatusBar used in this example is completely standard. What is |
---|
122 | * customized are the styles and event handling to make the example a |
---|
123 | * lot more dynamic and application-oriented. |
---|
124 | * |
---|
125 | */ |
---|
126 | // Create these explicitly so we can manipulate them later |
---|
127 | var wordCount = new Ext.Toolbar.TextItem('Words: 0'); |
---|
128 | var charCount = new Ext.Toolbar.TextItem('Chars: 0'); |
---|
129 | var clock = new Ext.Toolbar.TextItem(''); |
---|
130 | |
---|
131 | new Ext.Panel({ |
---|
132 | title: 'Ext Word Processor', |
---|
133 | renderTo: 'word-proc', |
---|
134 | width: 500, |
---|
135 | autoHeight: true, |
---|
136 | bodyStyle: 'padding:5px;', |
---|
137 | layout: 'fit', |
---|
138 | bbar: new Ext.StatusBar({ |
---|
139 | id: 'word-status', |
---|
140 | // These are just the standard toolbar TextItems we created above. They get |
---|
141 | // custom classes below in the render handler which is what gives them their |
---|
142 | // customized inset appearance. |
---|
143 | items: [wordCount, ' ', charCount, ' ', clock, ' '] |
---|
144 | }), |
---|
145 | items: { |
---|
146 | xtype: 'textarea', |
---|
147 | id: 'word-textarea', |
---|
148 | enableKeyEvents: true, |
---|
149 | grow: true, |
---|
150 | growMin: 100, |
---|
151 | growMax: 200, |
---|
152 | listeners: { |
---|
153 | // After each keypress update the word and character count text items |
---|
154 | 'keypress': { |
---|
155 | fn: function(t){ |
---|
156 | var v = t.getValue(), |
---|
157 | wc = 0, cc = v.length ? v.length : 0; |
---|
158 | |
---|
159 | if(cc > 0){ |
---|
160 | wc = v.match(/\b/g); |
---|
161 | wc = wc ? wc.length / 2 : 0; |
---|
162 | } |
---|
163 | Ext.fly(wordCount.getEl()).update('Words: '+wc); |
---|
164 | Ext.fly(charCount.getEl()).update('Chars: '+cc); |
---|
165 | }, |
---|
166 | buffer: 1 // buffer to allow the value to update first |
---|
167 | } |
---|
168 | } |
---|
169 | }, |
---|
170 | listeners: { |
---|
171 | 'render': { |
---|
172 | fn: function(){ |
---|
173 | // Add a class to the parent TD of each text item so we can give them some custom inset box |
---|
174 | // styling. Also, since we are using a greedy spacer, we have to add a block level element |
---|
175 | // into each text TD in order to give them a fixed width (TextItems are spans). Insert a |
---|
176 | // spacer div into each TD using createChild() so that we can give it a width in CSS. |
---|
177 | Ext.fly(wordCount.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'}); |
---|
178 | Ext.fly(charCount.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'}); |
---|
179 | Ext.fly(clock.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'}); |
---|
180 | |
---|
181 | // Kick off the clock timer that updates the clock el every second: |
---|
182 | Ext.TaskMgr.start({ |
---|
183 | run: function(){ |
---|
184 | Ext.fly(clock.getEl()).update(new Date().format('g:i:s A')); |
---|
185 | }, |
---|
186 | interval: 1000 |
---|
187 | }); |
---|
188 | } |
---|
189 | } |
---|
190 | } |
---|
191 | }); |
---|
192 | |
---|
193 | // This sets up a fake auto-save function. It monitors keyboard activity and after no typing |
---|
194 | // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving. |
---|
195 | // After a fake delay so that you can see the save activity it will update again to indicate |
---|
196 | // that the action succeeded. |
---|
197 | Ext.fly('word-textarea').on('keypress', function(){ |
---|
198 | var sb = Ext.getCmp('word-status'); |
---|
199 | sb.showBusy('Saving draft...'); |
---|
200 | (function(){ |
---|
201 | sb.setStatus({ |
---|
202 | iconCls: 'x-status-saved', |
---|
203 | text: 'Draft auto-saved at ' + new Date().format('g:i:s A') |
---|
204 | }); |
---|
205 | }).defer(4000); |
---|
206 | }, this, {buffer:1500}); |
---|
207 | |
---|
208 | }); |
---|