I am new to Ext js and facing certain problem in working with it. Can someone help me out?
Following is the code I am working on.
<html>
<head>
<title> Account Grid </title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script src="../extjs/adapter/ext/ext-base.js"></script>
<script src="../extjs/ext-all.js"></script>
<script src="../extjs/examples/ux/ux-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load('D:/workspace/Jasper_Report_Test_Tool/resources/xml/account.xml');
alert(xmlDoc.getElementsByTagName('account').length);
var store = new Ext.data.XmlStore({
data : xmlDoc,
record : 'acccount',
fields : ['id','account_type','account_no','balance'],
autoLoad : true
}); //store
var grid = new Ext.grid.GridView();
var colModel = new Ext.grid.ColumnModel([{
header : 'id',
sortable : true,
dataIndex : 'id'
}, {
header : 'Account Type',
dataIndex : 'account_type'
}, {
header : 'Account number',
dataIndex : 'account_no'
}, {
header : 'Balance',
dataIndex : 'balance'
}]);
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
});
var grid = new Ext.grid.GridPanel({
title : 'Account Details', //panel related
autoHeight : true, // configurations
renderTo : Ext.getBody(),
store : store, // data store
//view : gridView, //related
colModel :colModel, //configurations
selModel : selModel
}); //gridPanel
}); //onReady
</script>
</head>
<body>
<div id ="id1"> </div>
</body>
</html>
The grid is displayed but it does not display the values added to the xml file. I took the count of the xmlDoc elements and it gives the proper count of number of elements added. The file is loaded but not getting displayed. Can someone tell me where I went wrong?
Submit an article or tip