65.9K
CodeProject 正在变化。 阅读更多。
Home

ExtJS 的 PHP 包装器

Paul Coldrey
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.15/5 (9投票s)

2008 年 5 月 27 日

BSD

2分钟阅读

viewsIcon

50650

downloadIcon

338

简单的封装类，允许从 PHP 对象渲染 ExtJS。

引言

ExtJS 是一个非常酷的 JavaScript 库，用于生成 Web GUI。当只需要简单的表单时，一切都运行得很好，但通常不会过多久，你就会想要根据服务器端逻辑来控制渲染的 JavaScript（例如，仅向“管理员”显示这些字段，或者根据所选 ID 从 SQL 数据库加载值并在表单中显示它们）。很快，你就会将 JavaScript 包装在 PHP 控制结构中，并嵌入一小段 PHP 代码来设置值。然后，你就会发现你的代码看起来一团糟，难以维护。更不用说，如果你是 Emacs 用户（像我一样），它会破坏所有漂亮的语法高亮和自动缩进。因此，我决定花一两个小时创建一个 PHP 封装器，让我能够编写 PHP 但渲染 ExtJS JavaScript。事实证明这很简单，我的代码会展示这一点。

背景

ExtJS 代码使用分层 JavaScript 对象结构，通过设置属性来专门化对象。可以在 PHP 中指定类似的结构的对象，现在 PHP 5 支持 __get 和 __set 的魔术方法，这使得设置对象的任意属性变得容易。这是映射如此简单的关键。

使用代码

包含的 Zip 文件包含一个文件，demo.php，它生成本文开头的截图。

Ext 对象映射到 PHP 类 ExtObject。几个简单的例子展示了对称性

PHP 代码

$tab = new ExtObject('Ext.TabPanel');
$tab->renderTo = "tabs";
$tab->activeTab = 0;
$tab->autoHeight = true;
$tab->items = Array(
            new ExtObject(null, Array('title'=>'First Tab', 
                          'contentEl'=>'tab1',
                          'autoHeight'=>true
                          )
                  ),
            new ExtObject(null, Array('title'=>'Second Tab',
                          'contentEl'=>'tab2',
                          'autoHeight'=>true
                          )
                  )
            );

生成 JavaScript

var tabs = new Ext.TabPanel({
  renderTo: 'tabs',
  activeTab: 0,
  autoHeight: true,
  items: [
    {
      title: 'First Tab',
      contentEl: 'tab1',
      autoHeight: true
    },
    {
      title: 'Second Tab',
      contentEl: 'tab2',
      autoHeight: true
    }
  ]
});

并且，以下 PHP 代码

$tab1->items = Array(new ExtObject(null, Array('fieldLabel' => 'Field 1',
                           'value' => ''
                           )
                   ),
             new ExtObject('Ext.form.TextArea', Array('fieldLabel' => 'Text area',
                                  'value'=> ''
                                  )
                   ),
             new ExtObject('Ext.form.Checkbox', Array('fieldLabel' => 'Check box',
                                  'value'=> true
                                  )
                   )
             );

生成以下 JavaScript

var tab1 = new Ext.FormPanel({
  labelWidth: 150,
  url: 'part.submit.php',
  frame: true,
  bodyStyle: 'padding: 5px 5px 0',
  width: 500,
  defaults:   {
    width: 290
  },
  defaultType: 'textfield',
  items: [
    {
      fieldLabel: 'Field 1',
      value: ''
    },
    new Ext.form.TextArea({
      fieldLabel: 'Text area',
      value: ''
    }),
    new Ext.form.Checkbox({
      fieldLabel: 'Check box',
      value: true
    })
  ]
});

ExtObject 还实现了一个方法 SetProperties(...)，允许使用关联数组来提供参数。下面显示了一个示例

$tab1->SetProperties(Array('labelWidth' => 150,
               'url' => 'part.submit.php',
               'frame' => true,
               'bodyStyle' => 'padding: 5px 5px 0',
               'width' => 500,
               'defaults' => new ExtObject(null, Array('width' => 290)),
               'defaultType' => 'textfield'
               )
             );

提供了一个第二个对象 ExtPage 来生成所有必需的周围 HTML 代码。它有三个属性

  1. 页面标题
  2. 要在 <head> 标签中包含的 JavaScript 代码 - ExtJS 代码的大部分
  3. 应包含在 <body> 标签中的任何 HTML

示例如下

$page = new ExtPage('Demonstration');
$page->js = "
Ext.onReady(function(){
    Ext.QuickTips.init();
";
$page->js .= $tab->render('tabs');
$page->js .= $tab1->render('tab1');
$page->js .= "tab1.render('tab1');
});
";

$page->body = "<div id='tabs'>
  <div id='tab1' class='x-tab x-hide-display'></div>
  <div id='tab2' class='x-tab x-hide-display'>A tab</div>
</div>
";
$page->render();

关注点

代码的核心是 ExObject 对象中的 JSRender(...) 方法。它递归地下降 PHP 对象结构，以生成等效的 JavaScript 代码。静态变量 ExtObject::$indent 用于为输出 JavaScript 代码提供合理的缩进，使其更易于理解。

历史

  • 2008-06-03 PJC：根据读者的评论修复了 ExtJS 链接 - 感谢 admirm :-)
© . All rights reserved.