GridPanel （群组管理）

来源：互联网发布：手机麦克风测试软件编辑：程序博客网时间：2024/06/08 14:07

（实例图）

核心源码：

var cm = new Ext.grid.ColumnModel([{id:'id',header:'id',dataIndex:'id',hidden:true},{header:'img',dataIndex:'img',hidden:true},{header:'创建时间',dataIndex:'ctime',hidden:true},{header:'描述',dataIndex:'description',hidden:true},{header:'我的N群',dataIndex:'name',menuDisabled:true},{header:'在线情况',dataIndex:'currentpeople',menuDisabled:true}]);var store = new Ext.data.Store({           proxy : new Ext.data.ScriptTagProxy({url:'http://localhost:8080/pnote/group/list.action'}),           reader: new Ext.data.JsonReader({        //totalProperty: 'totalCount',               root: 'groups',                     id: 'post_id'            },[                'id','img','ctime','description','name','currentpeople'               ])           }); store.load();   //store.load({params:{start:0, limit:10}});    var grouppanel = new Ext.grid.GridPanel({    //title:"我的群组",cm:cm,store:store,viewConfig: {               forceFit:true   },tbar: new Ext.Toolbar({  autoWidth:true,  autoShow:true,  items : [{                  text : '搜索群组',                handler: function() {},                iconCls:'searchgroup'              }, {                  xtype : "tbseparator"              }, {                  text : "退出群组",                handler: function() {                if (grouppanel.getSelectionModel().hasSelection()) {                  Ext.Msg.confirm('信息', '确定要退出当前所选群组？', function (btn) {                              if (btn == 'yes') {                              var row = grouppanel.getSelectionModel().getSelected();                                                Ext.Ajax.request({     url:"http://localhost:8080/pnote/group/quitgroup.action?",    params:{         id:row.get("id")   },    success: function(resp,opts) {                 store.remove(row); //执行删除 },  failure: function(resp,opts) {  Ext.Msg.alert('错误', "服务器出错！！！");  }  });                                                          }else {                                                            }                  });                }else {                 Ext.Msg.alert("错误", "没有群组被选中，无法进行删除操作！");                }                },                iconCls : "deltegroup"   //图片样式, 需要自己寫css樣式,引入手寫的css,如果用自带会因为浏览器不兼容而不显示图片              }]  })  /*bbar: new Ext.PagingToolbar({ pageSize: 10,    store: store,    displayInfo: true,    displayMsg: '第{0} 到 {1} 条数据 共{2}条',    emptyMsg: "没有数据"   })*/});    grouppanel.addListener('rowcontextmenu', fnRightClick);   var rightMenu = new Ext.menu.Menu(       {           id: "UserMenu",           items:           [               {                   id: 'enter',                   icon: '../images/groupin.png', //图标文件                   handler: function() {                   if (grouppanel.getSelectionModel().hasSelection()) {                      var url = "http://localhost:8080/pnote/group/ingroup.action?id="                   var row = grouppanel.getSelectionModel().getSelected();                   url += row.get("id");                   window.open(url);                   }                                      },                   text: '进入群组'               },               {                   id: 'property',                   icon: '../images/groupp.png', //图标文件                   handler: function() {},                   text: '群组详情'               }           ]       });   ///右键菜单   function fnRightClick(grouppanel, rowIndex, e) {       grouppanel.getSelectionModel().selectRow(rowIndex);       e.preventDefault();       rightMenu.showAt(e.getXY());   };

返回JSON数据：

stcCallback1001({groups:[{img:'null',id:1,ctime:'2012-08-16 00:00:00.0',description:'这是一个学习java的好地方',name:'java群组',currentpeople:'0/1'},{img:'null',id:2,ctime:'2012-08-09 00:00:00.0',description:'这是学习C++ 最好的群组',name:'C++群组',currentpeople:'0/1'},{img:'null',id:3,ctime:'2012-08-01 00:00:00.0',description:'教你如何养猪',name:'养猪群组 ',currentpeople:'0/1'},{img:'null',id:4,ctime:'2012-08-17 00:00:00.0',description:'教你如和作词啊',name:'做菜群»„',currentpeople:'0/1'}]})

（stcCallback1001是一个标志）

前台请求情况：