访问Ext.js gridpanel和内容组件元素

Question

So, I am working on learning to use Ext.js, and the more I think it quite similar to the asp.net ajax lib, the more it shows it is not. I would like to populate a grid with some test data I have in Json format.

the code below is what I am trying to use to access my grid, and the contained store element, defined in markup, in the body of my html form.

<div id="errormessage"></div>
<ext:GridPanel id="GridPanel1" runat="server" Frame="true" Title="Tasks Manager" Height="400" Width="500" StyleSpec="margin-top: 10px">
    <BottomBar>
        <ext:PagingToolbar runat="server" />
    </BottomBar> 
    <Store>
        <ext:Store id="strTask" runat="server" AutoSync="true" ShowWarningOnFailure="true">
            <Model>
                <ext:Model runat="server" IDProperty="taskid">
                    <Fields>
                        <ext:ModelField Name="taskid" />
                        <ext:ModelField Name="title" />
                        <ext:ModelField Name="author" />
                        <ext:ModelField Name="description" />
                        <ext:ModelField Name="dateCreated" Type="Date" />
                        <ext:ModelField Name="dateModified" Type="Date" />
                        <ext:ModelField Name="dueDate" Type="Date" />
                        <ext:ModelField Name="status" />
                    </Fields>
                    <Validations>
                        <ext:PresenceValidation Field="author" />
                        <ext:PresenceValidation Field="description" />
                        <ext:PresenceValidation Field="dueDate" />
                    </Validations>
                </ext:Model>
            </Model>
            <Sorters>
                <ext:DataSorter Property="dueDate" Direction="ASC" />
                <ext:DataSorter Property="status" Direction="ASC" />
            </Sorters>
        </ext:Store>
    </Store>
    <ColumnModel>
        <Columns>
            <ext:Column runat="server" Text="Title" DataIndex="title" Flex="1" />
            <ext:Column runat="server" Text="Author" DataIndex="author" Width="130" />
            <ext:Column runat="server" Text="description" DataIndex="description" Width="70" Align="right" />
            <ext:DateColumn runat="server" Text="Date Due" DataIndex="dueDate" Width="95" Format="yyyy-MM-dd" />
         <ext:DateColumn runat="server" Format="MM-dd-yyyy" Text="date Created" DataIndex="dateCreated" Width="55" />
            <ext:Column runat="server" Text="Status" DataIndex="status" Width="70" Align="right"></ext:Column>
        </Columns>
    </ColumnModel> 

</ext:GridPanel>

Below is the code to load this, and it is being called from within the Ext.onReady function.

 loadGridStoreTestData: function (dataRec) {
    Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + ' . gridPanel clientid is ' + document.getElementById("gridPanelClientId").value + ' \n'));
    Ext.fly('logger').appendChild(document.createElement('br'));
    //  var gridclientid = document.getElementById("GridPanel1");
    var grid = Ext.fly('GridPanel1');
    if (!grid || grid === 'undefined') {
        Ext.fly('errormessage').insertHtml('afterBegin', 'No GridPanel Object found here.');
    } else {
        Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + ' . gridPanel found.'));
        Ext.fly('logger').appendChild(document.createElement('br'));
        grid.on({
            'viewready': { fn: this.onViewReadyHandler, scope: this },
            'beforeshow': { fn: this.onBeforeShowHandler, scope: this }
            //, 'exception': { fn: this.onExceptionHandler, scope: this }
        });

        var store;

        Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '. gridPanel Event Handlers Attached.' ));
        Ext.fly('logger').appendChild(document.createElement('br'));
        //simply to directly access the store object

        try {
            if (!store || store === 'undefined') {
                Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '.  Attempting to access store view grid.store property .'));
                Ext.fly('logger').appendChild(document.createElement('br'));
                store = grid.store;
        }
    } catch (e) {
        Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + '. An Exception occured while processing grid.store .'));
        Ext.fly('errormessage').appendChild(document.createElement('br'));
        Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + e.message));
        Ext.fly('errormessage').appendChild(document.createElement('br'));
        }
        //search using the lookup manager

        try {
            if (!store || store === 'undefined') {
                Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '.  Attempting now to access store via Manager.Lookup .' ));
                Ext.fly('logger').appendChild(document.createElement('br'));
                store = Ext.data.StoreManager.lookup('strTask');
            }
        } catch (e) {
            Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + '. An Exception occured while processing Ext.data.StoreManager.lookup(StrTask) .\n'));
            Ext.fly('errormessage').appendChild(document.createElement('br'));
            Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + e.message));
            Ext.fly('errormessage').appendChild(document.createElement('br'));
        }
        //search using Ext.getCmp

        try {
            if (!store || store === 'undefined') {
                Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '.  Attempting now to access store via Ext.getCmp .' + '\n'));
                Ext.fly('logger').appendChild(document.createElement('br'));
                store = Ext.getCmp('strTask');
        }
    } catch (e) {
            Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + '. An Exception occured while processing  Ext.getCmp(strTask) .\n'));
            Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + e.message));
        }
        //if store is still not found at this point
        if (!store || store === 'undefined') {
            try {
                Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '.  Store still not found .\n'));
                Ext.fly('logger').appendChild(document.createElement('br'));
                Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '. Beginning final method to access store.\n'));
                Ext.fly('logger').appendChild(document.createElement('br'));
                if (grid.hasChildNodes)
                {
                    Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '. Confirmed gridPanel has ChildNodes.\n'));
                    Ext.fly('logger').appendChild(document.createElement('br'));
                    var children = Array.prototype.slice.call(grid.ChildNodes);
                    Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '.  Beginning gridPanel ChildNodes converted to Array for each search.\n'));
                    Ext.fly('logger').appendChild(document.createElement('br'));
                    if (children) {
                        for (var node in children) {
                            if (typeof (node) === typeof (new Ext.data.Store())) {
                                Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '. Store object found.\n'));
                                Ext.fly('logger').appendChild(document.createElement('br'));
                                store = node;
                            }
                        }
                    }
                }
            } catch (e) {
                Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + '. Exception  occured while traversing Grid children:' + e.message + ' .\n'));
                Ext.fly('errormessage').appendChild(document.createElement('br'));
                return;
            }
        }
        //assuming store has been found at this point 
        if (store && store !=='undefined')
        {
            Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '.  appending event handlers to store object found.\n'));
            Ext.fly('logger').appendChild(document.createElement('br'));
            try {
                store.on({
                    'datachanged': { fn: this.onStoreDataChangedHandler, scope: this },
                    'add': { fn: this.onStoreAddHandler, scope: this },
                    'load': { fn: this.onStoreLoadHandler, scope: this },
                    'update': { fn: this.onStoreUpdateHandler, scope: this },
                    'beforefetch': { fn: this.onStoreBeforeFetchHandler, scope: this },
                    'remove': { fn: this.onStoreRemoveHandler, scope: this },
                    // 'exception': { fn: this.onStoreExceptionHandler, scope: this },
                    'clear': { fn: this.onStoreClearHandler, scope: this }
                });
            } catch (e) {+
                Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + '. Error occured while trying to append handlers to store object .' + e.message + '\n'));
                Ext.fly('errormessage').appendChild(document.createElement('br'));
                return;
            }

            Ext.fly('logger').appendChild(document.createTextNode((this.counter++) + '. Now invoking loadData routine on Store object that was found.\n'));
            Ext.fly('logger').appendChild(document.createElement('br'));
            try {
                store.loadData(dataRec);
            } catch (e) {
                Ext.fly('errormessage').appendChild(document.createTextNode((this.counter++) + '. Error occured while trying to call loadData on store object : ' + e.message + '.\n'));
                return;
            } 

        }
        else {
            Ext.fly('errormessage').insertHtml('afterBegin',(this.counter++) + '.  No store configured was found for this search');
        }

    }
}//,

The problem is I am still not able to access the grid's store element, even after experimenting with so many methods found in the library for accessing elements. I would appreciate some help here and maybe some insight on why I am not able to get at the store element via

*Ext.Store.Manage ..... *Ext.get(....).... *Ext.fly . . . . *gridInstance.getStore()

thanks in advance

Answer 1

Several notes:

• Ext.get("GridPanel1") - returns element, not an ExtJs component. So it seems you need to use Ext.getCmp("GridPanel1") .

• You can load correct data to store via loadData method.