Home arrow JavaScript arrow Page 3 - EXT JS Passing Live Data
JAVASCRIPT

EXT JS Passing Live Data


Welcome to part two of the EXT-JS live data tutorial. In part one we created the underlying page and added the code to create the JsonStore, ColumnModel and GridPanel. Our GridPanel, however, currently has no data, so the first thing weíre going to do in this part of the tutorial is add the PHP code that will pass this data back to the JsonStore.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 12
July 27, 2009
TABLE OF CONTENTS:
  1. · EXT JS Passing Live Data
  2. · MySQL
  3. · Adding Additional Configuration Properties
  4. · Working More Closely with the Back End

print this article
SEARCH DEVARTICLES

EXT JS Passing Live Data - Adding Additional Configuration Properties
(Page 3 of 4 )

If you mouse over one of the grid headings youíll see a drop-down appear. In the menu that opens when a drop-down is clicked, there is the option to show or hide any column, but the sortable options are grayed out. Enabling these is very easy and can be achieved with just one line of code. In gridExample.html add the following line of code directly after the ColumnModel code:


//allow column sorting

cm.defaultSortable = true;


This property causes all columns in the grid to be sortable. If we donít want all of the columns to be sortable, we can enable sorting on selected columns by setting the sortable property to true on individual columns. Now when you run the page, you should be able to sort any column in either ascending or descending order:



There are a huge range of configurable properties that the ColumnModel can make use of in order to control the behavior of the columns. By default the columns are all resizable; to switch off this feature we can set the resizable property to false on each existing column definition:


//define the columns

var cm = new Ext.grid.ColumnModel([{

header:"Title",

dataIndex:"title",

width:170,

resizable:false

},{

header:"Image",

dataIndex:"image",

width:170,

resizable:false

},{

header:"In-Stock?",

dataIndex:"inStock",

width:70,

resizable:false

},{

header:"Price",

dataIndex:"price",

width:70,

resizable:false

},{

header:"Category",

dataIndex:"category",

width:70,

resizable:false

},{

header:"Manufacturer",

dataIndex:"manufacturer",

width:129,

resizable:false

}]);


Note that we canít set all columns to resizable:false in the same way that we could configure all columns to be sortable. The only other general property like this is defaultWidth which will set the width of all columns.

As well as the properties we have used in this example, we can also make columns editable, hide individual columns, prevent columns from being hidden, set the alignment of the data, set CSS for column cells, disable the drop-down menu and specify tooltips for the column header, among other things.

There are also a whole range of properties that can be set on the GridPanel as well. For example, we can enable the addition of a load mask, which automatically adds a gray overlay and loading icon to the whole grid while the data is being retrieved. This can be enabled with the loadMask property, which should be added to the existing configuration object:


var grid = new Ext.grid.GridPanel({

el:"productGrid",

width:700,

height:500,

title:"Products",

store:dataStore,

cm:cm,

loadMask:true,

});


The load mask will probably only be visible to you for a second or so when testing locally, but your visitors will be reassured that something is happening behind the scenes while they wait for the data to be loaded, as this is likely to take longer in a live scenario.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials