Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2

Exclusive offer: get 50% off this eBook here
Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook — Save 50%

Clear step-by-step recipes for building impressive rich internet applications using the Ext JS JavaScript library

$29.99    $15.00
by Jorge Ramon | October 2009 | Cookbooks Open Source

Read Part One of Making Progress with Menus and Toolbars using Ext JS 3.0.

Embedding a progress bar in a status bar

This topic explains how to embed a progress bar in a panel's status bar, a scenario found in countless user interfaces:

Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2

How to do it

  1. Create a click handler that will simulate a long-running activity and update the progress bar:
      Ext.onReady(function() {
      var loadFn = function(btn, statusBar) {
      btn = Ext.getCmp(btn);
      btn.disable();
      Ext.fly('statusTxt').update('Saving...');
      pBar.wait({
      interval: 200,
      duration: 5000,
      increment: 15,
      fn: function() {
      btn.enable();
      Ext.fly('statusTxt').update('Done');
      }
      });
      };
  2. Create an instance of the progress bar:
      var pBar = new Ext.ProgressBar({
      id: 'pBar',
      width: 100
      });
  3. Create a host panel and embed the progress bar in the bbar of the panel. Also, add a button that will start the progress bar updates:
      var pnl = new Ext.Panel({
      title: 'Status bar with progress bar',
      renderTo: 'pnl1',
      width: 400,
      height: 200,
      bodyStyle: 'padding:10px;',
      items: [{
      xtype: 'button',
      id: 'btn',
      text: 'Save',
      width:'75',
      handler: loadFn.createCallback('btn', 'sBar')
      }],
      bbar: {
      id: 'sBar',
      items: [{ xtype: 'tbtext', text: '',id:'statusTxt' },'->',
      pBar]
      }
      });

How it works

The first step consists of creating loadFn, a function that simulates a long-running operation, so that we can see the progress bar animation when the button is clicked. The heart of loadFn is a call to ProgressBar.wait(…), which initiates the progress bar in an auto-update mode.

And this is how the status bar is embedded in the bbar of the panel:

bbar: {
id: 'sBar',
items: [{ xtype: 'tbtext', text: '',id:'statusTxt' },'->', pBar]

Observe how the progress bar is sent to the rightmost location in the status bar with the help of a Toolbar.Fill instance, declared with '->'.

Creating a custom look for the status bar items

Customizing the look of toolbar items is relatively simple. In this recipe, you will learn how to create toolbar items with a sunken look that can be found in many desktop applications:

Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2

How to do it

  1. Create the styles that will provide the custom look of the status bar text items:
      .custom-status-text-panel
      {
      border-top:1px solid #99BBE8;
      border-right:1px solid #fff;
      border-bottom:1px solid #fff;
      border-left:1px solid #99BBE8;
      padding:1px 2px 2px 1px;
      }

  2. Create a host panel:
      Ext.onReady(function() {
      var pnl = new Ext.Panel({
      title: 'Status bar with sunken text items',
      renderTo: 'pnl1',
      width: 400,
      height: 200,
      bodyStyle: 'padding:10px;',
  3. Define the panel's bbar with the text items:
      bbar: {
      id: 'sBar',
      items: [
      { id: 'cachedCount', xtype:'tbtext',
      text: 'Cached: 15' }, ' ',
      { id: 'uploadedCount', xtype: 'tbtext',
      text: 'Uploaded: 7' }, ' ',
      { id: 'invalidCount', xtype: 'tbtext',
      text: 'Invalid: 2' }
      ]
      },
  4. Now, add a handler for the afterrender event and use it to modify the styles of the text items:
      listeners: {
      'afterrender': {
      fn: function() {
      Ext.fly(Ext.getCmp('cachedCount').getEl()).parent().
      addClass('custom-status-text-panel');
      Ext.fly(Ext.getCmp('uploadedCount').getEl()).parent().
      addClass('custom-status-text-panel');
      Ext.fly(Ext.getCmp('invalidCount').getEl()).parent().
      addClass('custom-status-text-panel');
      },
      delay:500
      }
      }

How it works

The actual look of the items is defined by the style in the custom-status-text-panel CSS class. After the host panel and toolbar are created and rendered, the look of the items is changed by applying the style to each of the TD elements that contain the items. For example:

Ext.fly(Ext.getCmp('uploadedCount').getEl()).parent().
addClass('custom-status-text-panel');

See also...

  • The previous recipe, Embedding a progress bar in a status bar, explains how a progress bar can be embedded in a panel's status bar

Using a progress bar to indicate that your application is busy

In this topic, you will learn how to use a progress bar to indicate that your application is busy performing an operation. The next screenshot shows a progress bar built using this recipe:

Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2

How to do it

  1. Define the progress bar:
      Ext.onReady(function() {
      Ext.QuickTips.init();
      var pBar = new Ext.ProgressBar({
      id: 'pBar',
      width: 300,
      renderTo: 'pBarDiv'
      });
  2. Add a handler for the update event and use it to update the wait message:
      pBar.on('update', function(val) {
      //Handle this event if you need to
      // execute code at each progress interval.
      Ext.fly('pBarText').dom.innerHTML += '.';
      });
  3. Create a click handler for the button that will simulate a long-running activity:
      var btn = Ext.get('btn');
      btn.on('click', function() {
      Ext.fly('pBarText').update('Please wait');
      btn.dom.disabled = true;
      pBar.wait({
      interval: 200,
      duration: 5000,
      increment: 15,
      fn: function() {
      btn.dom.disabled = false;
      Ext.fly('pBarText').update('Done');
      }
      });
      });
  4. Add the button to the page:
      <button id="btn">Start long-running operation</button>

How it works

After creating the progress bar, the handler for its update event is created. While I use this handler simply to update the text message, you can use it to execute some other code every time that a progress interval occurs.

The click handler for the button calls the progress bar's wait(…) function, which causes the progress bar to auto-update at the configured interval and reset itself after the configured duration:

pBar.wait({
interval: 200,
duration: 5000,
increment: 15,
fn: function() {
btn.dom.disabled = false;
Ext.fly('pBarText').update('Done');
}
});

There's more

The progress bar can also be configured to run indefinitely by not passing the duration config option. Clearing the progress bar in this scenario requires a call to the reset() function.

See also...

  • The next recipe, Using a progress bar to report progress updates, illustrates how a progress bar can be set up to notify the user that progress is being made in the execution of an operation
  • The Changing the look of a progress bar recipe (covered later in this article) shows you how easy it is to change the look of the progress bar using custom styles

Summary

This article consisted recipes that examined the commonly-used menu items, as well as the different ways of setting up toolbars and progress bars in your applications.

[ 1 | 2 ]

If you have read this article you may be interested to view :

 

Ext JS 3.0 Cookbook Clear step-by-step recipes for building impressive rich internet applications using the Ext JS JavaScript library
Published: October 2009
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Jorge Ramon is the Vice President of Development for Taladro Systems LLC, where he has led the design and development of a number of software products for the law industry—including QwikTime™ and LawDrill™.

Jorge has over 16 years of experience as a software developer and has also worked creating web applications, search engines, and automatic-control software. He actively contributes to the software development community through his blog: MiamiCoder.com.

Books From Packt

Moodle 1.9 for Second Language Teaching
Moodle 1.9 for Second Language Teaching

eZ Publish 4: Enterprise Web Sites Step-by-Step
eZ Publish 4: Enterprise Web Sites Step-by-Step

Joomla! 1.5 Development Cookbook
Joomla! 1.5 Development Cookbook

Joomla! 1.5 SEO
oomla! 1.5 SEO

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Blender 3D 2.49 Incredible Machines
Blender 3D 2.49 Incredible Machines

SOA Cookbook
SOA Cookbook

Deep Inside osCommerce: The Cookbook
Deep Inside osCommerce: The Cookbook

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Q
y
B
A
q
Q
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software