I'll describe an example of users CRUD interface and implementation.arborint wrote:I would be great if you would start a new thread on JSON server-side views and ExtJS client side. I'd be interested in learning more...VladSun wrote:My PHP projects don't use any HTML (except for the BODY tag and a few SCRIPT tags) - only JSON server-side views and ExtJS client side![]()
I use CI and ExtJS
Model:
Code: Select all
class User_List_Model extends Model
{
private $user_collection = null;
public function __construct()
{
parent::__construct();
$this->user_collection = new User_Collection_Object();
}
public function load()
{
$this->user_collection->load();
}
public function get()
{
return $this->user_collection->get();
}
public function save()
{
$fields['data'] = '';
$this->validation->set_fields($fields);
if (!($users = json_decode($this->validation->data)))
Error::register('Empty data');
$this->db->trans_start();
$this->user_collection->add($users->added);
$this->user_collection->update($users->updated);
$this->user_collection->delete($users->removed);
$this->db->trans_complete();
if ($this->db->trans_status() === FALSE)
Error::register('SQL transaction error.');
}
}Code: Select all
class User extends Controller {
function __construct()
{
parent::__construct();
$this->load->model('user_list_model', 'user_list');
}
public function view()
{
$this->user_list->load();
$this->load->view('common/json_format', array(
'data' => $this->user_list->get(),
));
}
public function save()
{
$this->load->library('validation');
$this->user_list->save();
$this->load->view('common/json');
}
}json_format
Code: Select all
echo json_encode($data);Code: Select all
ExtResponse::pack();Code: Select all
class ExtResponse
{
public static function send($config)
{
$temp = new StdClass();
foreach ($config as $field => $value)
$temp->{$field} = $value;
echo json_encode($temp);
}
public static function pack()
{
self::send(array(
'success' => !Error::has(),
'errorMessages' => Error::getErrorMessages(),
'data' => Data::get(),
));
}
}Code: Select all
class Error
{
private static $errorMessages = null;
public static function register($msg)
{
self::$errorMessages[] = $msg;
if (__DEBUG) error_log($msg);
}
public static function has()
{
return (boolean)(count(self::$errorMessages) > 0);
}
public static function getErrorMessages()
{
return self::$errorMessages;
}
}UserCRUD.js
[js]var userModel = Ext.data.Record.create([ {name: 'id', type: 'int', defaultValue: 0}, {name: 'username', type: 'string', defaultValue: ''}, {name: 'fullname', type: 'string', defaultValue: ''},]); var userDataStore = new Ext.extended.JsonStore({ proxy: new Ext.data.HttpProxy({ url : '/user/view', method : 'POST' }), updateURL : '/user/save', postFieldName: 'data', recordModel : userModel, fields : [ {name: 'id'}, {name: 'username'}, {name: 'fullname'}, ], sortInfo : {field: 'username', direction: 'ASC'}, remoteSort : false}); var filters = new Ext.ux.grid.GridFilters({ filters: [ {type: 'string', dataIndex: 'username'}, {type: 'string', dataIndex: 'fullname'} ], local: true}); var userColumnModel = new Ext.grid.ColumnModel({ columns: [ { dataIndex : 'username', header : this.getTranslation('user_view', 'username_header_text'), editor : new Ext.form.TextField( { allowBlank : false }) }, { dataIndex : 'fullname', header : this.getTranslation('user_view', 'fullname_header_text'), editor : new Ext.form.TextField( { allowBlank : false }) }, ]});userColumnModel.defaultSortable = true; var userGrid = new Ext.extended.EditorGridPanel({ store : userDataStore, colModel : userColumnModel, clicksToEdit : 2, enableColLock : false, plugins : filters, title : this.getTranslation('user_view', 'user_list_title'), autoExpandColumn: 'username'}); userGrid.load();[/js]
and the main view (loaded by the default controller)
Code: Select all
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS CTI</title>
<link href="favicon.ico" rel="shortcut icon">
<link rel="stylesheet" type="text/css" href="/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/css/examples.css" />
<link rel="stylesheet" type="text/css" href="/css/extended.css" />
<link rel="stylesheet" type="text/css" href="/css/Ext.ux.form.LovCombo.css" />
<?php if (__DEBUG)
{
?>
<script type="text/javascript" src="/scripts/ext.js"></script>
<script type="text/javascript" src="/scripts/ext-core.js"></script>
<script type="text/javascript" src="/scripts/ext-core-debug.js"></script>
<script type="text/javascript" src="/scripts/ext-debug.js"></script>
<?php
}
else
{
?>
<script type="text/javascript" src="/scripts/ext.js"></script>
<?php
}
?>
<script type="text/javascript" src="/scripts/menu/EditableItem.js"></script>
<script type="text/javascript" src="/scripts/menu/RangeMenu.js"></script>
<script type="text/javascript" src="/scripts/grid/RowExpander.js"></script>
<script type="text/javascript" src="/scripts/ux/Ext.ux.form.LovCombo.js"></script>
<script type="text/javascript" src="/scripts/grid/GridFilters.js"></script>
<script type="text/javascript" src="/scripts/grid/filter/Filter.js"></script>
<script type="text/javascript" src="/scripts/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="/scripts/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="/scripts/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="/scripts/grid/filter/LovFilter.js"></script>
<script type="text/javascript" src="/scripts/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="/scripts/grid/filter/BooleanFilter.js"></script>
<script type="text/javascript" src="/scripts/extended/prototype.js"></script>
<script type="text/javascript" src="/scripts/extended/editableGrid.js"></script>
<script type="text/javascript" src="/scripts/views/UserCRUD.js"></script>
</head>
<body>
</body>
</html>