1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    2
    Vote Rating
    0
    timfitz99 is on a distinguished road

      0  

    Default GRID in Tutorial doesn't work...

    GRID in Tutorial doesn't work...


    I'm going through the tutorial (Introduction to EXT), and I can't get the GRID feature to work. First I typed it in by hand, and nothing happened, so I copied and pasted from the page. Still nothing.

    No error, just no grid. Any ideas?

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    That example does work. It is a cut-down version of the basic grid sample in the docs:

    http://extjs.com/deploy/ext/examples...rray-grid.html

    You should have that example in your local Ext directory, so I would start there and see what's different in your implementation. If you can't figure it out, post some code so others can help you find your issues.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    2
    Vote Rating
    0
    timfitz99 is on a distinguished road

      0  

    Default


    Thanks for the reply. I looked at the version in the examples directory, and it's WAY different.

    The code I copied directly from your tutorial follows. The html file to call it is your ExtStart.html (no changes). All of the other examples worked fine (I modified the paths to go to the proper place to find ext, etc). This one gives no results. I can use the examples version to learn, but I think you should check the tutorial as, to my eyes, it's inaccurate:

    Ext.onReady(
    function() {
    var myData = [
    [
    'Apple',29.89,0.24,0.81,'9/1 12:00am'],
    [
    'Ext',83.81,0.28,0.34,'9/12 12:00am'],
    [
    'Google',71.72,0.02,0.03,'10/1 12:00am'],
    [
    'Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
    [
    'Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
    ];

    var ds = new Ext.data.Store({
    proxy:
    new Ext.data.MemoryProxy(myData),
    reader:
    new Ext.data.ArrayReader({id: 0}, [
    {
    name: 'company'},
    {
    name: 'price', type: 'float'},
    {
    name: 'change', type: 'float'},
    {
    name: 'pctChange', type: 'float'},
    {
    name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ])
    });
    ds.load();


    var colModel = new Ext.grid.ColumnModel([
    {header:
    "Company", width: 120, sortable: true, dataIndex: 'company'},
    {header:
    "Price", width: 90, sortable: true, dataIndex: 'price'},
    {header:
    "Change", width: 90, sortable: true, dataIndex: 'change'},
    {header:
    "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
    {header:
    "Last Updated", width: 120, sortable: true,
    renderer: Ext.util.Format.dateRenderer(
    'm/d/Y'),
    dataIndex:
    'lastChange'}
    ]);

    var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});

    grid.render();
    grid.getSelectionModel().selectFirstRow();

    });

  4. #4
    Ext User
    Join Date
    Jul 2007
    Posts
    1
    Vote Rating
    0
    NFG is on a distinguished road

      0  

    Default


    Yep, I had the same issue.
    Following the tutorial with ExtStart.js to the letter. Everything worked right up until I tried the grid. Copy/pasted the code and reloaded but the grid did not display.

    I got no error, but no grid either.

    Looked back at the HTML file and found that I had correctly linked the .js files but not the .css files. The example won't work without them.

    Correctly linked it works perfectly

  5. #5
    Ext User
    Join Date
    Feb 2008
    Location
    Charlotte, NC, USA
    Posts
    4
    Vote Rating
    0
    braajkumar is on a distinguished road

      0  

    Default Grid not working

    Grid not working


    Hi there,

    The grid is not working still...

    Here is the code...

    ExtStart.js

    Ext.onReady(function() {
    var myData = [
    ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
    ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
    ['Google',71.72,0.02,0.03,'10/1 12:00am'],
    ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
    ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
    ];

    var myReader = new Ext.data.ArrayReader({}, [
    {name: 'company'},
    {name: 'price', type: 'float'},
    {name: 'change', type: 'float'},
    {name: 'pctChange', type: 'float'},
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]);

    var grid = new Ext.grid.GridPanel({
    store: new Ext.data.Store({
    data: myData,
    reader: myReader
    }),
    columns: [
    {header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
    {header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
    {header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
    {header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
    {header: 'Last Updated', width: 120, sortable: true,
    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
    dataIndex: 'lastChange'}
    ],
    viewConfig: {
    forceFit: true
    },
    renderTo: 'content',
    title: 'My First Grid',
    width: 500,
    frame: true
    });

    grid.getSelectionModel().selectFirstRow();
    });

    ExtStart.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>Introduction to Ext: Starter Page</title>

    <!-- Include YUI utilities and Ext: -->
    <script type="text/javascript" src="../adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="../adapter/yui/ext-yui-adapter.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="ExtStart.js"></script>

    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="../resources/css/xtheme-gray.css">
    <link rel="stylesheet" type="text/css" href="ExtStart.css">
    </head>
    <body>
    <h1>Introduction to Ext: Starter Page</h1>

    <p>This is the starter page that accompanies the Introduction to Ext tutorial located at <a href="http://www.extjs.com/tutorial/introduction-ext">http://www.extjs.com/tutorial/introduction-ext</a>.</p>

    <p>This page is intended to help you interactively explore some of the capabilities of the Ext library, so please make sure that your script references are correct. This page assumes by default that it is in a directory directly beneath the root Ext deployment directory. For example, if your Ext directory structure is located at "C:\code\Ext\v1.0\," then this file should be saved in a directory like "C:\code\Ext\v1.0\tutorial\." If you choose to locate this file somewhere else, then make sure you change the script references of this file as needed.</p>

    <p>If you have any questions or issues getting this tutorial to work correctly, please stop by the <a href="http://www.extjs.com/forums/">Ext Forums</a> and ask for help!</p>

    <div id="myDiv">This is a test div.</div>

    <input type="button" id="myButton" value="My Button" />

    <div id="grid-example" style="overflow: hidden; width: 535px; height: 125px;border:2px solid #999;margin:20px 50px;visibility:hidden;"></div>

    </body>
    </html>

    Error

    Line 15679, Char : 13, Error : 'null' is not null or not an object....

    I would appreciate some help on this issue... I am starting to explore grid and I am stuck....

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    The example works correctly. You are calling renderTo:'content' but I don't see a div with that id anywhere, maybe that's the issue.

  7. #7
    Ext User
    Join Date
    Feb 2008
    Posts
    1
    Vote Rating
    0
    santiagovalls is on a distinguished road

      0  

    Default Make Sure...

    Make Sure...


    Please, make sure to be using a version of Ext 1.x and not 2.x. Surely, the tutorial was written for the first version...

    Santi.

  8. #8
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
    Lexomatic is on a distinguished road

      0  

    Default a fix for 2.x users

    a fix for 2.x users


    I only just started on extjs yesterday, so it was a bit of fun trying to 'fix' the tutorial example as a challenge for learning ExtJS. If you are like me and are using 2.x rather than 1.x while reading the tutorial, the solution is to replace this line in ExtStart.js:

    var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});

    with the following line:

    var grid = new Ext.grid.GridPanel({el:"grid-example" , store: ds, cm: colModel, width:535});

    and you should get pretty much the desired result without having to change the HTML.

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Are you referring to the Intro to Ext 2.0 tutorial here? http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0

    The code in that example already uses a GridPanel properly. Or are you referring to something else? The original issue in this thread was referring to the 1.x version of the tutorial before it was upgraded to 2.0.

  10. #10
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
    Lexomatic is on a distinguished road

      0  

    Default


    oops, me bad. Yesterday when I downloaded this tutorial I somehow navigated to the 1.1 version of the tutorial without realizing there was a 2.0 version. Thanks for pointing me in the right direction.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar