ExtJs4.0 GridPanel实例

Contentitemjkgrid.js代码   收藏代码
  1. var store;  
  2. Ext.app.ContentItemJKGrid = Ext.extend(Ext.grid.GridPanel,  
  3. {  
  4.     title: '内容项接口列表',  
  5.     region: 'north',  
  6.     id: 'am-contentitemjkgrid',  
  7.     height: 150,  
  8.     ctiId: 0,  
  9.     ctiName: '',  
  10.     wsId: 0,  
  11.     viewConfig:  
  12.     {  
  13.         id: 'ctigv',  
  14.         trackOver: true,  
  15.         stripeRows: true  
  16.     },  
  17.     initComponent: function () {  
  18.         var me = this;  
  19.         var ctism = new Ext.selection.CheckboxModel({  
  20.             id: "ctiJKwsId",  
  21.             dataIndex: 'CtiId',  
  22.             mode: 'SINGLE',   //设置Checkbom只能选中一个  
  23.             listeners: {  
  24.                 'select': function (sm, rowIndex, record) {  
  25.                     ctijkClick();  
  26.                 }  
  27.             }  
  28.         });  
  29.         this.columns =  
  30.         [  
  31.             {  
  32.                 id: 'ctiJKgridName',  
  33.                 header: '内容项名称',  
  34.                 width: 300,  
  35.                 sortable: true,  
  36.                 dataIndex: 'CtItemName'  
  37.             },  
  38.             {  
  39.                 id: 'ctiJKgridwsName',  
  40.                 width: 400,  
  41.                 header: 'Web Sevice名称',  
  42.                 dataIndex: 'WsName'  
  43.             },  
  44.             {  
  45.                 id: 'ctiJKgridExplain',  
  46.                 width: 400,  
  47.                 header: '数据库表名',  
  48.                 dataIndex: 'TableName'  
  49.             }  
  50.         ];  
  51.         this.selModel = ctism;  
  52.         Ext.define('Ext.app.ContentItemData',  
  53.         {  
  54.             extend: 'Ext.data.Model',  
  55.             fields:  
  56.             [  
  57.             //第一个字段需要指定mapping,其他字段,可以省略掉。   
  58.                 {  
  59.                 name: 'CtItemName',  
  60.                 mapping: 'CtItemName',  
  61.                 type: 'string'  
  62. },  
  63.                 {  
  64.                     name: 'WsName',  
  65.                     type: 'string'  
  66.                 },  
  67.                 {  
  68.                     name: 'TableName',  
  69.                     type: 'string'  
  70.                 },  
  71.                 {  
  72.                     name: 'CtiId',  
  73.                     type: 'int'  
  74.                 },  
  75.                 {  
  76.                     name: 'Id',  
  77.                     type: 'int'  
  78.                 },  
  79.                 {  
  80.                     name: 'WsId',  
  81.                     type: 'string'  
  82.                 }  
  83.             ]  
  84.         });  
  85.         store = Ext.create('Ext.data.Store',  
  86.         {  
  87.             model: 'Ext.app.ContentItemData',  
  88.             pageSize: 20,  
  89.             proxy:  
  90.             {  
  91.                 type: 'ajax',  
  92.                 url: 'Data/CtItemInterface/CtItemInterfaceInfo.aspx?param=select',  
  93.                 reader:  
  94.                 {  
  95.                     type: 'json',  
  96.                     root: 'items',  
  97.                     totalProperty: 'total'  
  98.                 }  
  99.             },  
  100.             listeners: {  
  101.                 load: function () {  
  102.                     var addClick = Ext.getCmp("ctiJKAdd");  
  103.                     var EditClick = Ext.getCmp("ctiJKEdit");  
  104.                     var deleteClick = Ext.getCmp("ctiJKdelete");  
  105.                     if (addClick) {  
  106.                         if (me.ctiId == 0) addClick.disabled = true;  
  107.                         else addClick.disabled = false;  
  108.                     }  
  109.                     if (EditClick) {  
  110.                         if (me.ctiId == 0) EditClick.disabled = true;  
  111.                         else EditClick.disabled = false;  
  112.                     }  
  113.                     if (deleteClick) {  
  114.                         if (me.ctiId == 0) deleteClick.disabled = true;  
  115.                         else deleteClick.disabled = false;  
  116.                     }  
  117.                     if (me.store.data.length > 0) {  
  118.                         me.getSelectionModel().select(0);             // checkbom默认选择一个  
  119.                     }  
  120.                     ctijkClick();  
  121.                 }  
  122.             },  
  123.             autoLoad: true  
  124.         });  
  125.         Ext.apply(this,  
  126.         {  
  127.             store: store,  
  128.             dockedItems:  
  129.             [{  
  130.                 dock: 'top',  
  131.                 xtype: 'toolbar',  
  132.                 items:  
  133.                 [  
  134.                     {  
  135.                         width: 80,  
  136.                         xtype: 'button',  
  137.                         id: "ctiJKAdd",  
  138.                         text: '添加',  
  139.                         store: store,  
  140.                         handler: ctijkAdd  
  141.                     },  
  142.                     {  
  143.                         width: 50,  
  144.                         xtype: 'button',  
  145.                         id: "ctiJKEdit",  
  146.                         text: '编辑',  
  147.                         store: store,  
  148.                         handler: ctijkEdit  
  149.                     },  
  150.                     {  
  151.                         width: 50,  
  152.                         xtype: 'button',  
  153.                         id: "ctiJKdelete",  
  154.                         text: '删除',  
  155.                         store: store,  
  156.                         handler: ctijkDelete  
  157.                     }  
  158.                 ]  
  159.             }]  
  160.         });  
  161.   
  162.         ///定义内容项接口删除事件  
  163.         function ctijkDelete() {  
  164.             var row = me.getSelectionModel().getSelection();  
  165.             if (row.length == 0) {  
  166.                 Ext.Msg.alert("提示""请选择一行");  
  167.             } else {  
  168.                 Ext.Msg.confirm("提示""确定删除这" + row.length + "条信息吗?",  
  169.                     function (btn) {  
  170.                         if (btn == "yes") {  
  171.                             Ext.Ajax.request({  
  172.                                 url: "data/CtItemInterface/CtItemInterfaceManager.aspx?param=DeleteCtItemJk",  
  173.                                 method: "POST",  
  174.                                 params: { id: row[0].get("Id") }, //发送的参数  
  175.                                 success: function (response, option) {  
  176.                                     response = Ext.JSON.decode(response.responseText);  
  177.                                     if (response.success == true) {  
  178.                                         if (response.flag == true) {  
  179.                                             Ext.MessageBox.alert("提示""删除接口成功!");  
  180.   
  181.                                             //刷新列表  
  182.                                             me.store.load();  
  183.                                         }  
  184.                                         else { Ext.MessageBox.alert("错误信息""删除接口失败!"); }  
  185.                                     }  
  186.                                     else { Ext.MessageBox.alert("错误信息", response.msg); }  
  187.                                 },  
  188.                                 failure: function () { Ext.Msg.alert("提示""删除失败<br>没有捕获到异常"); }  
  189.                             });  
  190.                         }  
  191.                     })  
  192.             }  
  193.         }  
  194.   
  195.         ///复选框选择事件  
  196.         function ctijkClick() {  
  197.             //根据选中的行显示相应内容栏数据  
  198.             var ctcgridview = Ext.getCmp('am-contentcolumngrid');  
  199.             if (me.store.data.length > 0) {  
  200.                 ctcgridview.wsName = me.getSelectionModel().getSelection()[0].get("WsName");  //可以给另一个grid属性赋值  
  201.                 ctcgridview.wsId = me.getSelectionModel().getSelection()[0].get("WsId");  
  202.                 ctcgridview.ctiName = me.getSelectionModel().getSelection()[0].get("CtItemName");  
  203.             } else { ctcgridview.wsId = 0 }  
  204.             // alert(ctcgridview.wsId);  
  205.             ctcgridview.ctiId = me.ctiId;  
  206.             ctcgridview.store.load({  
  207.                 url: 'Data/ContentColumn/ContentColumnInfo.aspx?param=select',  
  208.                 params: { msg: me.ctiId }  
  209.             });  
  210.         }  
  211.   
  212.         //定义内容项接口添加事件  
  213.         function ctijkAdd() {  
  214.             var ctiWin = Ext.create('Ext.app.ContentItemJKAddForm', { ctiId: me.ctiId, ctiName: me.ctiName });  
  215.             ctiWin.show();  
  216.         }  
  217.   
  218.         //定义内容项接口编辑事件  
  219.         function ctijkEdit() {  
  220.             var row = me.getSelectionModel().getSelection();  
  221.             if (row.length == 0) {  
  222.                 Ext.Msg.alert("提示""请选择一行");  
  223.             } else if (row.length > 1) {  
  224.                 Ext.Msg.alert("提示""只能选择一行");  
  225.             } else if (row.length == 1) {  
  226.                 var ctiInId = row[0].get('Id');  
  227.                 if (ctiInId != 0) {  
  228.                     var editwin = Ext.create('Ext.app.ContentItemJKEditForm', { Id: ctiInId });  
  229.                     editwin.show();  
  230.                     Ext.getCmp("am-contentitemjkeditform").getForm().load(  
  231.                         {  
  232.                             url: "data/CtItemInterface/CtItemInterfaceInfo.aspx?param=selectById",  
  233.                             params: { Id: ctiInId },  
  234.                             waitTitle: "请等待",  
  235.                             waitMsg: "正在加载数据...",  
  236.                             success: function (form, action) {  
  237.   
  238.                             },  
  239.                             failure: function (form, action) {  
  240.                                 Ext.Msg.alert("提示""数据加载失败!");  
  241.                             }  
  242.                         });  
  243.                 }  
  244.             }  
  245.         };  
  246.         Ext.app.ContentItemJKGrid.superclass.initComponent.call(this);  
  247.     }  
  248. });  

 using System;

后台代码代码   收藏代码
  1. using System.Collections.Generic;  
  2. using System.Linq;  
  3. using System.Web;  
  4. using System.Web.UI;  
  5. using System.Web.UI.WebControls;  
  6. using CtManager.BLL;  
  7. using CtManager.Model;  
  8. using Newtonsoft.Json;  
  9.   
  10. public partial class Data_CtInterface_CtInterfaceInfo : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (Request["param"] == null)   
  15.         {  
  16.             Response.Write("");  
  17.             return;  
  18.         }  
  19.         string parameter = Request["param"];  
  20.         if (parameter == "select") Response.Write(doCtItemInterface());  
  21.         else Response.Write("");  
  22.     }  
  23.   
  24.   
  25.     /// 根据内容项Id内容项接口集合  
  26.     private string doCtItemInterface()  
  27.     {  
  28.         try  
  29.         {  
  30.             IList<CtItemInterface> ctItemInterface = CtItemInterfaceManager.GetAllCtItemInterfaces(Request["ctItemId"]);  
  31.             if (ctItemInterface == null) return "{total:0,items:[]}";  
  32.             string json = JavaScriptConvert.SerializeObject(ctItemInterface);  
  33.             return "{total:3,items:" + JavaScriptConvert.SerializeObject(ctItemInterface) + "}";  
  34.         }  
  35.         catch (Exception)  
  36.         {  
  37.               
  38.             return "{total:0,items:[]}";  
  39.         }  
  40.     }  
  41. }  
  

你可能感兴趣的:(function,String,header,ExtJs,button,autoload)