Asp.Net教程,WinForm教程,Asp.Net MVC,vs2008教程,vs2010教程,Silverlight技术,源码下载,Asp.Net视频教程
全站热门标签
vs2010 Silverlight 存储过程 水晶报表 ADO.NET JavaScript LINQ AjaxPro DataGridView 面向对象 Extjs GridView XML DevExpress HTML教程 Oracle jQuery 分页 GDI+ Visual C++2010 MySQL Office2010 WPF MVC Dojo WCF4.0 VB.NET Sql2005 textbox cookie WCF WinForm Discuz!NT SQL经典语句 T-SQL checkbox ASPxGridView F# asp.net SQL VS2008新特性 DropDownList Access TreeView Ajax VS2008 页面执行时间 Flex 字符串 回调 VB2005 DataSet C#时间 ASP.NET性能优化 用户在线检测 动画
jQuery JavaScript Html/Css Flex DojoExtJS AJAX
当前位置: 主页 > Web编程 > ExtJS >

基于ASP.NET MVC PV3与ExtJS2.0的开发

时间:2010-03-30 20:57来源:未知 作者:admin 点击:

先看效果图:
 


以上功能主要有以下几个文件组成:
显示、删除功能实现
.ExtJs的Grid显示(CMS.js)
CMS.js
  /**//*
   * Ext JS Library .
   * Copyright(c) -, Ext JS, LLC.
   * licensing@extjs.com
   *
   * http://extjs.com/license
   */
  Ext.util.CSS.swapStyleSheet("theme","http://localhost/PoloSoft/Resources/css/xtheme-gray.css");
  Ext.onReady(function(){
        Ext.QuickTips.init();
        var myUrl='http://localhost/PoloSoft/';
       // create the Data Store
         var ds = new Ext.data.GroupingStore({
         // load using script tags for cross domain, if the data in on the same domain as
         // this page, an HttpProxy would be better
         proxy: new Ext.data.HttpProxy({
             url: myUrl+'Admin/CmsDataSource'
         }),
 
         // create reader that reads the project records
         reader: new Ext.data.JsonReader(
         {
             totalProperty: "results",     // The property which contains the total dataset size (optional)
             root: "rows",                         // The property which contains an Array of row objects
             id: "id"                                    // The property within each row object that provides an ID for the record (optional)
         },[
             {name:'ID',                              type:'int'},
             {name:'CATALOG_NAME',  type:'string'},
             {name:'TITLE',                        type:'string'},
             {name:'AUTHOR',                 type:'string'},
             {name:'CREATE_TIME',         type:'string'},
             {name:'NEWS_FROM',         type:'string'}
          ]),
         groupField:'CATALOG_NAME',
 
         // turn on remote sorting
         remoteSort: false
     });
     ds.setDefaultSort('CREATE_TIME', 'desc');
 
     // formate ms json date formate
     function renderDate(value, p, record){
        var jsondate = record.data.CREATE_TIME;
 //       var s = "";           // 声明变量
        jsondate = eval("new " + jsondate.substr(,jsondate.length-));   // 创建 Date 对象
 //       s += jsondate.getYear()+ "-";                  // 获取年份
 //       s += (jsondate.getMonth() + ) + "-";   // 获取月份
 //       s += jsondate.getDate() ;                         // 获取日
 //       return(s);   
         return jsondate.toLocaleDateString();
     }
 
     // the column model has information about grid columns
     // dataIndex maps the column to the specific data field in
     // the data store
     var nm = new Ext.grid.RowNumberer();
     var sm = new Ext.grid.CheckboxSelectionModel();  // add checkbox column
     var cm = new Ext.grid.ColumnModel([nm,sm,
         {id:'ID',header:"编号",dataIndex: 'ID', width: , align:'center'},
         {header:"所属板块",dataIndex: 'CATALOG_NAME',  width: ,align:'center'  },
         {header:"标题",dataIndex: 'TITLE',     width:, align:'left'},
         {header:"作者",dataIndex: 'AUTHOR',  width:, align:'center'},
         {header:"来源",  dataIndex: 'NEWS_FROM',width: , align:'center'},
         {header:"发布时间",  dataIndex: 'CREATE_TIME', renderer: renderDate,width: , align:'center'}
     ]);
 
     //hide column
    cm.setHidden(, !cm.isHidden());   //隐藏编号列
 
   // by default columns are sortable
   // cm.defaultSortable = true;
    var gdCMS = new Ext.grid.GridPanel({
         el:'cms-grid',
         title:'信息数据一览表',
         iconCls: 'icon-grid',
         layout:'fit',
         bodyStyle:'width:%',
         height:,
         monitorWindowResize:true,
         monitorResize:true,
         autoScroll:true,
         store: ds,
         cm: cm,
         sm: sm,
         trackMouseOver:true,
         loadMask: {msg:'正在加载数据,请稍侯……'},
         viewConfig: {
             enableRowBody:true,
             getRowClass : function(record, rowIndex, p, ds){
                 return 'x-grid-row-collapsed';
             }
         },
         view: new Ext.grid.GroupingView({
             forceFit:true,
             groupTextTpl: '{text} ({[values.rs.length]}条记录)'
         }),
          bbar: new Ext.PagingToolbar({
             pageSize: ,
             store: ds,
            displayInfo: true,
            displayMsg: '当前显示 {} - {}条记录 /共 {}条记录',
            emptyMsg: "无显示数据"
        }),
        tbar:[
        {
            id:'btnAdd',
            text:'新增',
            tooltip:'新增',
            iconCls:'add',
            handler: function(){window.location.href=myUrl+'Admin/Add';}
        },
         {
            id:'btnAdd',
            text:'编辑',
            tooltip:'编辑',
            iconCls:'edit',
            handler: doEdit
        },
        {
            id:'btnDel',
            text:'删除',
            tooltip:'批量删除',
            iconCls:'remove',
            handler:doDel
        },
            new Ext.app.SearchField({
                store: ds,
                width:,
                emptyText:'搜索信息'
            })
        ]
    });
   
   
    gdCMS.render();
   
    // trigger the data store load
    ds.load({params:{start:, limit:}});
   
   
    function doEdit()
    {
        var row=gdCMS.getSelections();
        if(row.length==)
        {
          var id = row[].get("ID");
          window.location.href=myUrl+'Admin/Edit?id='+id; 
        }                  
        else
        {
          Ext.MessageBox.alert("提示","请选条记录进行编辑!");
        }
    }
      
    function doDel()
    {
        Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);
    } 
    function showResult(btn){
         if(btn=='yes'){
          var row=gdCMS.getSelections();
          var jsonData="";
          for(var i=,len=row.length;i<len;i++){
            var id = row[i].get("ID");
            if(i==)
              jsonData =id;                                 //这样处理是为了删除的Lambda语句方便
            else
              jsonData = jsonData + ","+ id;   //这样处理是为了删除的Lambda语句方便
          }
          jsonData=","+jsonData+",";           //这样处理是为了删除的Lambda语句方便
          var conn = new Ext.data.Connection();
          conn.request({
            url:myUrl+"Admin/Delete",
            params:{idList:jsonData},
            method: 'post',
            scope: this,
            callback:function(options,success, response){
           if(success){  
              Ext.MessageBox.alert("提示","所选记录成功删除!");
              ds.load({params:{start:, limit:}});    
            }   
            else    
                {Ext.MessageBox.alert("提示","所选记录删除失败!");}    
            } 
          })
         }
    };
});
.Controller实现CmsDataSource
AdminController.cs
 CMSDataContext db = new CMSDataContext();
         public object  GetCMSInfo(int? start,int? limit)
         {
             var query = from p in db.CMS_INFOs
                        join m in db.CMS_CATALOGs on p.CATALOG_ID equals m.CATALOG_ID
                        select new {
                                                 ID=p.ID,
                                                 CATALOG_NAME=m.CATALOG_NAME,
                                                 TITLE=p.TITLE,
                                                NEWS_FROM=p.NEWS_FROM,
                                                AUTHOR=p.AUTHOR,
                                                CREATE_TIME=p.CREATE_TIME
                                            };
            ViewData["totalCount"] = query.Count();
            int PageNum = start.Value / limit.Value;  //共有页数
            int PageSize = limit.Value;
            query = query.Skip(PageSize * PageNum).Take(PageSize);  //当前页记录
            return query.ToList();
            //return news.OrderByDescending(c => c.CREATE_TIME).ToList();
        }
 public  ActionResult CmsDataSource(int? start,int? limit)
        {
            ViewData["CMS"] = GetCMSInfo(start.Value,limit.Value);
            return View(ViewData["CMS"]);
        }
.删除方法
AdminController.cs
  public bool Delete(string idList)
         {
             bool result = false;
             try
             {
                 var query = from p in db.CMS_INFOs
                                where idList.IndexOf(","+p.ID+",") >=
                                select p;
                 db.CMS_INFOs.DeleteAllOnSubmit(query);
                db.SubmitChanges();
                result = true;
            }
            catch
            {
                result = false;
            }
          
            return result;
        }

.编辑和新增功能
Code
  public ActionResult Modify(int? id)
         {
             string resultJson;
             try
             {
                 CMS_INFO cms = db.CMS_INFOs.First(c=>c.ID==id.Value);
                 cms.AUTHOR = Request.Form["author"];
                 cms.CATALOG_ID = int.Parse(Request.Form["catalogID"]);
                 cms.CREATE_TIME = DateTime.Parse(Request.Form["createDate"]);
                cms.NEWS_CONTENT = Request.Form["content"];
                cms.NEWS_FROM = Request.Form["from"];
                cms.TITLE = Request.Form["title"];
                db.SubmitChanges();
                resultJson = @"{success: true}";
            }
            catch (Exception ex)
            {
                string msg = ex.Message;
                resultJson = @"{success: false,msg:'数据修改失败了!'}";
            }
            ViewData["resultJson"] = resultJson;
            return View("Modify");
        }
 public ActionResult Insert()
        {
            string resultJson;
            try
            {
                CMS_INFO cms = new CMS_INFO();
                cms.AUTHOR =Request.Form["author"];
                cms.CATALOG_ID = int.Parse(Request.Form["catalogID"]);
                cms.CREATE_TIME = DateTime.Parse(Request.Form["createDate"]);
                cms.NEWS_CONTENT = Request.Form["content"];
                cms.NEWS_FROM = Request.Form["from"];
                cms.TITLE = Request.Form["title"];
                db.CMS_INFOs.InsertOnSubmit(cms);
                db.SubmitChanges();
                resultJson=@"{success: true}";
            }
            catch(Exception ex)
            {
                string msg = ex.Message;
                resultJson = @"{success: false,msg:'数据保存失败了!'}";
            }
            ViewData["resultJson"] = resultJson;
            return View("Insert");
        }
(责任编辑:admin)
Tags:ASP.NET MVC Extjs
责任编辑:admin
返回顶部
------分隔线----------------------------
推荐内容
骆驼户外男 真皮磨砂日常休闲鞋 低帮 2011秋冬新款 专柜正品特价 骆驼户外男 真皮磨砂日常休闲鞋 低帮 2011秋冬新款 专柜正品特价