关于gridpanel带checkbox的实例

最新推荐文章于 2021-10-30 22:58:19 发布
最新推荐文章于 2021-10-30 22:58:19 发布
阅读量684 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangchaoily/article/details/9856515
版权

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<script type="text/javascript">
  Ext.QuickTips.init();
    (function () {

        var DeptStore = new Ext.data.JsonStore({
            root: 'Table',
            totalProperty: 'totalCount',
            baseParams: { start: 0, limit: 25, WardId: null },
            fields:
                    [
                      'dep_code', 'dep_name'
                    ],
            proxy: new Ext.data.HttpProxy({
                url: "../Location/GetDepartment"
            })
        });
        WardDepartmentWin = Ext.extend(Ext.Window, {
            id: 'DeptWardWin',
            title: '科室所属的病区',
            bqid: "",
            layout:"border",
            width: 600,
            height: 300,
            plain: true,
            maximizable: false,
            minimizable: true,
            closable: true,
            draggable: true,
            resizable: false,
            modal: true,
            closeAction: 'close',
            bodyStyle: 'padding:5px;',
            listeners: { "afterrender": function () {
                DeptStore.load();
            }},
            initComponent: function () {

                //通过病区获取该病区的所有科室
                var sm = new Ext.grid.CheckboxSelectionModel();
                this.items = [
                {
                          xtype:'grid',
                          id:'DeptGrid',
                          layout: 'form',
                          region:"center",
                          width: 800,
                          height: 300,
                          title: '请选择病区所关联的科室',
                          loadMask: true,
                          trackMouseOver: true,
                          sm: sm,
                          border: false,
                          store: DeptStore,
                          bbar: new Ext.PagingToolbar({
                              pageSize: 25,
                              store: DeptStore,
                              displayInfo: true,
                              displayMsg: '结果{0}-{1}到{2}',
                              emptyMsg: '没有可显示的结果'
                          }),
                          columns:
                          [
                             sm,
                             {
                                 header: 'ID',
                                 sortable: true,
                                 resizable: true,
                                 hidden: true,
                                 dataIndex: "dep_code",
                                 width: 150
                             },
                             {
                                 header: '科室名称',
                                 sortable: true,
                                 resizable: true,
                                 dataIndex: "dep_name",
                                 width: 300
                             }
                          ]
                }];
                this.buttons = [{
                    text: '保存',
                    iconCls: "icon-tick",
                    id: "savedept",
                    listeners: { "click": function () {
                        var s = Ext.getCmp("DeptGrid").getSelectionModel().getSelections();
                        var str = "";
                        if (s.length >= 0) {
                            for (var i = 0; i < s.length; i++) {
                                str = str + s[i].get('dep_code') + ",";
                            }
                        }
                        var bqid = Ext.getCmp("DeptWardWin").bqid;
                        str=str.substring(0,str.length-1);
                    
                        var requestConfig = {
                            url: '../Location/AddWardDepart',
                            params: { bqid: bqid, deptcode: str },
                            callback: function (options, success, response) {
                                if (success) {
                                    var info = Ext.decode(response.responseText);
                                    if (info._result == 'success') {
                                        Ext.Msg.alert('消息', '添加成功!');
                                        Ext.getCmp("DeptWardWin").close();
                                        return;
                                    }
                                    else {
                                        Ext.Msg.alert('消息', '添加失败!');
                                    }
                                }
                            }
                        }
                        Ext.Ajax.request(requestConfig);
                    
                    }
                    }
                }, {
                    text: "取消",
                    iconCls: "icon-cross",
                    handler: function () {
                        this.ownerCt.ownerCt.close();
                    }
                }]
                WardDepartmentWin.superclass.initComponent.call(this);
            }
        });

        AddWard = Ext.extend(Ext.Window, {
            id: 'MyWin',
            title: "添加病区",
            width: 900,
            height: 240,
            //hosp: "",
            isadd: true,
            plain: true,
            labelWidth: 100,
            maximizable: false,
            minimizable: true,
            closable: true,
            draggable: true,
            resizable: false,
            modal: true,
            closeAction: 'close',
            bodyStyle: 'padding:5px;',
            initComponent: function () {
                this.items = [
                   new Ext.form.FormPanel({
                       ref: "form",
                       border: false,
                       frame: true,
                       header: false,
                       defaultType: "textfield",
                       defaults: {
                           anchor: "80%"
                       },
                       items: [
                          {
                              fieldLabel: '病区名称',
                              id: 'bqmc',
                              name: 'bqmc'

                          }
                          ,
                          {
                              fieldLabel: '拼音码',
                              name: 'py',
                              id: 'pycode',
                              labelWidth: 130
                          },
                          {
                              fieldLabel: '五笔码',
                              name: 'wb',
                              id: 'wbcode',
                              labelWidth: 130
                          },
                         {
                             fieldLabel: '床位数',
                             name: 'cws',
                             id: 'bednum',
                             labelWidth: '60'
                         }
                        ]
                   })
                ],
                 this.buttons = [{ text: '确定',
                     iconCls: "icon-tick",
                     id: 'addLocation',
                     listeners: { "click": function () {
                         var bqmc = Ext.getCmp("bqmc").getValue();
                         var py = Ext.getCmp("pycode").getValue();
                         var wb = Ext.getCmp("wbcode").getValue();
                         var TOTALBED = Ext.getCmp("bednum").getValue();
                         var requestConfig = {
                             url: '../Location/AddWard',
                             params: { bqmc: bqmc, py: py, wb: wb, TOTALBED: TOTALBED },
                             callback: function (options, success, response) {
                                 if (success) {
                                     var info = Ext.decode(response.responseText);
                                     if (info._result == 'success') {
                                         Ext.Msg.alert('消息', '添加成功!');
                                         Ext.getCmp("MyWin").close();
                                         Ext.getCmp("grdWard").store.reload();
                                         return;
                                     }
                                     else {
                                         Ext.Msg.alert('消息', '添加失败!');
                                     }
                                 }
                             }
                         }
                         Ext.Ajax.request(requestConfig);

                     }
                     }
                 },
                 {
                     text: '取消',
                     iconCls: "icon-cross",
                     handler: function () { this.ownerCt.ownerCt.close(); }
                 }]
                AddWard.superclass.initComponent.call(this);
            }
        });

        WardListPanel = Ext.extend(Ext.Panel, {
            xtype: "panel",
            width: 551,
            height: 230,
            layout: "border",
            initComponent: function () {
                //获得医院的所有病区
                var WardStore = new Ext.data.JsonStore({
                    root: 'Table',
                    totalProperty: 'totalCount',
                    baseParams: { start: 0, limit: 25, searchType: null, name: null },
                    fields:
                    [
                      'ID', 'NAME', 'TOTALBED', 'HOSNO'
                    ],
                    proxy: new Ext.data.HttpProxy({
                        url: "../Location/GetHospWard"
                    })
                });
               var DeptWardStore=new Ext.data.JsonStore({
                   root: 'Table',
                   totalProperty: 'totalCount',
                   baseParams: { start: 0, limit: 25, searchType: null, name: null,wardid:null },
                   fields:
                    [
                      'dep_code', 'dep_name'
                    ],
                   proxy: new Ext.data.HttpProxy({
                       url: "../Location/GetWard_departments"
                   })
               });
                WardStore.load();
                var SourceData = [{ id: 0, display: "拼音" }, { id: 1, display: "五笔" }, { id: 2, display: "汉字"}]
                var sm = new Ext.grid.CheckboxSelectionModel({
                    singleSelect: false,
                    listeners: {
                        rowselect: function (sm, rowIndex, rec) {

                        },
                        rowdeselect: function (sm, rowIndex, rec) {

                        }
                    }
                });
                var SearchStore = new Ext.data.JsonStore({
                    data: SourceData,
                    fields: ['id', 'display']
                });
                this.items = [
                  {
                      id: "grdWard",
                      xtype: "grid",
                      title: "病区列表",
                      //height: 120,
                      region: "center",
                      loadMask: true,
                      trackMouseOver: true,
                      border: false,
                      sm: sm,
                      store: WardStore,
                      bbar: new Ext.PagingToolbar({
                          pageSize: 25,
                          store: WardStore,
                          displayInfo: true,
                          displayMsg: '数据结果 {0} - {1} 到 {2}',
                          emptyMsg: "没有可显示的结果"
                      }),
                      listeners: { "rowdblclick": function (d,v) {
                          var wardid=d.store.data.items[v].data.ID;
                          var frequency_store=Ext.getCmp("grdDeptWard").getStore();
                          frequency_store.baseParams.wardid=wardid;
                          frequency_store.load();
                      }},
                      tbar: new Ext.Toolbar([
                             {
                                 text: '添加病区',
                                 iconCls: 'icon-pageadd',
                                 handler: function () {
                                     //new AddWard();
                                     new AddWard().show();
                                 }
                             },
                             {
                                text:'取消病区',
                                iconCls:'icon-pagedelete',
                                handler:function(){
                                    var record = Ext.getCmp("grdWard").getSelectionModel().getSelected();
                                    if(record && record.data)
                                    {
                                       var id=record.data.ID;
                                       var requestConfig = {
                                           url: '../Location/CancelWard',
                                           params: { wardid: id },
                                           callback: function (options, success, response) {
                                               if (success) {
                                                   var info = Ext.decode(response.responseText);
                                                   if (info._result == 'success') {
                                                       Ext.Msg.alert('消息', '取消成功!');
                                                       Ext.getCmp("grdWard").store.reload();
                                                       return;
                                                   }
                                                   else {
                                                       Ext.Msg.alert('消息', '取消失败!');
                                                   }
                                               }
                                           }
                                       }
                                       Ext.Ajax.request(requestConfig);
                                    }
                                    else {
                                         Ext.Msg.alert("消息", "请先选择一条数据");
                                    }
                                }
                             },
                             {
                                 text: '关联科室',
                                 //disabled: datas == 1 ? true : false,
                                 iconCls: 'icon-pageadd',
                                 handler: function () {
                                     var record = Ext.getCmp("grdWard").getSelectionModel().getSelected();

                                     if (record && record.data) {
                                         var id = record.data.ID; //病区ID
                                       
                                         new WardDepartmentWin({ bqid: id }).show();
                                     }
                                     else {
                                         Ext.Msg.alert("消息", "请先选择一条数据");
                                     }
                                 }
                             },
                             "-",
                            { xtype: 'label', text: '区域名称' }, { xtype: 'textfield', id: 'txtterm', width: 80 },
                             "-",
                            {
                                text: '区域搜索', iconCls: 'icon-search', handler: function () {
                                    //var termsearch = Ext.getCmp("txtterm").getValue();
                                    alert('搜索');
                                }
                            },
                          '-'
                          ]),
                      columns: [
                              {
                                  header: "编号",
                                  sortable: true,
                                  resizable: true,
                                  hidden: true,
                                  dataIndex: "ID",
                                  width: 150
                              },
                             {
                                 header: "区域名称",
                                 sortable: true,
                                 resizable: true,
                                 dataIndex: "NAME",
                                 width: 280
                             },
                             {
                                 header: "床位数",
                                 sortable: true,
                                 resizable: true,
                                 dataIndex: "TOTALBED",
                                 width: 100
                             },
                              {
                                  header: "医院编码",
                                  sortable: true,
                                  resizable: true,
                                  dataIndex: "HOSNO",
                                  width: 80
                              }
                        ]
                  },
                      {
                          id: "grdDeptWard",
                          xtype: "grid",
                          title: "病区科室",
                          height: 250,
                          region: "south",
                          loadMask: true,
                          trackMouseOver: true,
                          border: false,
                          store: DeptWardStore,
                          bbar: new Ext.PagingToolbar({
                              pageSize: 25,
                              store: DeptWardStore,
                              displayInfo: true,
                              displayMsg: '结果 {0} - {1} 到 {2}',
                              emptyMsg: "没有可显示的结果"
                          }),
                          tbar: new Ext.Toolbar([
                           {
                               text: '取消科室',
                               id: 'ProcessSnomedCTCN',
                               iconCls: 'icon-pageedit',
                               handler: function () {
                                   var record = Ext.getCmp("grdDeptWard").getSelectionModel().getSelected();

                                   if (record && record.data) {
                                       //删除病区所关联的科室
                                       var dep_code=record.data.dep_code;
                                       var requestConfig = {
                                           url: '../Location/CancelDepartment',
                                           params: { dep_code:dep_code },
                                           callback: function (options, success, response) {
                                               if (success) {
                                                   var info = Ext.decode(response.responseText);
                                                   if (info._result == 'success') {
                                                       Ext.Msg.alert('消息', '取消成功!');
                                                       Ext.getCmp("grdDeptWard").store.reload();
                                                       return;
                                                   }
                                                   else {
                                                       Ext.Msg.alert('消息', '取消失败!');
                                                   }
                                               }
                                           }
                                       }
                                       Ext.Ajax.request(requestConfig);
                                   }
                                   else {
                                       Ext.Msg.alert("消息", "请先选择一条数据");
                                   }
                               }
                           },
                               { xtype: 'label', text: '搜索方式:' },
                                { xtype: 'combo', id: 'cbsource', //typeAhead: true,
                                    triggerAction: 'all',
                                    mode: 'local',
                                    emptyText: '--请选择--',
                                    store: SearchStore,
                                    value: '',
                                    width: 130,
                                    valueField: 'id',
                                    displayField: 'display',
                                    selectOnFocus: true
                                }, "-",
                                {
                                    xtype: 'label', text: '搜索名称：'
                                },
                               {
                                   xtype: 'textfield', id: 'searchname', width: 200
                               },
                              {
                                  text: '搜索', iconCls: 'icon-search', handler: function () {
                                      //过滤科室数据
                                  }
                              }
                            ]),
                          columns: [
                              {
                                  header: "编号",
                                  sortable: true,
                                  resizable: true,
                                  dataIndex: "dep_code",
                                  width: 150
                              },
                               {
                                   header: "名称",
                                   sortable: true,
                                   resizable: true,
                                   dataIndex: "dep_name",
                                   width: 280
                               }
                         ]
                      }
          ]
                WardListPanel.superclass.initComponent.call(this);
            }
        })

        return WardListPanel;
    })();
</script>

wangchaoily
关注
sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突
xiaozhen0610的博客
08-03 205
gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', header: false, title: '条线列表', deferRowRender: false, ...
给GridPanel增加行复选框按钮
蚂蚁筑巢
01-21 2733
大家都知道GridPanel是一个非常好用的控件，但是没有像C#一样的自定义的复选框。那我们就手工给它加一个复选框列，并实现全选清除获取选中的数据。以下GridPanel简称GP。 1.首先在GP的Store里面增加一个是否选中的字段源：。因为不用数据库返回，所以直接设置默认值为0，不选中。 2.在GP的ColumnModel里，增加我们的第一行复选框： 。 3.实现点击复选框的时候界面能够
EditorGridPanel 中使用checkbox列，并包含afterEdit事件
qimo601的专栏
04-12 267
    在EditorGridPanel中无法使用默认的CheckBox控件，因此采用第三方扩展的控件实现，     以下是Ext.grid.CheckColu扩展类： Ext.grid.CheckColumn = function(config){ Ext.apply(this, config); if (!this.id) { this.id = Ex...
ExtJS4 grid添加复选框（checkbox）列
祥子的博客
08-23 4249
效果图： 方法一：添加属性 selType: 'checkboxmodel', 方法二： selModel : Ext.create('Ext.selection.CheckboxModel', { mode : "SIMPLE", width:100 }),
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的实现办法
Jarry的专栏
02-17 2669
Ext.define('AM.view.test.ReceiptList', { extend: 'Ext.grid.Panel', alias: 'widget.receiptlist', id : 'receiptlist', selModel : { selType : 'checkboxmodel', mode : 'SIMPLE', checkOnl
ExtJs之gridPanel实例
idomyway的博客
11-25 405
需求完整的extjs自定义实例（没有异步加载数据）效果图代码：Ext.define('dxgx.applyApprovalGrid', { extend : 'Ext.grid.Panel', requires : [''],//多继承，一般继承数据模型 columnLines: true,//列的间隔线 multiSelect: true, selModel
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
10-26
7. 将这个checkboxgroup添加到customMadePanel的items中，并将customMadePanel实例化。 需要注意的是，这种实现方式在生成大量checkbox组件时可能会影响性能。在实际应用中，可以通过优化循环逻辑或者异步生成和...
extjs4如何自动生成掌握grid的列显示、隐蔽的checkbox_.docx
12-05
通过`Ext.define`定义一个名为`CustomMadePanel`的类，该类继承自`Ext.form.Panel`，并在其中创建一个CheckboxGroup实例。CheckboxGroup的配置项包括`fieldLabel`、`columns`和`items`等。 ```javascript Ext....
ExtJS4.2源码+实例
03-12
2. **Checkbox全选**：在ExtJS的GridPanel中，可以轻松实现复选框的选择功能，包括全选和反选操作，这对于数据操作和批量处理非常有用。 3. **动态选择显示哪些列**：用户可以根据需要动态隐藏或显示表格的列，这种...
extjs实例~~~
12-26
`GridPanel_checkbox_分页例子.txt`很可能包含了一个示例，展示了如何在GridPanel中添加复选框选择功能，并结合分页控件实现数据的分页显示。 2. **Ext.data.Store**: Store 是EXTJS中用于存储和管理数据的类。它...
EXT.NET-GridPanel
Guog
05-17 2760
本文介绍了Ext.NET中GridPanel一个较为完整的例子，并进行了详细说明，包括页面布局、新建、编辑、查询、删除、排序、分组、统计等功能。
MFC Grid-------CGridCellCombo实例
u011269801的专栏
10-30 843
添加一行的时候： int nTempRow = m_Grid.GetRowCount(); int nRow = m_Grid.InsertRow(L""); m_Grid.SetCellType(nRow, 1, celltypeCheckBox); m_Grid.SetCellType(nRow, 2, celltypeCombo); m_Grid.SetItemText(nRow, 3, L"测试"); CStringArray options; op...
考虑励磁控制系统的水热两区互联电力系统网络自动生成控制simulink.rar
最新发布
10-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Ext GridPanel实例：数据展示与弹窗操作
2. `width` 和 `height` - 设置GridPanel的大小为360x300像素，且带边框（frame）。 3. `RowSelectionModel` - 定义了单选行选择模式，用户只能选择一行，选中后会触发自定义的"rowSelect"事件。 4. `store: new Ext...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值