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

      0  

    Default My GridPanel is not display JSON Data. Help?

    My GridPanel is not display JSON Data. Help?


    I'm pretty new to EXTJS and am trying to get a GridPanel to load data remotely from a PHP script (which will eventually hit a database).

    This is my javascript file:

    Code:
    Ext.onReady(function() {                                                                                                    
                                                                                              
        var ds = new Ext.data.Store({                                                                                           
                proxy: new Ext.data.HttpProxy({ url: '/c.php' }),                                                               
                reader: new Ext.data.JsonReader({                                                                               
                        root: 'customers',                                                                                      
                        totalProperty: 'total',                                                                                 
                    },                                                                                                          
                    [                                                                                                           
                        { name: 'name', type: 'string', mapping: 'name'  },                                                     
                        { name: 'number', type: 'string', mapping: 'number' },                                                  
                        { name: 'address', type: 'string', mapping: 'address' }                                                 
                    ]                                                                                                           
                )                                                                                                               
            });                                                                                                                 
                                                                                                                                
        // create the Grid                                                                                                      
        var grid = new Ext.grid.GridPanel({                                                                                     
                ds: ds,                                                                                                         
                cm: new Ext.grid.ColumnModel([                                                                                  
                    { header: "Name", width: 100, sortable: true, dataIndex: 'name' },                                          
                    { header: "Number", width: 75, sortable: true, dataIndex: 'number' },                                       
                    { header: "Address", width: 75, sortable: true, dataIndex: 'address' }                                      
                ]),                                                                                                             
                stripeRows: true                                                                                                
            });                                                                                                                 
                                                                                                                                
        ds.load();                                                                                                              
                                                                                                                                
        grid.render('grid')                                                                                                     
    })
    And this is the backing PHP code:

    PHP Code:
    <?php                                                                                                                       
                                                                                                                                
    $a 
    = array(                                                                                                                 
        
    'total' => 2,                                                                                                           
        
    'customers' => array(                                                                                                   
            array(                                                                                                              
                
    'name' => 'Foo',                                                                                                
                
    'address' => '123 Fake St',                                                                                     
                
    'number' => '1234',                                                                                             
            ),                                                                                                                  
            array(                                                                                                              
                
    'name' => 'Bar',                                                                                                
                
    'address' => '234 Fake St',                                                                                     
                
    'number' => '5678',                                                                                             
            ),                                                                                                                  
        ),                                                                                                                      
    );                                                                                                                          
                                                                                                                                
    header('Content-type: text/x-json');                                                                                        
                                                                                                                                
    print 
    json_encode($a);                                                                                                      
                                                                                                                                
    ?>
    Which produces output of:

    Code:
    {"total":2,"customers":[{"name":"Foo","address":"123 Fake St","number":"1234"},{"name":"Bar","address":"234 Fake St","number":"5678"}]}
    I'm sure I'm missing something simple, but could you lend a hand?

    The Grid displays fine (the columns show up) but no data is inserted into the table.

    I've verified with Firebug that it is indeed requesting /c.php and getting the data, and it is loading it into the data Store. (I traced beginning with the "return this.readRecords(o)" line in JsonReader::read()), and it looks like everything is loading.

    Help? :-)

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

      0  

    Default


    RTFM eh.

    I found the info in a thread from a little while ago.

    My data and grid were fine.

    Solution?

    autoHeight: true on the grid.

    Ugh. 3 hours of debugging. What a PITA.

  3. #3
    xmatt1
    Guest

    Lightbulb hehe i had a similiar problem...

    hehe i had a similiar problem...


    Try this..

    first we need the data record create like this

    PHP Code:
    var myRecord Ext.data.Record.create([{name:"my_field_from_database"type:'string'}]); 
    we dont need add anymore "mapping" hehe =) just have to be names equals from PHP MySQL

    and now we need the greate JSON READER like this

    PHP Code:
    var myReader = new Ext.data.JsonReader({
     
    root:'results',
     
    totalProperty:'total',
     
    id:'myId'
    },myRecord); 
    and now we need the type of STORE, on this case im using the GrupingStore like this

    PHP Code:
    var myDataStore = new Ext.data.GroupingStore({
     
    proxy:new Ext.data.HttpProxy({url:'myJSON.php'}),
     
    baseParams:{task:"getMyClients"},
     
    reader:myReader,
     
    sortInfo:{field:'myField',direction:'ASC'},
     
    remoteSort:true,
     
    groupField:'myField'// this is very COOL AMAZING its simple fantastic
    }); 
    and now we need a column model like this

    PHP Code:
    var myColModel = new Ext.grid.columnModel([{dataIndex:'myField'header:'My Nice Field'align:'left'sortable:truewidth:100}]); 
    If u re using a grid_filter plugin u will do like this

    PHP Code:
    var myFilters = new Ext.ux.grid.GridFilters({
     
    local:false // hehe i will show u in PHP how to do it..
     
    filters : [{dataIndex:'myField'type:'string'}] // types date, numeric, boolean, string
    }); 
    if u re using a Andrie.pPageSize plugin u will do like this

    PHP Code:
    var myPaging = new Ext.ux.Andrie.pPageSize({beforeText:'Show',afterText:results per page'}); 
    and then the finally GRID PANEL so we do like this

    PHP Code:
    myGrid = new Ext.grid.GridPanel({
     
    id:'my-grid',
     
    autoSizeColumns:true,
     
    colModel:myColModel,
     
    frame:false,
     
    loadMask:true,
     
    plugins:myFilters,
     
    selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
     
    store:myDataStore,
     
    bbar: new Ext.PagingToolbar({
      
    plugins:[myPagingmyFilters],
      
    pageSize:15,
      
    store:myDataStore,
      
    displayInfo:true,
      
    displayMsg:"Show results of {0} - {1} / {2}"
      
    emptyMsg:"No results found"
     
    }),
    view: new Ext.grid.GroupingView({
     
    forceFit:true,
     
    groupText:'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    })
    });
     
    myDataStore.load({params:{start:0,limit:15}}); 
    Thats All..

    Now the PHP server side

    myJSON.php

    so we will need 3 functions

    1. function to Set Filters Post Values
    2. function to Set Filter Comparison
    3. function to Find All data in MySQL

    PHP Code:
    function set_filters_post_values(){
     
    $this->filters = isset($_POST['filter']) ? $_POST['filter'] : $_GET['filter'];
     
    $this->where = array();

     if(
    count($this->filters) > 0){
      
    $i=0;
      while(isset(
    $this->filters[$i]) && isset($this->filters[$i]['field'])){
        
    $this->filter $this->filters[$i];
        
    $this->field $this->filter['field'];
        
    $this->type $this->filter['data']['type'];
        
    $this->value $this->filter['data']['value'];
        switch(
    $this->type){
          case 
    "string":
             
    $this->where[] = " AND ".$this->field." LIKE '%".$this->value."%' ";
           break;                    
           case 
    "numeric":
             
    $this->comparison $this->set_filter_comparison($this->filter['data'][comparison]);
             
    $this->where[] = " AND ".$this->field." ".$this->comparsion." '".$this->value."'";
          break;
          case 
    "date":
             
    $this->comparison $this->set_filter_comparison($this->filter['data'][comparison]);
             
    $this->where[] = " AND ".$this->field." ".$this->comparsion." '".$this->value."'";
          break;
         case 
    "boolean":
              
    $this->where[] = " AND ".$this->field." = ".$this->value// value = 0 or value = 1
         
    break;
         case 
    "null":
              
    $this->where[] = $this->value $this->field " IS NULL" " IS NOT NULL";
         break;
        }
        
    $i++;
      }
     }
    }

    function 
    set_filter_comparison($comparison){
     
    $comparisonstrtolower($comparison);
     switch(
    $comparison){
       case 
    "gt":
           
    $return ">";
       break;
       case 
    "lt":
           
    $return "<";
       break;
       case 
    "gte":
            
    $return ">=";
       break;
       case 
    "lte":
            
    $return "<=";
       break;
       case 
    "eq":
            
    $return "=";
       break;
       case 
    "neq":
             
    $return "!=";
       break;
       case 
    "like":
             
    $return "LIKE";
       break;
       case 
    "in":
             
    $return "IN";
       break;
       case 
    "notin":
             
    $return "NOT IN";
       break;
    }
    return 
    $return;
    }

    function 
    find_all(){
        
      
    $this->limit = isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit'];
      
    $this->start = isset($_POST['start'])    ? $_POST['start'] : $_GET['start'];
      
    $this->dir = isset($_POST['dir']) ? $_POST['dir'] : $_GET['dir'];
      
    $this->sort = isset($_POST['sort']) ? $_POST['sort'] : $_GET['sort'];
                        
       
    $this->set_filters_post_values();
            
        
    $sql "SELECT    * FROM myTable WHERE 1 ";
                    
        if(!empty(
    $this->where)){
           if(
    count($this->where)>0){
        for(
    $i=0;$i<count($this->where);$i++)
            
    $sql .= $this->where[$i];
           }
        }

        
    $query_count $this->db->query($sql);
        
    $count $this->db->num_rows($query_count);

        
    $sql .= " ORDER BY ".$this->sort." ".$this->dir." LIMIT ".$this->start.",".$this->limit;

        
    $query  $this->db->query($sql);
            
        while(
    $obj $this->db->fetch_object($query))
             
    $list[] = $obj;

            
         
    $data json_encode($list);
         
    $cb = isset($_GET['callback']) ? $_GET['callback'] : '';
         
         print 
    $cb.'({"total":"'.$count.'","results":'.$data.'})';    

    NOTE : i have a DB(MySQL functions) class if u dont u have to do it in place of $this->db->query u do it mysql_query ....
    $this->db->fetch_object u have to use mysql_fetch_objetc ...

  4. #4
    Ext User
    Join Date
    Mar 2008
    Posts
    1
    Vote Rating
    0
    CtrlBrk is on a distinguished road

      0  

    Thumbs up


    Quote Originally Posted by ClemsonJeeper View Post
    RTFM eh.
    autoHeight: true on the grid.
    omg... thanks

Thread Participants: 1