翻译:如何实现 - CodeIgniter 与 ExtJs Grid.
原文地址: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中,如下所示:
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".
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 配置文件夹您必须做如下设置:
$config['enable_query_strings'] = TRUE;
$config['controller_trigger'] = 'c';
$config['function_trigger'] = 'm';
同样的确保CI配置文件夹中的routes文件做如下设置:
$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文件里面:
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 都是不正确的.这将造成不可访问,并且,你将需要使用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>
<head>
<title>Grid Test</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="system/resources/js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="system/resources/js/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="system/resources/js/js_listboards.js"></script>
<script type="text/javascript" src="system/resources/js/mainMenu.js"></script>
<!-- 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>
翻译得比较匆忙,如有错漏,欢迎大家指正。
转帖请注明此文出至CI中国,谢谢合作! Yes !That's what we need!
Thx~:lol 这篇文章对于用 CI+Extjs 的朋友来说太有用了!!
感谢老谭!加精~~
我正使用着呢
我正使用着呢EXT , JQUERY 也正用着,有谁正在用,欢迎交流工作经验. 代码贴得太多了,看着吓人!其实首先应该明白原理:
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 编辑 ] 才发现,:L :)很好但是不全面啊 这个必须记录下。
页:
[1]