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: http://wiki.ext-livegrid.com/

Ext JsonStore

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

var myJsonStore = new Ext.data.JsonStore({
    baseParams: {
       paramOne : 'someValue',
       paramTwo : 'anotherValue'
    },
    url: 'http://domain.com/someJsonFile'
});

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" }
  ]
  }

Toolbars

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 Ext.data.SimpleStore({
          	fields: ['alpha2code','name'],
          	data: [
	["JVMTOTALMEMORY", "JVM Total Memory"],
	["JVMUSEDMEMORY", "JVM Used Memory"],
	["JVMFREEMEMORY", "JVM Free Memory"]});

We can access and iterate using:

myStore.data.items[0]; // access an individual item

// iterate 
for (key in myStore.data.items) {
    myStore.data.items[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