3

是否可以给出 extjs Editorgridpanel 从 php 获取数据的工作示例，我找到了一些示例，但它们对我不起作用

我试过了，这个，有什么问题

我的 html

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>JSON Grid Example</title> 
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />        
 <script type="text/javascript" src="adapter/ext/ext-base.js"></script>     
<script type="text/javascript" src="ext-all.js"></script>     
<link rel="stylesheet" type="text/css" href="examples/grid/grid-examples.css" />   
  <script type="text/javascript" src="extjson-grid.js"></script>    
   <h1>JSON Grid Example</h1>    
 <p>This example shows how to load a grid with JSON data.</p>      
 <div id="example-grid"></div>    
</head> 
</html>

我的js

Ext.onReady(function(){ 
      var proxy=new Ext.data.HttpProxy({url:'connectextjs.php'}); 
      var reader=new Ext.data.JsonReader(
       [{name: 'Employee_ID', mapping: 'Employee_ID'},                 
        {name: 'Department_ID'},                            
        {name: 'Name'},                  
       {name: 'Email'}]                

var store = new  Ext.data.Store({proxy:proxy,reader:reader}); 
         store.load(); 
 create the grid     var grid = new Ext.grid.GridPanel({ 
   store: store,         
   columns: [            
   {header: "Employee_ID", width: 90, dataIndex: 'Employee_ID', sortable: true},                 
   {header: "Department_ID", width: 90, dataIndex: 'Department_ID', sortable: true},             
   {header: "Name", width: 90, dataIndex: 'Name', sortable: true},             
{header: "Email", width: 200, dataIndex: 'Email', sortable: true}],
         renderTo:'example-grid',
         width:540,         height:200 
    }); 
});

我的PHP代码

<?php
// Make a MySQL Connection 
mysql_connect("localhost", "root", "password") or die(mysql_error()); 
mysql_select_db("test") or die(mysql_error());    
// Retrieve all the data from the "employee" table
   $result = mysql_query("SELECT * FROM employees") or die(mysql_error());
 $row = mysql_fetch_assoc($result); 
  // get data and store in a json array 
$query ="Select Employee_ID,Department_ID,Name,Email from Employees";
   while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) 
{     $myInventory[] = array(
     'Employee_ID' => $row['Employee_ID'], 
    'Department_ID' => $row['Department_ID'],     
'Name' => $row['Name'],     
'Email' => $row['Email'] ;   }

   $myData = $myInventory; 
echo json_encode($myData);
    ?>
4

2 回答 2

2

假设我们从你的 php 得到这个输出

示例 JSON 数据：

{
    "data": [
        {
            "Employee_ID": 1,
            "Department_ID": 1,
            "Name": "Abhishek Jaiswal",
            "Email": "ajaiswal@mail.com"
        },
        {
            "Employee_ID": 2,
            "Department_ID": 1,
            "Name": "John Doe",
            "Email": "jdoe@mail.com"
        },
        {
            "Employee_ID": 3,
            "Department_ID": 2,
            "Name": "Darick Pascua",
            "Email": "dpascua@mail.com"
        }
    ]
}

要生成该示例 JSON 数据，请使用以下代码片段：records.php

$employeeRecords["data"] = array(
    array(
        "Employee_ID"   => 1,
        "Department_ID" => 1,
        "Name"          => "Abhishek Jaiswal",
        "Email"         => "ajaiswal@mail.com"
    ),
    array(
        "Employee_ID"   => 2,
        "Department_ID" => 1,
        "Name"          => "John Doe",
        "Email"         => "jdoe@mail.com"
    ),
    array(
        "Employee_ID"   => 3,
        "Department_ID" => 2,
        "Name"          => "Darick Pascua",
        "Email"         => "dpascua@mail.com"
    ),
);

echo json_encode($employeeRecords);

您的 HTML，使用来自 sencha 的 cdn：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>http://stackoverflow.com/questions/17597001/simple-extjs-gridpanel-implementation-with-php</title>
    <script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-debug.js"></script>
    <script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-theme-neptune.js"></script>
    <link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css">
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

最后是您的 app.js，我为您添加了评论：

/**
 * Your store here
 */
var EmployeeRecords = Ext.create('Ext.data.Store', {
    autoLoad : true, //Autoload set it to true unless you want to load this manually
    fields:['Employee_ID', 'Department_ID', 'Name', 'Email'], //Set your model
    proxy: {
        type: 'ajax',
        url : 'records.php', //Actual data coming from the database
        reader: {
            type: 'json', //The type of the reader
            root: 'data'  //We set our root here
        }
    }
});

Ext.application({
    name: 'Simple Extjs Grid', //Application Name
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit', //We stretch our datagrid
            items: [
                {
                    xtype: 'gridpanel', //Our grid panel
                    title: 'JSON Sample Data',
                    store: EmployeeRecords,
                    columns: [
                        {
                            xtype: 'numbercolumn',
                            flex: 1,
                            dataIndex: 'Employee_ID',
                            header: 'Employee ID'
                        },
                        {
                            flex: 1,
                            dataIndex: 'Department_ID',
                            header: 'Department ID'
                        },
                        {
                            flex: 1,
                            dataIndex: 'Name',
                            header: 'Name'
                        },
                        {
                            flex: 1,
                            dataIndex: 'Email',
                            header: 'Email'
                        },
                    ],
                    listeners: { //After render event listener
                        afterrender: function() {
                            alert("Datagrid FTW!");
                        }
                    }
                }
            ]
        });
    }
});
于 2013-09-04T11:59:58.563 回答
1

这是 SQL：

CREATE TABLE IF NOT EXISTS `employees` (
  `Employee_ID` int(11) NOT NULL,
  `Department_ID` int(11) NOT NULL,
  `Name` varchar(50) NOT NULL,
  `Email` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `employees` (`Employee_ID`, `Department_ID`, `Name`, `Email`) VALUES
(1, 2, 'Bagio', 'bagio@gmail.com'),
(2, 2, 'Sinchan', 'sinchan@gmail.com');

这是 PHP 文件 (Employee.php)：

<?php

// Make a MySQL Connection 
$mysqli = new mysqli("localhost", "root", "", "extjs-test");
if (mysqli_connect_errno()) {
    printf("Connection failed: %s\n", mysqli_connect_error());
    exit();
}

// Retrieve all the data from the "employee" table
$SQL = "SELECT * FROM employees";
if (($result = $mysqli->query($SQL)) === false) {
    printf("Invalid query: %s\nWhole query: %s\n", $mysqli->error, $SQL);
    exit();
}
$counter = 0;
while ($obj = $result->fetch_object()) {
    $myInventory["employees"][$counter] = array(
        'Employee_ID' => $obj->Employee_ID,
        'Department_ID' => $obj->Department_ID,
        'Name' => $obj->Name,
        'Email' => $obj->Email);
    $counter++;
}

$myData = $myInventory;
echo json_encode($myData);
?>

这是 HTML 文件：

<html> 
    <head> 
        <title>JSON Grid Example</title> 
        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />        
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>     
        <script type="text/javascript" src="js/extjs/ext-all-debug.js"></script>     
        <script type="text/javascript">
            Ext.onReady(function () {
                var mystore = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'Employee.php'}),
                    reader: new Ext.data.JsonReader({
                        root: 'employees',
                        fields: [{name: 'Employee_ID'},
                            {name: 'Department_ID'},
                            {name: 'Name'},
                            {name: 'Email'}]
                    })
                });
                //create the grid     
                var grid = new Ext.grid.GridPanel({
                    store: mystore,
                    title: 'MyGrid',
                    columns: [{
                            id: 'Employee_ID',
                            header: 'Employee ID',
                            width: 200,
                            sortable: true,
                            dataIndex: 'Employee_ID'
                        },
                        {
                            id: 'Department_ID',
                            header: 'Department ID',
                            width: 200,
                            sortable: true,
                            dataIndex: 'Department_ID'
                        },
                        {
                            header: 'Name',
                            width: 200,
                            sortable: true,
                            dataIndex: 'Name'
                        },
                        {
                            header: 'Email',
                            width: 200,
                            sortable: true,
                            dataIndex: 'Email'
                        }],
                    renderTo: 'example-grid',
                    width: 540,
                    height: 200,
                    autoHeight: true
                });
                mystore.load();
            });
        </script>    
    </head> 
    <body>  
        <div id="example-grid"></div>    
    </body>
</html>

试试看。发生错误是因为有许多未闭合的数组。并且 MySQL Select Query 给出不推荐使用的错误，因此如果您将 apache 警告设置为 ON，网格将不会呈现，因为它包含来自不推荐使用的 mysql 错误的附加警告 html。使用 MySQLI 而不是弃用的 mysql。

于 2014-11-27T04:58:35.177 回答