PDA

View Full Version : Extjs 4 not working on Chrome and working on IE



jenis35@yahoo.co.in
25 Jul 2012, 11:51 AM
Hi Team,

Please help me out. I am trying to make a small application. I have included ext-all-dev.js and ext-dev.js in my html file, and then I am rendering Form as well as Grid in a separate JS which is included in html file. When I use this html page in IE, It shows me Form, but not Grid. But both of them are not working in Chrome.

Previously when I was adding bootstrap.js in my project, chrome was loading form.. Also, let me know which and all JS files should I include from ExtJS directory.

Please help.

Thanks.

scottmartin
25 Jul 2012, 12:28 PM
You should only need ext-all-dev (or ext-all-debug) for development, not ext-dev as well.

If you take one of our examples does it run?
Do you see any errors on the console?
What are you using to debug your application?

Here is an example html (very basic)


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>

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

<!-- pick one based on needs -->
<!-- ext.js, ext-all-debug.js, ext-all-dev.js -->
<script type="text/javascript" src="../extjs4/ext-all-debug.js"></script>

<!-- page specific -->
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>Body</h1>
</body>
</html>


Scott.

jenis35@yahoo.co.in
25 Jul 2012, 12:58 PM
Hi Scott,

Thanks for the reply. I have now only included ext-all-dev.js in my project, I am able to load the form, but somehow the Grid is not loading. It is showing me this error in the console.

ext-all-dev.js:71019 (http://localhost:8080/SampleProject-0.0.1-SNAPSHOT/resources/lib/ext-4.1.0/ext-all-dev.js)Uncaught TypeError: Cannot read property 'items' of undefined



Here is my Grid panel (gridsample.js) code.



Ext.create('Ext.grid.Panel', {
store : Ext.create('Ext.data.ArrayStore', {
fields : [{
name : 'book'
}, {
name : 'author'
}],
data : [['Ext JS 4: First Look', 'Loiane Groner']]
}),
columns : [{
text : 'Book',
flex : 1,
sortable : false,
dataIndex : 'book'
}, {
text : 'Author',
width : 100,
sortable : true,
dataIndex : 'author'
}],
height : 80,
width : 300,
title : 'Simple Grid',
renderTo : Ext.getBody()
});




Here is how my html looks like:



<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>Teacher Certification POC</title>






<link href="<c:url value="/resources/lib/ext-4.1.0/resources/css/ext-all.css" />" rel="stylesheet" type="text/css" />




<script type="text/javascript" src="<c:url value="/resources/lib/ext-4.1.0/ext-all-dev.js" />" ></script>


<script type="text/javascript" src="<c:url value="/resources/js/gridsample.js" />"></script>






</head>
<body>
<h2>Welcome User !!</h2>
</body>
</html>




Please tell me where am I doing mistake ?

jenis35@yahoo.co.in
25 Jul 2012, 1:07 PM
Hi Scott, <br>
<br>
Thanks for the reply. I have now only included ext-all-dev.js in my project, I am able to load the form, but somehow the Grid is not loading. It is showing me this error in the console. <br>
<br>
<a href="http://localhost:8080/SampleProject-0.0.1-SNAPSHOT/resources/lib/ext-4.1.0/ext-all-dev.js" target="_blank" rel="nofollow">ext-all-dev.js:71019</a><font color="#FF0000"><span style="font-family: Consolas">Uncaught TypeError: Cannot read property 'items' of undefined<br>
<br>
<br>
<br>
</span></font><span style="font-family: Consolas">Here is my Grid panel (gridsample.js) code. <br>
<br>

<br>
Ext.create('Ext.grid.Panel', {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;store : Ext.create('Ext.data.ArrayStore', {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fields : [{<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name : 'book'<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name : 'author'<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}],<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data : [['Ext JS 4: First Look', 'Loiane Groner']]<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;columns : [{<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text : 'Book',<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex : 1,<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sortable : false,<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataIndex : 'book'<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text : 'Author',<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width : 100,<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sortable : true,<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataIndex : 'author'<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}],<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height : 80,<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width : 300,<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title : 'Simple Grid',<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderTo : Ext.getBody()<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br>
<br>
<br>
<br>
<br>
Here is how my html looks like:<br>
<br>

<br>
&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;<br>
&lt;%@ page session="false"%&gt;<br>
&lt;c:set var="ctx" value="${pageContext.request.contextPath}" /&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;Teacher Certification POC&lt;/title&gt;<br>
<br>
<br>
<br>
<br>
<br>
<br>
&lt;link href="&lt;c:url value="/resources/lib/ext-4.1.0/resources/css/ext-all.css" /&gt;" rel="stylesheet" type="text/css" /&gt;<br>
<br>
<br>
<br>
<br>
&lt;script type="text/javascript" src="&lt;c:url value="/resources/lib/ext-4.1.0/ext-all-dev.js" /&gt;" &gt;&lt;/script&gt;<br>
<br>
<br>
&lt;script type="text/javascript" src="&lt;c:url value="/resources/js/gridsample.js" /&gt;"&gt;&lt;/script&gt;<br>
<br>
<br>
<br>
<br>
<br>
<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&lt;h2&gt;Welcome User !!&lt;/h2&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>
<br>
<br>
<br>
<br>
Please tell me where am I doing mistake ?</span>

scottmartin
25 Jul 2012, 4:55 PM
It seems to work fine:
http://jsfiddle.net/aPxxg/

Scott.

scottmartin
25 Jul 2012, 4:57 PM
Here would be the code version:

Make sure to change your path as needed.

index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>f232712</title>

<link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../extjs4/examples/shared/example.css" />

<script type="text/javascript" src="../extjs4/ext-all-debug.js"></script>

<script type="text/javascript">
document.write('ExtJS: '+Ext.versions.extjs.version);
</script>

<!-- page specific -->
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>f232712</h1>
</body>
</html>


example.js


Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'book'},
{ name: 'author'}
],
data: [['Ext JS 4: First Look', 'Loiane Groner']]
}),
columns: [{
text: 'Book',
flex: 1,
sortable: false,
dataIndex: 'book'
},
{
text: 'Author',
width: 100,
sortable: true,
dataIndex: 'author'
}],
height: 80,
width: 300,
title: 'Simple Grid',
renderTo: Ext.getBody()
});


Scott.

jenis35@yahoo.co.in
30 Jul 2012, 10:16 AM
Yes, it works fine. The problem was with cache. Chrome was not taking new changes. It was loading old revision data only. I deleted cache manually and it worked. Thanks a lot for reply Scott.

Here would be the code version:

Make sure to change your path as needed.

index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>f232712</title>

<link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../extjs4/examples/shared/example.css" />

<script type="text/javascript" src="../extjs4/ext-all-debug.js"></script>

<script type="text/javascript">
document.write('ExtJS: '+Ext.versions.extjs.version);
</script>

<!-- page specific -->
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>f232712</h1>
</body>
</html>


example.js


Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'book'},
{ name: 'author'}
],
data: [['Ext JS 4: First Look', 'Loiane Groner']]
}),
columns: [{
text: 'Book',
flex: 1,
sortable: false,
dataIndex: 'book'
},
{
text: 'Author',
width: 100,
sortable: true,
dataIndex: 'author'
}],
height: 80,
width: 300,
title: 'Simple Grid',
renderTo: Ext.getBody()
});


Scott.