GridPanel （群组管理）

最新推荐文章于 2026-01-04 20:00:13 发布

原创最新推荐文章于 2026-01-04 20:00:13 发布 · 823 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #header #null #url #java #css

EXTJS 专栏收录该内容

2 篇文章

订阅专栏

本文整理了Java和C++学习相关的群组资源，包括群组名称、创建时间、成员数量等信息，方便学习者加入并获取最新学习资料。

（实例图）

核心源码：

	
	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是一个标志）

前台请求情况：