所以,我正在努力学习使用Ext.js,我认为它与asp.net ajax lib非常相似,它表明它不是越多。我想用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');
}
}
}//,
问题是我仍然无法访问网格的存储元素,即使在尝试使用库中的许多方法来访问元素之后也是如此。我很感激这里的一些帮助,也许还有一些见解,为什么我无法通过
获得商店元素* Ext.Store.Manage ..... * Ext.get(....).... * Ext.fly。 。 。 。 * gridInstance.getStore()
提前致谢
答案 0 :(得分:0)
几点说明:
Ext.get("GridPanel1")
- 返回元素,而不是ExtJs组件。因此,您似乎需要使用Ext.getCmp("GridPanel1")
。
您可以通过loadData方法加载正确的数据。