ExtJS 2.0 的PHP封装

最新推荐文章于 2021-04-02 05:30:41 发布

yipsilon

最新推荐文章于 2021-04-02 05:30:41 发布

阅读量113

点赞数

分类专栏：项目: CMSPAD 文章标签： PHP JavaScript EXT 脚本 OO ViewUI

项目: CMSPAD 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

（以下代码和演示已经验证可用）
先看看运行ExtJS库PHP代码：
[code]<?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!');
}
}
?>[/code]
以上代码假设保存在inc/test/Test1.php文件中，再看看前台模板是怎么调用的：
[code]<!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>

<{portlet name="ExtJS" view="stylesheets"}>

<{portlet name="ExtJS" view="javascripts" extra="all" debug=true}>

<{portlet name="ExtJS" view="application" main="ExtJS:test.Test1"}>
</head>
<body>
<div id="extButton"></div>
This is body.
</body>
</html>[/code]
下面看看附件中的执行效果截图，页面中有三个元素：一个被禁用的按钮、一个文本和一个对话框。正好是执行的那两个。看起来，还是好用的。:)

[img]http://www.iteye.com/topics/download/d8d4c50c-13c3-4f51-8b82-61884163e480[/img]

以下是输出HTML页面的源代码：
[code]<!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>

<link rel="stylesheet" type="text/css" href="/CMSPAD/kernel/../portlet/ExtJS/lib/resources/css/ext-all.css" />

<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>

<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>[/code]目前UI系统之正在初级验证和架构阶段，封装了一些常用代码，把小家伙们累惨了*_*。待到进入Beta测试时，我会发布更多特性～～

大家还有什么想法，可以一起研究哦～～ :D