1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    USA
    Posts
    29
    Answers
    2
    Vote Rating
    0
    jenis35@yahoo.co.in is on a distinguished road

      0  

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

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


    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.
    Last edited by jenis35@yahoo.co.in; 25 Jul 2012 at 11:53 AM. Reason: missed some part

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

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    USA
    Posts
    29
    Answers
    2
    Vote Rating
    0
    jenis35@yahoo.co.in is on a distinguished road

      0  

    Default


    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 ?

  5. #4
    Sencha User
    Join Date
    Jul 2012
    Location
    USA
    Posts
    29
    Answers
    2
    Vote Rating
    0
    jenis35@yahoo.co.in is on a distinguished road

      0  

    Default


    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>
    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>
    <br>
    <br>
    Here is how my html looks like:<br>
    <br>
    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>
    <br>
    <br>
    Please tell me where am I doing mistake ?</span>

  6. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    It seems to work fine:
    http://jsfiddle.net/aPxxg/

    Scott.

  7. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    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.
    Last edited by scottmartin; 25 Jul 2012 at 4:57 PM. Reason: Updated code

  8. #7
    Sencha User
    Join Date
    Jul 2012
    Location
    USA
    Posts
    29
    Answers
    2
    Vote Rating
    0
    jenis35@yahoo.co.in is on a distinguished road

      0  

    Default


    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.
    Quote Originally Posted by scottmartin View Post
    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.

Thread Participants: 1

Tags for this Thread