Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: [xml-grid] Problem to display grid content

  1. #1

    Default [xml-grid] Problem to display grid content

    Hi,

    I'm a very fresh extjs's user. I tried to display a grid based on a xml document.

    i'm following the xml-grid exemple containing in ext-1.1 release but the content of my grid is never displayed.

    i've looked around on this forums and there's a lot of xml-grid's problem and none of them are like mine.

    here is my jsp page:
    PHP Code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"%>
    <%
       
    response.setContentType("text/html; charset=ISO-8859-1");
    %>
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <
    title>XML Grid Example</title>
    <
    link rel="stylesheet" type="text/css" href="/web/js/ext-1.1/resources/css/ext-all.css" />
    <
    script language="javascript" type="text/javascript" src="/web/js/ext-1.1/adapter/ext/ext-base.js"></script>
    <script language="javascript" type="text/javascript" src="/web/js/ext-1.1/ext-all.js"></script>
    <script language="javascript" type="text/javascript" src="/web/js/ext-1.1/examples/grid/xml-grid.js"></script>
    <link rel="stylesheet" type="text/css" href="/web/js/ext-1.1/examples/grid/grid-examples.css" />
    </head>
    <body>
    <div id="example-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;">
    </div>
    </body>
    </html> 
    and here is my xml-grid.js code:
    PHP Code:
    /*
     * Ext JS Library 1.1
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * [email protected]
     * 
     * http://www.extjs.com/license
     */

    Ext.onReady(function(){

        var 
    RecordDef Ext.data.Record.create([
                      {
    name'id'mapping'id'},
                      {
    name'nom'mapping'nom'},     
                      {
    name'prenom'mapping'prenom'}
                       ]);


        
    // create the Data Store
        
    var ds = new Ext.data.Store({
            
    reader: new Ext.data.XmlReader({
                   
    record'Item'}, RecordDef)
        });

       
    ds.loadData('<Items><Item><id>1</id><nom>kaka</nom><prenom>boudin</prenom></Item></Items>'true);

        var 
    cm = new Ext.grid.ColumnModel([
                {
    header'id'dataIndex'id'},
                    {
    header'nom'dataIndex'nom'},
            {
    header'prenom'dataIndex'prenom'}
        ]);
        
    //cm.defaultSortable = true;

        // create the grid
        
    var grid = new Ext.grid.Grid('example-grid', {
            
    dsds,
            
    cmcm
        
    });
        
        
    grid.render();
        
    //Ext.MessageBox.show({msg: grid.getDataSource().getTotalCount() });
    }); 
    i'm on this problem for a few days already so i really need sb's advice.

    Thanks for your help

  2. #2

    Default

    It appears you have not added the ds.load().
    Try to do the ds.load after the grid.render.

  3. #3

    Default

    hi Tony,

    I do not use a proxy in my Ext.data.Store object, so instead of calling ds.load, i'm using a ds.loadData
    ds.loadData('<Items><Item><id>1</id><nom>kaka</nom><prenom>boudin</prenom></Item></Items>', true);

  4. #4

    Default

    Try using a layout to display your grid.

    Code:
    var layout - new Ext.BorderLayout('example-grid-panel', {
                      center: {
                          margins:{left:3, top:3, right:3,bottom:3}
                      }
    });
    In your PHP add
    PHP Code:
    <div id="example-grid-panel" style="width:100%;"
       <
    div id="example-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;"></div>
    </
    div

  5. #5

    Default

    sorry but nothing changes with the layout

  6. #6

    Default

    Did you add the grid to the layout ?

    Code:
    grid.render();
    dataStore.loadData();
    
    layout.beginUpdate();
    layout.add('center', grid);
    layout.endUpdate();

  7. #7

    Default

    ok ! i also thought that st's missing !

    but i got an error when adding the grid to the layout :

    _11.getId is not a function
    BasicLayoutRegion(Object container=Object id=example-grid dataSource=Object)ext-all.js (line 222)
    LayoutRegion(Object container=Object id=example-grid dataSource=Object)ext-all.js (line 224)
    BorderLayout("center", Object container=Object id=example-grid dataSource=Object)ext-all.js (line 220)
    (no name)()xml-grid.js (line 67)
    Observable()ext-all.js (line 16)
    EventManager()ext-all.js (line 18)
    [Break on this error] Ext.BasicLayoutRegion=function(_1,_2,_3,_4){this.mgr=_1;this.position=_3;this.ev...

  8. #8

    Default

    Did the grid render ? Mine seems to work ok, but I do get a javascript error:
    panel.getId is not a function... in ext-all-debug.js 22839

  9. #9

    Default

    i just got the grid's header but no rows are rendered

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    You can't add a Grid to a Layout. You have to wrap it in a GridPanel and add that to the Layout.

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •