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

tanqimin · 发表于 2008-3-20 21:27:49

原文地址：http://extjs.com/learn/Tutorial:ExtJs_CodeIgniter

翻译：老谭（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.

tanqimin · 发表于 2008-3-20 21:28:45

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: "

art Number", dataIndex: 'PartNumber'},
{header: "QTY", dataIndex: 'WOPartQuantity'},
{header: "

riority", 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: "

art State", dataIndex: 'PartState'},
{header: "

art Status", dataIndex: 'PartStatus'},
{header: "

art 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 都是不正确的.这将造成不可访问，并且，你将需要使用scriptHttpProxy.
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复制代码

复制代码

翻译得比较匆忙，如有错漏，欢迎大家指正。
转帖请注明此文出至CI中国，谢谢合作！

BruceWolf · 发表于 2008-3-20 21:55:57

Yes !That's what we need!
Thx~

Hex · 发表于 2008-3-23 16:33:39

这篇文章对于用 CI+Extjs 的朋友来说太有用了！！
感谢老谭！加精～～

shiliu · 发表于 2008-6-9 13:27:47

我正使用着呢 EXT , JQUERY 也正用着,有谁正在用,欢迎交流工作经验.

cocely · 发表于 2008-8-6 10:17:45

代码贴得太多了，看着吓人！

其实首先应该明白原理：
ci生成json串交给ext的grid进行渲染
然后我们就可以围绕这个原理进行制作了
首先我们先用ci生成json串（应该很简单）
把一个表的数据从数据库取出然后用json_encode生成json串，然后再组合成grid用的json格式。
完成上面这一步你已经成功一大半了！
下面是把我们用ci生成的json扔给ext的grid（怎样做一个grid自己去看ext官方文档带的列子）！
贴段代码：
var store = new Ext.data.Store({
         proxy: new Ext.data.HttpProxy({
            url: '你的json串url',
            method: 'POST'
         }),
         reader: new Ext.data.JsonReader({
            root: 'root',
            totalProperty: 'totalProperty',
            fields: ['数据库字段名1', '数据库字段名2', '数据库字段名3', '数据库字段名4']
         }),
      });

看过ext的列子就知道这个store是给grid用的，给grid装配后，再来执行一下store的load事件：
store.load();
呵呵！完毕！太精简了！如果是新手并且想学会建议仔细看看ext官方文档代的列子，已经涵盖了ext的所有应用。本人学ext也就两个来月。将体会告诉大家！

[ 本帖最后由 cocely 于 2008-8-6 10:20 编辑 ]

sam · 发表于 2009-4-2 14:46:16

才发现，

phelps_liu · 发表于 2009-11-20 16:59:24

:)很好但是不全面啊

leeleko · 发表于 2013-5-12 02:32:39

这个必须记录下。

		自动登录	找回密码
密码			入住 CI 中国社区

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

评分

我正使用着呢