PDA

View Full Version : Uncaught TypeError: Cannot read property 'JsonStore' of undefined



deepak.sharma
28 Feb 2012, 2:17 PM
Hi ,
I am facing the error "Uncaught TypeError: Cannot read property 'JsonStore' of undefined" when I run my code, i have pasted my code below..

1. This is my file named util.js

var vmwGridDS;

myDS = new Ext.data.JsonStore({
url: 'http://localhost:8090/account_manager/save',
autoLoad: true,
//baseParams:{html:VIEW_MODIFY_WIN_DATA, data:'all_contracts'},
root: 'datadisplay',
id: 'id',
fields:['nam','zip','address','city']
});

2. My main.js is using the above variable "myDS" as shown in below given code

Ext.require('Ext.form.Panel');
Ext.require('Ext.form.field.Date');
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
height: 433,
width: 772,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'MAMA POC',
items: [
{
xtype: 'fieldset',
height: 100,
width: 750,
layout: {
type: 'absolute'
},
title: 'My Fields',
x: 10,
y: 0,
items: [
{
xtype: 'combobox',
fieldLabel: 'Status',
labelWidth: 50
},
{
xtype: 'datefield',
width: 200,
fieldLabel: 'Date From',
labelWidth: 70,
name:'from',
id:'from',
x: 220,
y: 0
},
{
xtype: 'datefield',
width: 170,
fieldLabel: 'To',
labelWidth: 30,
name:'to',
id:'to',
x: 440,
y: -1
},
{
xtype: 'button',
text: 'Search',
x: 0,
y: 50,
handler: function(item) {
var f1 = Ext.getCmp('from');
var f2 = Ext.getCmp('to');
alert('here'+f1.getValue());
myDS.load({params:{start:0,limit:3}});
}
}
]
},
{
xtype: 'gridpanel',
title: 'Search Results',
x: 10,
y: 110,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Name',
id: 'nam',
name:'nam'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Zip',
id:'zip',
name:'zip'
},
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Address',
id:'address',
name:'address'
},
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'City',
id:'city',
name:'city'
}
],
viewConfig: {


}
}
]
});
});


3. The index.html shown below is using main.js as ..

<html>
<head>
<title>Account Manager</title>


<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">


<script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>

mitchellsimoens
28 Feb 2012, 5:35 PM
You need to create your JsonStore after onReady has been fired as the Ext JS classes you are requiring are still loading.

deepak.sharma
29 Feb 2012, 1:24 PM
SO how can I use it then. as inside handler function if I use as shown below then I get to see the error as "Uncaught TypeError: undefined is not a function" in line 'var myDS = new Ext.data.JsonStore({'..

Ext.require('Ext.form.Panel');Ext.require('Ext.form.field.Date');


Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
height: 433,
width: 772,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'TEST POC',
items: [
{
xtype: 'fieldset',
height: 100,
width: 750,
layout: {
type: 'absolute'
},
title: 'My Fields',
x: 10,
y: 0,
items: [
{
xtype: 'combobox',
fieldLabel: 'Status',
labelWidth: 50
},
{
xtype: 'datefield',
width: 200,
fieldLabel: 'Date From',
labelWidth: 70,
name:'from',
id:'from',
x: 220,
y: 0
},
{
xtype: 'datefield',
width: 170,
fieldLabel: 'To',
labelWidth: 30,
name:'to',
id:'to',
x: 440,
y: -1
},
{
xtype: 'button',
text: 'Search',
x: 0,
y: 50,
handler: function(item) {
var f1 = Ext.getCmp('from');
var f2 = Ext.getCmp('to');
var myDS = new Ext.data.JsonStore({
url: 'http://localhost:8090/account_manager/save',
autoLoad: true,
root: 'datadisplay',
id: 'id',
fields:['nam','zip','address','city']
});
myDS.load({params:{start:0,limit:3}});
}
}

]
},
{
xtype: 'gridpanel',
title: 'Search Results',
x: 10,
y: 110,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Name',
id: 'nam',
name:'nam'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Zip',
id:'zip',
name:'zip'
},
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Address',
id:'address',
name:'address'
},
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'City',
id:'city',
name:'city'
}
],
viewConfig: {

}
}
]


});
});

deepak.sharma
29 Feb 2012, 1:26 PM
also as I have moved all code into 1 js file only now .

mitchellsimoens
29 Feb 2012, 1:28 PM
You need to add it to the Ext.require:


Ext.require([
'Ext.data.*'
]);

deepak.sharma
29 Feb 2012, 1:59 PM
But i added the code given by u n it gave me thee error now "Uncaught Ext.Error: You are using a ServerProxy but have not supplied it with a url."