Back to Library

Widgets Notes and Configuration

Live Grid

Ext.ux.Livegrid is an ExtJS user extension. It's core functionality is to render large data without the need of paging, realized through intelligent predictive buffering of data from the server

LiveGrid documentation wiki:

Ext JsonStore

the allows you store not just json data but also meta data associated with it

var myJsonStore = new{
    baseParams: {
       paramOne : 'someValue',
       paramTwo : 'anotherValue'
    url: ''

So the following json format data can be sent and stored:

 { "metaData" : {
    "root" : "rootAttribte",
    "fields" : [ "id": "text"],
    "sortInfo" : { "field" : "text", "direction" : "ASC" }
  "rootAttribute" : [
     { "id" : "0", "text" : "some text" },
     { "id" : "1", "text" : "some text" }


Adding transparency to a toolbar, override the default styling:

.x-toolbar {
    background: none no-repeat scroll 0 0 transparent;
    background-image: url("@{'/public/javascripts/ext/resources/images/darkgray/window/top-bottom.png'}");
    background-repeat: repeat;

Check Box Events

Getting the correct check box event handler can be a bit trouble some. The following code works:

var slideShowCheckBox = new Ext.form.Checkbox({
	checked: true,
	id : "checkBox",
	listeners: {
        check: checkEvent

function checkEvent (checkbox, checked){
	alert("the check even fired " + checked);

Ext Data Store

Data stores are handy means to iterate of arrays and json data

var store = new{
          	fields: ['alpha2code','name'],
          	data: [
	["JVMTOTALMEMORY", "JVM Total Memory"],
	["JVMUSEDMEMORY", "JVM Used Memory"],
	["JVMFREEMEMORY", "JVM Free Memory"]});

We can access and iterate using:[0]; // access an individual item

// iterate 
for (key in {[key];

Ext Date Selector - DateField

Below is an example of a date selector.
Note: the 'select' listener behaves more as expected that than the 'change' event that seems to lose browser focus. Another potential action is 'valid'

var fromDate = new Ext.form.DateField({
        anchor: '100%',
        fieldLabel: 'From',
        name: 'from_date',
        maxValue: new Date(),  // limited to the current date or prior
        format: 'Y-m-d',
        emptyText : defaultDate,
        listeners: { 'select' : fromDateAction } 

Handling the listener event:
functions are passed and Ext.DateField that getValue returns a javascript date object

function fromDateAction ( datefield){
	alert(" " + datefield.getValue());
extjs_notes.txt · Last modified: 2011/08/25 06:44 by root
RSS - 200 © CrosswireDigitialMedia Ltd