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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi