个人中心
gpt4 book ai didi

php - 使用 php 的简单 Extjs gridpanel 实现

转载 作者：搜寻专家 更新时间：2023-10-31 20:43:15 24 4
gpt4 key购买 nike

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

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

我的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);
    ?>

最佳答案

假设我们有来自您的 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 数据，请使用以下代码片段:记录.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!");
                        }
                    }
                }
            ]
        });
    }
});

关于php - 使用 php 的简单 Extjs gridpanel 实现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17597001/

24 4 0
文章推荐： php - 在两个不同的网络浏览器之间共享 session
文章推荐： php - 如何使用 Imagick 将图像的 DPI 从 72DPI 更改为 300DPI
文章推荐： php - Laravel:belongsTo() 关系假定一对多关系而不是一对一
文章推荐： php - 遍历传递给 Twig 模板的所有参数
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com