ExtJS 2.0 的PHP封装

本来想自己研发UI库,自从看到了ExtJS,我们彻底打消了重复造轮子的想法,也决定使用ExtJS来作为CMSPAD UI部分的基础类库。于是,偶们想到了一个个人感觉比较BT的方法来实现它--使用PHP来进行封装。

(以下代码和演示已经验证可用)
先看看运行ExtJS库PHP代码:
<?php
import('ExtJS:ExtApplication');
import('ExtJS:ExtButton');
import('ExtJS:ExtMessageBox');
class Test1 implements ExtRunnable{
	
  /**
   * @param ExtApplication $application
   */
  public function run($application){
    $button = new ExtButton(array('text' => 'hello world!', 'width' => '500px', 'renderTo' => 'extButton'), 'button');
    $button->disable();
    /*
    $msgbox = new ExtMessageBox(array('title' => 'Address', 'msg' => 'Please enter your address:', 'width' => 300, 'buttons' => ExtConstant::getConstant('OKCANCEL'), 'multiline' => true), 'msgbox');
    */
    ExtMessageBox::alert('Hello', 'World!');
  }
}
?>

以上代码假设保存在inc/test/Test1.php文件中,再看看前台模板是怎么调用的:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Extjs 2.0 Example Test</title>
    <!-- 调用ExtJS自带的样式文件 -->
    <{portlet name="ExtJS" view="stylesheets"}>
    <!-- 调用ExtJS的脚本文件,当前指定的是所有脚本 -->
    <{portlet name="ExtJS" view="javascripts" extra="all" debug=true}>
    <!-- 执行Test1,也就是上面的文件 -->
    <{portlet name="ExtJS" view="application" main="ExtJS:test.Test1"}>
  </head>
  <body>
    <div id="extButton"></div>
    This is body.
  </body>
</html>

下面看看附件中的执行效果截图,页面中有三个元素:一个被禁用的按钮、一个文本和一个对话框。正好是执行的那两个。看起来,还是好用的。:)



以下是输出HTML页面的源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Extjs 2.0 Example Test</title>
    <!-- 调用ExtJS自带的样式文件 -->
    <link rel="stylesheet" type="text/css" href="/CMSPAD/kernel/../portlet/ExtJS/lib/resources/css/ext-all.css" />
    <!-- 调用ExtJS的脚本文件,当前指定的是所有脚本 -->
    <script type="text/javascript" src="/CMSPAD/kernel/../portlet/ExtJS/lib/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/CMSPAD/kernel/../portlet/ExtJS/lib/ext-all-debug.js"></script>
    <!-- 执行Test1,也就是上面的文件 -->
    <script type="text/javascript">
      Ext.onReady(function(){
        var button = new Ext.Button({text:'hello world!',width:'500px',renderTo:'extButton'});
        button.disable();
        Ext.MessageBox.alert('Hello','World!');
      });
    </script>
  </head>
  <body>
    <div id="extButton"></div>
    This is body.
  </body>
</html>
目前UI系统之正在初级验证和架构阶段,封装了一些常用代码,把小家伙们累惨了*_*。待到进入Beta测试时,我会发布更多特性~~

大家还有什么想法,可以一起研究哦~~

你可能感兴趣的:(JavaScript,PHP,ext,脚本,OO)