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

Here would be the code version:

Make sure to change your path as needed.

index.html

Code:

<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

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()
});

Scott.

**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)

Code:

<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:71019Uncaught TypeError: Cannot read property 'items' of undefined

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

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:

Code:

<%@ 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, 
 
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. 
 
<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>Uncaught TypeError: Cannot read property 'items' of undefined 
 
 
 
Here is my Grid panel (gridsample.js) code.

Code:

<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>

Here is how my html looks like:

Code:

<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>

Please tell me where am I doing mistake ?

**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

Code:

<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

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()
});

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.

Originally Posted by scottmartin

Here would be the code version:

Make sure to change your path as needed.

index.html

Code:

<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

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()
});

Scott.

Extjs 4 not working on Chrome and working on IE

Thread Tools

Search Thread

Display

Answered: Extjs 4 not working on Chrome and working on IE

Answered: Extjs 4 not working on Chrome and working on IE

Tags for this Thread