收藏本站 Archiver
    请 后使用快捷导航
    没有账号?入住 CI 中国社区
    查看: 14385|回复: 8

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

    [复制链接]
    楼主
    发表于 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.
    沙发
    楼主| 发表于 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), argumentsconnection, 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复制代码
    <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中国,谢谢合作!

    评分

    参与人数 1 威望 +5 理由
    Hex + 5 精品文章+原创内容

    查看全部评分

    藤椅
    发表于 2008年3月20日 21:55:57 | 只看该作者
    Yes !That's what we need!
    Thx~
    板凳
    发表于 2008年3月23日 16:33:39 | 只看该作者
    这篇文章对于用 CI+Extjs 的朋友来说太有用了!!
    感谢老谭!加精〜〜
    报纸
    发表于 2008年6月9日 13:27:47 | 只看该作者

    我正使用着呢

    我正使用着呢 EXT , JQUERY 也正用着,有谁正在用,欢迎交流工作经验.
    地板
    发表于 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 编辑 ]
    7楼
    发表于 2009年4月2日 14:46:16 | 只看该作者
    才发现,
    8楼
    发表于 2009年11月20日 16:59:24 | 只看该作者
    :)很好但是不全面啊
    9楼
    发表于 2013年5月12日 02:32:39 | 只看该作者
    这个必须记录下。
    返回列表
    您需要登录后才可以回帖 登录 | 入住 CI 中国社区

    本版积分规则

    AltStyle によって変換されたページ (->オリジナル) /