訪問Ext.js gridpanel和內容組件元素

Question

因此，我正在努力學習使用Ext.js，並且我認為它與asp.net ajax庫越相似，表明它與asp.net越相似。 我想用我具有Json格式的一些測試數據填充網格。

下面的代碼是我試圖用來訪問網格以及HTML表單正文中包含的在標記中定義的store元素的代碼。

<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>

下面是加載此代碼的代碼，它是從Ext.onReady函數中調用的。

 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');
        }

    }
}//,

問題是，即使嘗試使用庫中找到的許多訪問元素的方法，我仍然無法訪問網格的store元素。 在此，我將不勝感激，並且可能對為什么我無法通過

* Ext.Store.Manage ..... * Ext.get（....）.... * Ext.fly。 。 。 。 * gridInstance.getStore（）

提前致謝

Answer 1

幾點注意事項：

• Ext.get("GridPanel1") -返回元素，而不是ExtJs組件。 因此，似乎您需要使用Ext.getCmp("GridPanel1") 。

• 您可以通過loadData方法加載要存儲的正確數據。