翻译：如何实现 - CodeIgniter 与 ExtJs Grid.

2008-04-18 09:24:07 / 个人分类：后台技术->PHP Kohada ASP

翻译：老谭（tanqimin）

关于
如何实现 - CodeIgniter 与 ExtJs Grid.
首先，我不是CodeIgniter 与 ExtJs Grid 的专家，但我有足够的知识去运用他们。如果您对以下的练习有任何的疑问，请你反馈合理化的建议。
现在，我假定你有足够的CodeIgniter使用经验，我只把例子中的函数贴出来，而不去解析什么是控制器、视图、模型。如果你使用CodeIgniter进行开发，这些概念是你应该知道的。
更多关于PHP+MySQL+ExtJs 如何实现，请点击：http://extjs.com/forum/showthread.php?t=18435
什么是 "如何实现 - CodeIgniter 和 ExtJs Grid."? 这是一个如何在使用MySQL的CodeIgniter框架中使用ExtJs Grid的实例

CI Model
有以下的模型: 对于我建立的模型，我只是从MySQL中获取我需要的数据用于显示在我的Grid中，如下所示：

复制内容到剪贴板

PHP 代码:

function getBoards()
{
    $this->db->select('WOrder, PartNumber, WOPartQuantity, PartPriority, 
                        WODateIn, WODateOut, PartState, PartStatus, PartLocation');
    $this->db->from('WorkOrder');
        $this->db->join('PartNumber', 'WorkOrder.PartNumberID = PartNumber.PartNumberID');
        $this->db->join('PartState', 'PartState.PartStateID = WorkOrder.PartStateID');
        $this->db->join('PartStatus', 'PartStatus.PartStatusID = WorkOrder.PartStatusID');
        $this->db->join('PartPriority', 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID');
        $this->db->join('PartLocation', 'PartLocation.PartLocationID = WorkOrder.PartLocationID');
    $this->db->limit(15);

    $lBoards = $this->db->get();
    return $lBoards;
}
 

上面的代码中，有3个事件发生：
1.-我们使用”db->select()”请求MySQL获取的字段，使用”db->from()”指定从数据表”WorkOrder”中获取数据，使用”db->join()”连接其它表，这是从我的model文件中复制并粘贴出来的，你可以忽略”db->join()”使查询变得更加简单，但你必须确定你查询的字段必须存在与数据表中
2.- 我们使用"db->get()"指派MySQL的查询到变量$lBoards 中
3.- 最后，返回含有查询结果的变量 "$lBoards".

CI Controller
同样的，有以下的控制器: 在我的控制器中，我只是处理从Model中返回的数据，在这里是"$lBoards".

复制内容到剪贴板

PHP 代码:

function index()
{
    $this->load->view('main-grid');
}

function js_listBoards()
{
    $Boards = $this->Boards->getBoards();

    foreach($Boards->result() as $row)
    {
        $item = Array("WOrder" => $row->WOrder, 
                      "PartNumber" => $row->PartNumber,
                      "WOPartQuantity" => $row->WOPartQuantity, 
                      "PartPriority" => $row->PartPriority,
                      "WODateIn" => $row->WODateIn,
                      "WODateOut" => $row->WODateOut,
                      "PartState" => $row->PartState,
                      "Partstatus" => $row->PartStatus,
                      "PartLocation" => $row->PartLocation);

        $itemList[] = $item;
    }

    $rows = $Boards->num_rows();
    $data = json_encode($itemList);

    echo '({"total":"' . $rows . '","results":' . $data . '})';
}
 

有几点需要注意:
1.- 留意：控制器中的函数"js_listBoards"没有调用视图，只从主函数调用视图，没别的地方。
2.- 现在，从Model中获取数据到Controller，我们调用方法返回Model中"$lBoards" 的值，在本地声明一个本地变量"$lBoards"
3.- 我们要处理这些行，它们不是单个的值而是二位数组中的一个元素数组。可以使用一个"foreach"获取每一行，并创建"$item" 数组作为二维数组中的第一行的值。

提示: 我建议在这里使用与数据库相同的字段名，这样能够保留你操作的痕迹以及更快的检查出错误 (此外，您可以在以后的时候定义Grid的表头).

像只有一个数组"$item"并不足够从行中获取整套数据，所以我们把"$item"数组存放在另一个数组"$itemList"中，这将产生一个包含很多数组的数组，直到把数据获取完。
现在，我们有 $rows 和 $data 变量：
$rows: 统计你一共有多少行数据
注意: 你必须获取$row。没有它将不能获取Grid共有多少行数据
$data: 将包含所有通过"foreach"循环获得的数据。你必须使用"json_encode($itemList)"为其重新编码，否则他将在Grid中使用 json_reader 创建data store 时无法工作。json_encode 提供样式如下:
({"total":"1","results":[{"WOrder":"97350","PartNumber":"H35146AAD","WOPartQuantity":"3","PartPriority":"Medium","WODateIn":"2007-02-13","WODateOut":"2007-02-16","PartState":"None","Partstatus":"Done ","PartLocation":"Primary"}]})
您可以通过: http://localhost/index.php?c=CONTROLLER&m=METHOD 测试您的函数是否正常工作，并且能看到你的json数据像刚才所表示的一样。
注意: 在CI 配置文件夹您必须做如下设置:

复制内容到剪贴板

PHP 代码:

$config['enable_query_strings'] = TRUE;
        $config['controller_trigger'] = 'c';
        $config['function_trigger'] = 'm';
 

同样的确保CI配置文件夹中的routes文件做如下设置:

复制内容到剪贴板

PHP 代码:

$route['default_controller'] = "listboards";

"listboards" 是我所有代码的控制器。如果你打开您的站点首页看到的是CI的欢迎信息，那说明您没有把它设置成默认的控制器。
注意: 或许还有另外的方法，但我如果不把它设置成默认的控制机，就不能使它正常工作。如果我把默认的控制其设置成原来的”welcome”，使用http: //localhost/index.php/listboards 访问，你会发现只读取页面的HTML代码，没有CSS，JS等。Firebug（firefox的一个插件）提示没有错误关于缺少任何文件，但他在您访问默认控制器中是正常的。
And last, but not least the echo statement which is pretty much straight forward.

JS File
所有的JS代码都存放在以下JS文件里面:

复制内容到剪贴板

JS 代码:

Ext.onReady(function(){        
    var dataRecord = new Ext.data.Record.create([
        {name: 'WOrder'},
        {name: 'PartNumber'},
        {name: 'WOPartQuantity'},
        {name: 'PartPriority'},
        {name: 'WODateIn', type: 'date', dateFormat: 'Y-m-d'},
        {name: 'WODateOut', type: 'date', dateFormat: 'Y-m-d'},
        {name: 'PartState'},
        {name: 'Partstatus'},
        {name: 'PartLocation'}
    ]);

    var dataReader = new Ext.data.JsonReader({
        root: 'results'
        },
        dataRecord
    );

    var dataProxy = new Ext.data.HttpProxy({
        url: '../../../index.php/listboards/js_listboards',
        method: 'POST'
    });

    var dataStore = new Ext.data.Store({
            proxy: dataProxy,
            reader: dataReader
    });

    var colModel = new Ext.grid.ColumnModel([
        {header: "Work Order", sortable: true, dataIndex: 'WOrder'},
        {header: "Part Number", dataIndex: 'PartNumber'},
        {header: "QTY", dataIndex: 'WOPartQuantity'},
        {header: "Priority", sortable: true, dataIndex: 'PartPriority'},
        {header: "Date In", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'WODateIn'},
        {header: "Date Out",renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'WODateOut'},
        {header: "Part State", dataIndex: 'PartState'},
        {header: "Part Status", dataIndex: 'PartStatus'},
        {header: "Part Location", dataIndex: 'PartLocation'},
    ]);

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'mainGrid',
        store: dataStore,
        id: 'grid',
        width: 740,
        viewConfig: {
            forceFit: true
        },
        cm: colModel
    });

    dataStore.load();


// DEBUGGING ONLY - UNCOMMENT ONLY WHEN DEBUGGING CODE
    /*dataStore.on({
        'load':{
            fn: function(store, records, options){
                console.log('01 - Data Store listener fired (load), arguments:',arguments);
                console.log('         this:',this);
            }
            ,scope:this
        }
        ,'loadexception':{
            fn: function(httpProxy, dataObject, arguments, exception){
                console.log('** - Data Store listener fired (loadexception), arguments:',arguments);
            }
            ,scope:this
        }
    });

    Ext.Ajax.on({
         //Fires before a network request is made to retrieve a data object:
         'beforerequest':{
            fn: function(connection, options){
                console.log('03 - Ajax listener fired (beforerequest), arguments(connection, options):',arguments);
            }
            ,scope:this
        }
        //Fires if the request was successfully completed:
        ,'requestcomplete':{
            fn: function(connection, response, options){
                console.log('10 - Ajax listener fired (requestcomplete), arguments(connection, response, options):',arguments);
            }
            ,scope:this
        }
        //Fires if an error HTTP status was returned from the server. See HTTP Status Code 
        //Definitions for details of HTTP status codes:
        ,'requestexception':{
            fn: function(connection, response, options){
                console.log('Ajax listener fired (requestexception), arguments:(connection, response, options)',arguments);
            }
            ,scope:this
        }
    });

    dataProxy.on({
         'beforeload':{
            fn: function(store, options){
                console.log('02 - Proxy listener fired (beforeload), arguments:',arguments);
            }
            ,scope:this
        }
        ,'load':{
            fn: function(store, options){
                console.log('Proxy listener fired (load), arguments:',arguments);
            }
            ,scope:this
        }
        ,'loadexception':{
            fn: function(store, options){
                console.log('Proxy listener fired (loadexception), arguments:',arguments);
            }
            ,scope:this
        }
    });*/

});
 

自从我开始写代码我有很多我的问题，我对我需要的没有主义，并且其它例子也没有特别，然而它们提供更多更好的详细信息，但并不是必须的。

使你的Grid正常工作，您必须具备以下条件:
1.- A dataRecord:
记录或者数据行，如何接受你在这里定义的所有的操作呢？你不需要设置所有SQL查询中获得的字段，但如果你打算使用它，那你必须在这里定义它。定义数据类型并不是强制的，但如果你有很多日期字段，并打算格式化它，你将需要在我上面的代码中具体指定你能看到的数据类型”日期”。

2.- A dataReader:
这里你告诉它如何读取数据，我们返回一个JSON字符串，因此你需要使用一个JSON READER

3.- A dataProxy:
这里，我们告诉Grid，从哪里获取数据。在这个实例中，我们使用CI中的url 模型，如果你在配置中做了相关设置，但你也能使用"http://localhost/index.php?c=CONTROLLER&m=METHOD"。
注意: 你必须提供文件的路径，并且不能是全路径，例如: http://localhost/index.php?c=CONTROLLER&m=METHOD 和 http://localhost/index.php/CONTROLLER/METHOD 都是不正确的.这将造成不可访问，并且，你将需要使用scrīptHttpProxy.
4.- A dataStore:
前3个步骤，我们建立一个data store ，并且我们建立了互相独立性质，使你很容易的建立Grid

5.- A ColumnModel:
这是可选的，但它的定义将使你的Grid代码看起来更美观，T否则，你将在Grid的定义里面定义你的数据列。
表头属性使人更容易了解你的表格，但data index必须符合第一步(dataRecord)定义的名称，否则你将得到一个空列或空的Grid

6.- A Grid:
最后，我们利用前面所有使更加容易理解的数据来建立Grid。
同样的，我建议大家分开定义所有的属性，使你的代码更加容易使用和调试。
最后你将看到我在"debugging"部分外面注释，因此如果你需要不注释调试它，请看firebug（Firefox的插件，用于调试页面）的信息。

View
在最后，我们将创建符合位于index()中的"load->view('main-grid')"所对应的视图:

复制内容到剪贴板

HTML 代码:

<html>
<head>
    <title>Grid Test</title>

    <!-- Include Ext and app-specific scrīpts: -->
    <scrīpt type="text/javascrīpt" src="system/resources/js/extjs/adapter/ext/ext-base.js"></scrīpt>
    <scrīpt type="text/javascrīpt" src="system/resources/js/extjs/ext-all-debug.js"></scrīpt>
    <scrīpt type="text/javascrīpt" src="system/resources/js/js_listboards.js"></scrīpt>
    <scrīpt type="text/javascrīpt" src="system/resources/js/mainMenu.js"></scrīpt>

    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="system/resources/js/extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="system/application/views/css/ExtStart.css">

</head>
<body>
    <h1>My Grid</h1>
    <div id="mainMenu"></div>

    <div id="mainGrid"></div>

</body>
</html>
 