View Full Version : Status Bar - Word Processor example

30 Aug 2009, 10:38 AM

I am using the Word Processoe Example in the Status Bar demo, while the demo work as you are typing, if you backspace the number of characters/words are not updated is there a way to recalculate the words/characters?

as per: http://extjs.com/deploy/dev/examples/statusbar/statusbar-demo.html

this is the corresponding code:

// Create these explicitly so we can manipulate them later
var wordCount = new Ext.Toolbar.TextItem('Words: 0');
var charCount = new Ext.Toolbar.TextItem('Chars: 0');
var clock = new Ext.Toolbar.TextItem('');

new Ext.Panel({
title: 'Ext Word Processor',
renderTo: 'word-proc',
width: 500,
autoHeight: true,
bodyStyle: 'padding:5px;',
layout: 'fit',
bbar: new Ext.ux.StatusBar({
id: 'word-status',
// These are just the standard toolbar TextItems we created above. They get
// custom classes below in the render handler which is what gives them their
// customized inset appearance.
items: [wordCount, ' ', charCount, ' ', clock, ' ']
items: {
xtype: 'textarea',
id: 'word-textarea',
enableKeyEvents: true,
grow: true,
growMin: 100,
growMax: 200,
listeners: {
// After each keypress update the word and character count text items
'keypress': {
fn: function(t){
var v = t.getValue(),
wc = 0, cc = v.length ? v.length : 0;

if(cc > 0){
wc = v.match(/\b/g);
wc = wc ? wc.length / 2 : 0;
Ext.fly(wordCount.getEl()).update('Words: '+wc);
Ext.fly(charCount.getEl()).update('Chars: '+cc);
buffer: 1 // buffer to allow the value to update first
listeners: {
render: {
fn: function(){
// Add a class to the parent TD of each text item so we can give them some custom inset box
// styling. Also, since we are using a greedy spacer, we have to add a block level element
// into each text TD in order to give them a fixed width (TextItems are spans). Insert a
// spacer div into each TD using createChild() so that we can give it a width in CSS.

// Kick off the clock timer that updates the clock el every second:
run: function(){
Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
interval: 1000
delay: 100

// This sets up a fake auto-save function. It monitors keyboard activity and after no typing
// has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
// After a fake delay so that you can see the save activity it will update again to indicate
// that the action succeeded.
Ext.fly('word-textarea').on('keypress', function(){
var sb = Ext.getCmp('word-status');
sb.showBusy('Saving draft...');
iconCls: 'x-status-saved',
text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
}, this, {buffer:1500});