ExtJS: July 2008 Archives

Here's an example of how to create an ExtJS TreePanel from markup. Note the use of "AsyncTreeNode" and "TreeLoader" - even though this is a statically-marked up tree, it will not work without those configuration options. I don't know if this is a lack of understanding on my part or not, but the code below works. :)

Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

Ext.onReady(function(){
    Ext.QuickTips.init();


    // Create the "SampleTreePanel" pre-configured class

    SampleTreePanel = Ext.extend(Ext.tree.TreePanel, {
        title: 'Sample Tree Panel',
        width: 200,
        height: 400,
        loader: new Ext.tree.TreeLoader(),
        rootVisible: false,
        border: false,

        initComponent: function(){
            Ext.apply(this, {

                root: new Ext.tree.AsyncTreeNode({
                    children: [{
                        text: 'First',
                        expanded: true,
                        children: [{
                            text: 'one',
                            leaf: true
                        }, {
                            text: 'two',
                            leaf: true
                        }]
                    }, {
                        text: 'Second',
                        expanded: true,
                        children: [{
                            text: 'one',
                            leaf: true
                        }]
                    }]
                })
            })

            SampleTreePanel.superclass.initComponent.apply(this, arguments);
        }
    });
    Ext.reg('tree_panel', SampleTreePanel);


    // Instantiate the tree panel, then attach an event listener..

    var tree = new SampleTreePanel();

    tree.on('click', function(node, e){
        debugger;
    }, this);



    // And create a window to display the tree panel in...

    var wind = new Ext.Window({
        plain: true,
        bodyStyle: 'padding:5px;',
        layout: 'fit',
        items: [tree]
    });

    wind.show();
});

Often I want to create a pre-configured class to encapsulate some form fields in a reusable way. When doing this, however, you cannot extent Ext.FormPanel - if you do this and then try to embed your class in an existing FormPanel you’ll get an obscure error deep in the bowels of ExtJS. :(

Instead, extend Ext.Panel, and then create a FormPanel inside your panel. For example, here’s a simple “LocationPanel” that displays a Campus and Building labels. Note that the class extends Ext.Panel, and then embeds a ‘form’ xtype, and the form fields are inside that…

    LocationPanel = Ext.extend(Ext.Panel, {
        campus: 'defaultCampus',
        building: 'defaultBuilding',

        width: 300,
        height: 50,
        frame: true,
        border: true,
        labelWidth: 75,
        title: 'Location Panel',

        initComponent: function(){
            Ext.apply(this, {
                items: [{
                layout: 'form',
                    items: [{
                        layout: 'column',
                        items: [{
                            columnWidth: '.5',
                            layout: 'form',
                            items: [{
                                    xtype: 'label',
                                    text: this.campus
                            }]
                        }, {
                            columnWidth: '.5',
                            layout: 'form',
                            items: [{
                                    xtype: 'label',
                                    text: this.building
                            }]
                        }]
                    }]
                }]
            });
            LocationPanel.superclass.initComponent.apply(this, arguments);
        }
    });
    Ext.reg('location_panel', LocationPanel);

Here’s an example of a pre-configured class that fires a custom event, and code that then listens for the event:

Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

Ext.onReady(function(){
    Ext.QuickTips.init();

    MyForm = Ext.extend(Ext.form.FormPanel, {
        id: 'simpleForm',
        title: 'Simple Form',
        frame: true,
        width: 300,
        initComponent: function(){
            Ext.apply(this, {
                renderTo: Ext.getBody(),
                items: [new Ext.Button({
                    id: 'theButton',
                    text: 'Test',
                    listeners: {
                        'click': {

                        // this 'scope' value is CRITICAL so that the event is fired in 
                        // the scope of the component, not the anonymous function...

                            scope: this,        

                            fn: function(field, newVal, oldVal){
                                console.log("custom_event fired");
                                this.fireEvent('custom_event');
                            }
                        }
                    }
                })]
            });
            MyForm.superclass.initComponent.apply(this, arguments);


          // This 'addEvents' call does not seem to be technically required, but most 
          // of the ExtJS examples use it, and it provides a good way of documenting 
          // which events your class fires.

            this.addEvents('custom_event');
        }
    });




    // Create an instance of the form, and listen for the event...

    var simple = new MyForm({});

    simple.on('custom_event', function(){
        console.log("custom event received!");
    });
});

Assume we have the following JSON data:

stcCallback1001({
    "totalCount":"2",
    "Names":[
        {"name":"one", "ID":"1"},
        {"name":"two", "ID":"2"}
    ]
})

(Note that the JSON object is wrapped in the “stcCallback1001” function - this wrapping is required by the Ext “ScriptTagProxy”, which enables cross-site retrieval of data).

Below we have a ComboBox in a panel that will correctly display/handle the above data. The mode: ‘remote’ and triggerAction: ‘all’ config parameters are critical to getting this to work.

Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

Ext.onReady(function(){
    Ext.QuickTips.init();

    var proxy = new Ext.data.ScriptTagProxy({
        url: 'http://localhost:8080/cbTest'
    });

    var store = new Ext.data.Store({
        proxy: proxy,
        reader: new Ext.data.JsonReader({
            id: 'ID',
            totalProperty: 'totalCount',
            root: 'Names'
        }, [{
            name: 'ID'
        }, {
            name: 'name'
        }])
    });


    var simple = new Ext.form.FormPanel({
        id: 'simpleForm',
        title: 'Simple Form',
        labelWidth: 75,
        frame: true,
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        renderTo: Ext.getBody(),

        items: [{
            store: store,
            fieldLabel: 'ComboBox',
            displayField: 'name',
            valueField: 'name', 
            typeAhead: true,
            forceSelection: true,
            mode: 'remote',
            triggerAction: 'all',
            selectOnFocus: true,
            editable: true,
            xtype: 'combo',

            listeners: {

                // 'change' will be fired when the value has changed and the user exits the ComboBox via tab, click, etc.
                // The 'newValue' and 'oldValue' params will be from the field specified in the 'valueField' config above.
                change: function(combo, newValue, oldValue){
                    console.log("Old Value: " + oldValue);
                    console.log("New Value: " + newValue);
                },

                // 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
                select: function(combo, record, index){
                    console.log(record.data.name);
                    console.log(index);
                }
            }
        }]
    });
});

An example of a ComboBox in a Panel. The ComboBox is using a local SimpleStore, and responding to the ‘select’ and ‘change’ events.

Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

Ext.onReady(function(){
    Ext.QuickTips.init();

    var store = new Ext.data.SimpleStore({
        fields: ['dataFieldName', 'displayFieldName'],
        data: [['FLC', 'Carrier'], ['DES', 'Destination'], 
            ['CTY', 'Country'], ['MON', 'Month']],
        autoLoad: false
    });

    var simple = new Ext.form.FormPanel({
        id: 'simpleForm',
        title: 'Simple Form',
        labelWidth: 75,
        frame: true,
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        renderTo: Ext.getBody(),

        items: [{
            store: store,
            fieldLabel: 'ComboBox',
            displayField: 'displayFieldName',   // what the user sees in the popup
            valueField: 'dataFieldName',        // what is passed to the 'change' event
            typeAhead: true,
            forceSelection: true,
            mode: 'local',
            triggerAction: 'all',
            selectOnFocus: true,
            editable: true,
            xtype: 'combo',

            listeners: {

                // 'change' will be fired when the value has changed and the user exits the 
                // ComboBox via tab, click, etc.  The 'newValue' and 'oldValue' params will 
                // be from the field specified in the 'valueField' config above.
                change: function(combo, newValue, oldValue){
                    console.log("Old Value: " + oldValue);
                    console.log("New Value: " + newValue);
                },

                // 'select' will be fired as soon as an item in the ComboBox is selected.
                select: function(combo, record, index){
                    console.log(record.data.dataFieldName);
                    console.log(record.data.displayFieldName);
                    console.log(index);
                }
            }
        }]
    });
});