0
因此，我正在學習使用Ext.js，而且我認爲它與asp.net ajax lib非常相似，它越是表明它不是。我想用Json格式的一些測試數據填充網格。訪問Ext.js網格面板和內容組件元素
下面的代碼是我試圖用來訪問我的網格，並在我的HTML表單的正文中包含標記中定義的存儲元素。
<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');
}
}
}//,
問題是，我仍然不能夠訪問網格的存儲元素，甚至在庫中發現訪問元素，因此許多方法嘗試之後。我會很感激這裏的一些幫助，也許一些洞察力，爲什麼我無法通過
* Ext.Store.Manage ..... * Ext.get（....）。 ... * Ext.fly。 。 。 。 * gridInstance.getStore（）
由於事先
我應該補充說我已經試過Ext.getCmp（「GridPanel1」）並且不成功。只有Ext.get似乎返回一些對象。我能做些什麼來改變這種行爲 – user272671
所以有兩個問題：何時何地調用'loadGridStoreTestData'方法，以及當你使用'console.log（Ext.getCmp（「GridPanel1」））''時，你看到了什麼方法？ – Andron
我從Ext.Ready塊中調用該方法。目前，我注意到這個過程的方式不一致。我第一次嘗試，我無法得到GridPanel實例，但是，當我重新運行相同的代碼（使用Ext.fly）時，組件顯示出來了。 – user272671