|
|
本来想自己研发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测试时，我会发布更多特性～～
大家还有什么想法，可以一起研究哦～～ |
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-4-1 11:48:50
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡