可能会用Ext+ajax开发
个简单
小项目会点滴讲解项目开发过程希望能给大家带来收获！
我本人也在学习这个框架所以对文章有什么建议请提出这样可能会让我学到更多
看到这幅图
你可能认为是某个软件Software或者是Flash、Flex、silverlight等等但这是javascript+Css实现
在看这样式和效果
如果加在自己项目里用户视觉和操作体验应该会很爽吧 还有更多特效就不截图了下面开始说
下这个组件ExtJs是个不错Ajax框架是用javascript写效果什么样上面也看到了我们能够把ExtJs应用到任何web开发语言中他客户端效果是非常强大同时Ext也提供了和服务器交互机制用起来非常方便Ext和服务器交互文章后面会写到在应用的前我们需要先获得这个框架
可以去 http://extjs.com/products/extjs/download.php 官网下载开源下载完毕解压后会得到如下目录
adapter:负责将里面提供
第 3方底层库(包括Ext自带)映射为Ext所支持底层库build:压缩后Ext全部源码(分类存放)
docs:API帮助文档
examples:
些Extjs做出效果举例resources:Ext UI资源文件目录
css、图片都在这source:无压缩Ext全部
源码ext-all.js :压缩后Ext全部源码
关键文件啊500多Kext-all-debug.js:无压缩Ext全部源码(用于调试)
ext-core.js :核心组件
包括source/core下所有类ext-core-debug.js:无压缩核心组件
接下来将在
个纯静态html页面中做测试如果想应用ExtJs首先需要导入3个脚本文件个样式表
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/ext-base.js" type="text/javascript"></script> <script src="extjs/ext-all.js" type="text/javascript"></script> <script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>这里要介绍说明
下在Extjs文件加载完毕后会执行Ext.onReady中指定
我们可以用简单代码做个测试<script language="javascaript">
function start
{ Ext.MessageBox.alert("ok","Extjs框架已加载！");
}
Ext.onReady(start);
</script>
<script language="javascaript">
Ext.onReady(
function{
Ext.MessageBox.alert("ok","Extjs框架已加载！");
}
);
</script>
两种写法可以实现同
个效果注意Ext.onReady(start)不需要加
Ext.MessageBox.alert("ok","Extjs框架已加载！");用于输出
个对话框Ext.MessageBox.alert('标题','弹出内容');它也可以写成Ext.Msg.alert('','');
运行效果如下
个alert对话框可以轻松用Extjs来实现了prompt('','');在Extjs中同样存在相对应使用方法 function Prompt
{ Ext.MessageBox.prompt(
"Input",
"input a number:",
function(button,text){
(button
"ok") Ext.MessageBox.alert("number","the number is "+text);
Ext.MessageBox.alert("sorry","the number is null.");
}
);
}
这个语法稍有麻烦, Ext.MessageBox.prompt('标题','介绍说明:',完毕后执行
); 执行需要有两个参数,button和textbutton用来判断用户选择了取消还是确定选项确定则为该值为'ok'text为输入文字 
只列举两个小例子做介绍说明
还有confim等使用方法都相似还有
个比较常用也比较容易理解Window框
这个漂亮框框可以拖动
点X可以关闭使用方法如下:
function Window
{ var win=
Ext.Window({title:"hello",width:300,height:200,html:'This is the body.'}); win.show
; }
这里就需要创建
个Ext.Window对象
show思路方法进行显示Ext.Window在构造
中可以传入很多参数这里只用到了title、width、height和body区域显示内容 Ext.Window({title:"",width:300,height:200,html:'This is the body.'});title:"" 设置标题
width:300 宽度
height:200 高度
html:'xxxx' 可以放置任何html代码
最新评论