Results 1 to 6 of 6

Thread: I am using an example having problems displaying data. =(

  1. #1

    Question I am using an example having problems displaying data. =(

    My problem is I can't display the rows in the EXTJS table. However, I can send the records to the MySQL database.

    What is going on!!?

    Using EXTJS 3.2.0 / 3.2.1 have same results.

    simplegrid.js
    Code:
    Ext.onReady(function(){
        
    Ext.QuickTips.init();     
         
        var Checkbox = new Ext.grid.CheckboxSelectionModel();     
        
        var PhoneDirectoryDataStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
                url: 'simplegrid.php', 
                    method: 'POST'
                }),            
        reader: new Ext.data.JsonReader({
        root: 'results',
        totalProperty: 'total'
           
          },
           [ 
            {name: 'id', type: 'int'},
            {name: 'name', type: 'string'},
            {name: 'address', type: 'string'},
            {name: 'email', type: 'string'}
            
          ]),
          sortInfo:{field: 'id', direction: "ASC"}
        });
        
        PhoneDirectoryDataStore.load({params:{start:0,limit:900}});
      
      
      var SimpleColumnModel = new Ext.grid.ColumnModel(
        [
        Checkbox,
        {
            header: 'Id',
            readOnly: true,
            dataIndex: 'id',
            width: 40,
            hidden: false
            
          },{
            header: 'Name',
            dataIndex: 'name',
            width: 130
            
          },{
            header: 'Address',
            dataIndex: 'address',
            width: 200
            
          },{
            header: 'Email',
            dataIndex: 'email',
            vtype:'email',
            width: 180
            }]
        );
        SimpleColumnModel.defaultSortable= true;
        
        var simpleAdd = new Ext.FormPanel({
            url:'simplegrid.php?act=add',
            baseCls: 'x-plain',
            labelWidth: 90,
            defaultType: 'textfield',
            defaults: {
    
            allowBlank: true
    
            },
            items: [{
    
            xtype: 'textfield',
            fieldLabel: 'Name',
            anchor: '100%',
            name: 'name'
            },
            {
            xtype:'textarea',
            fieldLabel: 'Address',
            anchor: '100%',
            name: 'address'
            },
            {
    
            fieldLabel: 'Email',
            anchor: '100%',
            name: 'email',
            xtype:'textfield',
            vtype:'email'
    
            }],
            buttons: [{
            text: 'Save',
            handler: function(){
                if(simpleAdd.getForm().isValid()){
                simpleAdd.getForm().submit({
                waitMsg: 'Uploading your data...',
                success: function(simpleAdd, o){
    
                Ext.MessageBox.alert('Message','Add file Success..');
                PhoneDirectoryDataStore.reload();
                SimpleWindow.hide();
    
            },
                failure: function(simpleAdd, o){
                Ext.MessageBox.alert('Warning','Add file Failure..');
            }
            });
            }
            }
            },{
            text: 'Reset',
            handler: function(){
                simpleAdd.getForm().reset();
            }
            }]
        });
    
        var SimpleWindow= new Ext.Window({
            title: 'Add new record',
            width: 340,
            height:250,        
            layout:'card',
            plain:true,
            bodyStyle:'padding:3px;',
            buttonAlign:'center',
            closeAction:'hide',
            modal: true,
            animCollapse:true,
            activeItem:0,
            items: [simpleAdd
            ]
    
        });
    
        function displayFormWindow(){
            if(!SimpleWindow.isVisible()){
            SimpleWindow.show();
            } else {
            SimpleWindow.toFront();
        }
        }
    
        var formEdit = new Ext.form.FormPanel({
            url:'simplegrid.php?act=edit',
            baseCls: 'x-plain',
            labelWidth: 90,
            defaultType: 'textfield',
            reader: new Ext.data.JsonReader ({
                root: 'results',
                totalProperty: 'total',
                id: 'id',
                fields: [
                    'id','name','address','email'
                ]
            }),
            items: [
                new Ext.form.Hidden ({
                    name: 'id'                    
                }),
                {
                    fieldLabel: 'Name',
                    name: 'name',
                    anchor:'100%'
                },
                {
                    fieldLabel: 'Address',
                    name: 'address',
                    xtype:'textarea',
    //                flex:3,
                   width:220
                },
                {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    width:220
                }
            ],
            
            buttons: [{
                text: 'SAVE',
                handler:function(){
                    formEdit.getForm().submit({
                        waitMsg:'Storing Data...',
                        failure: function(form, action) {
                            Ext.MessageBox.alert('Error Message', 'Data Failure....');
                            formEdit.getForm().reset();
                        },
                        success: function(form, action) {
                            Ext.MessageBox.alert('Confirm', 'Success to storing data...');
                            PhoneDirectoryDataStore.load({params:{start:0,limit:6}});
                            window.hide();
                            formEdit.getForm().reset();
                        }
                    })
                }
            },{
                text: 'Cancel',
                handler: function(){
                    window.hide();
                }
            }]
        });
        var window = new Ext.Window({
            title: 'Edit Record',
            width: 340,
            height:250,        
            layout:'card',
            plain:true,
            bodyStyle:'padding:3px;',
            buttonAlign:'center',
            closeAction:'hide',
            modal: true,
            animCollapse:true,
            activeItem:0,
            items: [
                formEdit
            ]
        });
        
        function del(btn)
        {
            if(btn == 'yes')
            {
                var m = SimpleListingEditorGrid.getSelectionModel().getSelections();
                var store = SimpleListingEditorGrid.getStore();
                
                for(var i=0; i< m.length; i++){
                    var rec = m[i];
                    if(rec){
                        PhoneDirectoryDataStore.load({
                            params:{del:rec.get("id"),start:0,limit:6},
                            callback: function(){
                                
                            }
                        });store.remove(rec);
                    }
                }
                
            }
        }      
        var SimpleListingEditorGrid =  new Ext.grid.GridPanel({
            title: 'Phone',
            store: PhoneDirectoryDataStore,
            cm: SimpleColumnModel,
            sm: Checkbox,     
            tbar:[
                
                {
                text: 'Add',
                iconCls:'add',
                handler: displayFormWindow
                },'-',
    
                {
                
                text:'Edit',
                iconCls:'edit-grid',
                
                handler: function()
                {
                    var m = SimpleListingEditorGrid.getSelectionModel().getSelections();
                    if(m.length > 0)
                    {                
                        formEdit.getForm().load({url:'simplegrid.php?act=get&id='+ m[0].get('id'), waitMsg:'Loading'});
                        window.show();             
                    }
                    else
                    {
                        Ext.MessageBox.alert('Message', 'please... Choose one of file...!');
                    }
                
                }
             
             },'-',
            {
            text:'Delete',
                iconCls:'delete',
                
                handler: function()
                {
                    var m = SimpleListingEditorGrid.getSelectionModel().getSelections();
                    if(m.length > 0)
                    {                
                        Ext.MessageBox.confirm('Message', 'Are you sure to delete this file?' , del);         
                    }
                    else
                    {
                        Ext.MessageBox.alert('Message', 'please... Choose one of file...!');
                    }
                
                }
             
             }
            
            
        
             
           ],
            viewConfig: {
                forceFit:true
            },
            
            frame:true,
            //collapsible: true,
            //animCollapse: true,
            width:750,
            height:650,
          
            bbar: new Ext.PagingToolbar({
                pageSize: 6,
                store: PhoneDirectoryDataStore,
                displayInfo: true,
                displayMsg: 'Displaying data {0} - {1} of {2}',
                emptyMsg: "No data to display"
            })
          
           });
         
         SimpleListingEditorGrid.render('form');
     
      });
    simplegrid.php
    Code:
    <?php
    
    $connect  = mysql_connect('localhost','root1','root1');
    $db = mysql_select_db('phonedirectorydb',$connect);
    
    if($_GET["act"] == "get"){
        $sql = "select * from phonedirectorytable where id = '".$_GET["id"]."'";    
        $result = mysql_query($sql);    
        $rows = mysql_num_rows($result);
        $arr = array();
        while($obj = mysql_fetch_object($result))  
        {  
            $arr[] = $obj;  
        }
            $jsonresult = json_encode($arr);
            echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
    }
    else if($_GET["act"] == "add"){
    $sql = "INSERT INTO phonedirectorytable  VALUES (NULL,'".$_POST["name"]."', '".$_POST["address"]."', '".$_POST["email"]."')";
    mysql_query($sql) or die(mysql_error());
    echo "{success:true}";
    }
    
    else if($_GET["act"] == "edit"){
        $sql = "update phonedirectorytable set name = '".$_POST["name"]."',address='".$_POST["address"]."', email='".$_POST["email"]."' where id='".$_POST["id"]."'";    
        mysql_query($sql) or die(mysql_error());    
        echo "{success:true}";
    }
    
    else if(isset($_POST["del"])){
            $sql = "delete from phonedirectorytable where id ='".$_POST["del"]."'";    
            mysql_query($sql) or die(mysql_error());
            mysql_close();
        }
    
    else
    {     $query = "SELECT * FROM phonedirectorytable";     
          $result = mysql_query($query);
          $nbrows = mysql_num_rows($result);
          $start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
          $end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
          $limit = $query." limit ".$start.",".$end;    
    
          $result = mysql_query($limit);      
        
        if($nbrows>0)
        {
            while($rec = mysql_fetch_array($result))    {            
                      
              $arr[] = $rec;
            }
            $jsonresult = json_encode($arr);
            echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
        } 
        else 
        {
        echo '({"total":"0", "results":""})';
        }
    
    }
        
    
    
    ?>
    The SQL File:
    Code:
    -- phpMyAdmin SQL Dump
    -- version 3.2.0.1
    -- http://www.phpmyadmin.net
    --
    -- Host: localhost
    -- Generation Time: May 11, 2010 at 01:00 AM
    -- Server version: 5.1.36
    -- PHP Version: 5.3.0
    
    SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
    
    --
    -- Database: `phonedirectorydb`
    --
    
    -- --------------------------------------------------------
    
    --
    -- Table structure for table `phonedirectorytable`
    --
    
    CREATE TABLE IF NOT EXISTS `phonedirectorytable` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `name` varchar(50) NOT NULL,
      `address` varchar(50) NOT NULL,
      `email` varchar(50) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;
    
    --
    -- Dumping data for table `phonedirectorytable`
    --
    
    INSERT INTO `phonedirectorytable` (`id`, `name`, `address`, `email`) VALUES
    (12, '', '', '[email protected]'),
    (13, 'hi', 'why cant i add this', '[email protected]');
    Index.html file
    Code:
    <html>
    <head>
        <title>Simple form</title>        
        <link rel="stylesheet" type="text/css" href="ext-3.2.0/resources/css/ext-all.css" />    
        <script type="text/javascript" src="ext-3.2.0/adapter/ext/ext-base.js"></script>    
        <script type="text/javascript" src="ext-3.2.0/ext-all.js"></script>    
        <script type="text/javascript" src="simplegrid.js"></script>
        
        <style type="text/css">
          .add {
                background-image:url(add.png) !important;
            }
         .delete {
                background-image:url(delete.png) !important;
            }
        .edit-grid{
                background-image:url(edit.png) !important;
        }
        </style>
    </head>
    <body bgcolor="#D9E7F4">
    <div style="height:0px"></div>
    <table align="center">
    <tr><td>
    <div id="form">
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Ext User
    Join Date
    May 2010
    Posts
    3

    Default

    How does the JSON data object returned from the server look like? Also I didnt see a success:true property in your php code.

  3. #3

    Default

    I am not sure how it returns, I have included the code so it will be easier to work with in a zip file.
    I am so confused now.
    Attached Files Attached Files

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638

    Default

    Posting all your code won't help. Have you debugged through your code? Have you narrowed down where your code is failing? What sort of debugging techniques are you using to figure this out?

  5. #5
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    Use FireFox+FireBug and examine the JSON response from simplegrid.php when 'act'='get'. Is this JSON valid? Does it match what your JSON reader expects? To discover the problem... go one step at time, don't test simplegrid.js with everything else in it - get the store loading first, get the grid displaying the data, etc., etc.,

  6. #6

    Default

    Ok I'll keep trying.

Posting Permissions

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