[导入]ExtJs 2.0 弹窗事例

网站: JavaEye 作者: ppkosd 链接：http://ppkosd.javaeye.com/blog/133004 发表时间: 2007年10月18日

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

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

服务器部分：

代码

网页部分：

代码

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 请批评指正!

评论也很精彩，浏览评论>>

JavaEye推荐
杭州：淘宝网：高薪急聘架构师和资深开发工程师
广州：优易公司：诚聘Java工程师，开发经理
上海：尤恩斯国际集团：诚聘开发工程师
北京：优秀公司NHNChina招聘:WEB开发,系统管理,JAVA开发, DBA

文章来源:http://ppkosd.javaeye.com/blog/133004