ExtJs 2.0 弹窗事例

ppkosd

浏览: 89761 次
性别:
来自: 苏州

最近访客更多访客>>

156926489

1iqueen

swigg

touchyfc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT ASP 框架 XML HTML

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

这个EXT 2.0 的例子讲的是怎么样用aspserver和ext2.0构建弹窗效果!

服务器部分：

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

网页部分：

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

JS部分：

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() ;
 }) ;
}) ;

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

分享到：