ExtJs 2.0 弹窗事例

最新推荐文章于 2019-06-27 00:20:14 发布

ppkosd

最新推荐文章于 2019-06-27 00:20:14 发布

阅读量100

点赞数

文章标签： EXT ASP 框架 XML HTML

责任不是你应该做的事情,而是你必须做的事情 -- ppkosd

[url=http://www.dojochina.com][img]http://www.dojochina.com/book/upload/images/sl.JPG[/img][/url]
这个EXT 2.0 的例子讲的是怎么样用aspserver和ext2.0构建弹窗效果!

服务器部分：

[code] var _http = new XMLHttp() ;

var _return = _http.get("http://rss.sina.com.cn/news/china/focus15.xml") ;

Write.writeXML(_return) ;[/code]

网页部分：

[code]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新闻列表示例</title>
<link type="text/css" rel="stylesheet" href="js/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="js/ext/ext-all.js">
</script>
<script type="text/javascript" src="js/ext/source/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript" src="js/demo.js">
</script>
</head>
<body>
<div id="example_grid"></div>
</body>
</html>[/code]

JS部分：

[code]Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
/********************************************************************************/
Ext.namespace("Ext.dojoChina.demo") ;

Ext.dojoChina.demo.NewsWindow = function(_record){
var _me = this ;
Ext.dojoChina.demo.NewsWindow.superclass.constructor.call(this, {
title:_record.get("title"),
width: 500,
height:300,
resizable:false,
layout: "fit",
plain:true,
bodyStyle:"padding:5px;",
buttonAlign:"right",
buttons: [{
text:"查看详细",
handler:function(){
window.open(_record.get("link")) ;
_me.close() ;
}
},{
text: "关闭",
handler:function(){
_me.close() ;
}
}],
items:{
html:_record.get("description")
}
});
}
Ext.extend(Ext.dojoChina.demo.NewsWindow , Ext.Window) ;
/********************************************************************************/
Ext.onReady(function(){
var _grid = new Ext.grid.GridPanel({
ds: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: "../app/demo.asp"
}),
reader: new Ext.data.XmlReader({
record: "item"
}, [
{name: "title", mapping: "title"},
{name: "datetime", mapping: "pubDate"},
{name:"link" , mapping:"link"},
{name:"description" , mapping:"description"}
])
}),
cm: new Ext.grid.ColumnModel([
{header: "新闻名称", width: 300, dataIndex: "title"},
{header: "新闻发布时间", width: 130, dataIndex: "datetime" , renderer: function(_value){
var _date = new Date(_value) ;
return _date.format("Y-m-d H:i:s");
}}
]),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
renderTo:"example_grid",
width:500,
height:300,
loadMask: true
});
_grid.getStore().load();
_grid.on("rowdblclick" , function(_grid){
var _record = _grid.getSelectionModel().getSelected() ;
var _window = new Ext.dojoChina.demo.NewsWindow(_record) ;
_window.show() ;
}) ;
}) ;

[/code]

和前几例最显著的差别还是js部分: 相同的部分都是采用同一框架!这样的好处是?
源代码下载:见www.dojochina.com 请批评指正!

ppkosd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs 2.0 弹窗事例

责任不是你应该做的事情,而是你必须做的事情 -- ppkosd[url=http://www.dojochina.com][img]http://www.dojochina.com/book/upload/images/sl.JPG[/img][/url]这个EXT 2.0 的例子讲的是怎么样用aspserver和ext2.0构建弹窗效果!服务器部分：[code] ...
复制链接

扫一扫