ExtJs 4.1 GridPanel学习

最新推荐文章于 2019-07-03 16:55:51 发布

老鼠的猫

最新推荐文章于 2019-07-03 16:55:51 发布

阅读量709

点赞数

CC 4.0 BY-SA版权

分类专栏： java

本文链接：https://blog.youkuaiyun.com/jing52hao/article/details/12994137

java 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用ExtJS 4.1创建一个用户列表Grid面板，展示用户信息。默认情况下，面板中的操作按钮处于禁用状态，只有在用户点击某一行后，操作才变为可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function getUserGridPanel(){
	var userGridPanel = Ext.getCmp('userGridPanel');
	if(!userGridPanel){
		userGridPanel = Ext.create('Ext.grid.Panel',{
			id:'userGridPanel',
			title:'用户列表',
			closable:false,
			loadMask:true,
			store: getUserGridStore(),
		    columns: [
		        {xtype: 'rownumberer'},
		        { header: '用户名',  width:150, align:'center', dataIndex: 'userForm.userName' },
		        { header: '用户全名', width:200,align:'center',dataIndex: 'userForm.userFullName'},//flex: 1  
		        { header: '性别', width:80,align:'center',dataIndex: 'userForm.userSex',
		        	renderer:function(sex){
		        		if(sex == '1'){
		        			return '男';
		        		}else {
		        			return '女';
		        		}
	            	 }
		        }
		        { header: '部门', width:150,align:'center',dataIndex: 'userForm.department.departmentFullName'},
		        { header: '职位', width:150,align:'center',dataIndex: 'userForm.post.postName' }
		    ],
		    selModel:new Ext.selection.RowModel({
		    	listeners:{
		    		selectionchange:function(selectModel,selections,opts){
		    			if (selections.length) {
		    				Ext.getCmp('updateUserOID').enable();
		    			}else {
		    				Ext.getCmp('updateUserOID').disable();
		    			}
		    			
		    		}
	    		}	
		    }),
		    layout:'fit',
		    renderTo: Ext.getBody(),
		    viewConfig: {
		    	forceFit:true,
	            scrollOffset: 2 
		    },
		    dockedItems: [{
                xtype: 'toolbar',
                items: [{
                	text:'刷新',
		    		tooltip:'刷新',
		    		iconCls:'refreshIconCls',
		    		handler: function(){
		    			Ext.getCmp('userGridPanel').getStore().load();
		    		}
                },'-',{
                    text: '添加用户',
                    id:'addUserOID',
		    		iconCls:'addIconCls',
                    handler: function(){
                    	getUserWindow(false).show();
                    }
                },'-',{
                	text: '修改用户',
                	id:'updateUserOID',
                	disabled: true,
		    		iconCls:'editIconCls',
                    handler: function(){
                    	getUserWindow(true).show();
                    }
                },'-',{
                    text: '删除用户',
		    		iconCls:'deleteIconCls',
                    id:'deleteUserOID',
                    handler: function(){
                    	var selections = Ext.getCmp('userGridPanel').getSelectionModel().getSelection();
						if(selections.length == 0){
							Ext.MessageBox.show({ 
								 title:"提示",
								 msg:"请先选择您要操作的行!"
							 });
							 return;
						}else {
	                    	Ext.MessageBox.show({
	        					title:'警告',
	        					msg:'删除用户信息,确认执行此操作吗?',
	        					buttons:Ext.MessageBox.OKCANCEL,
	        					fn:function(btn){
	        						if (btn=='ok'){
        								var userNameArray = [];
        								for(var index = 0,record;record=selections[index];index++){
        									userNameArray.push(record.get('userForm.userName'));
        								}
        								Ext.Ajax.request({
        									url:basePath+'/user/deleteUser.action',
        									method:'POST',
        									params:{userNameArray:userNameArray},
        									success:function(response,options){
        										Ext.getCmp('userGridPanel').getStore().load();
        									},
        									failure:function(response,options){
        										var msg = response.responseText;
        										showServerError(msg);
        									}
        								});
	        						}
	        					}
	        				});
						}
                    }
                }]
            },{
            	xtype: 'pagingtoolbar',
		        store:getUserGridStore(),
		        dock: 'bottom',
		        displayInfo: true
            }],
		    listeners:{
		    	render:function(){
		    		getUserGridStore().load();
		    	},
		    	itemcontextmenu:function(grid,record,item,rowIndex,event,opts){
					event.preventDefault();
					var selectModel=grid.getSelectionModel();
					selectModel.select(record,true);
					if(currentUserName == 'admin'){	
						var userMenu = getUserMenu();
						userMenu.showAt(event.getXY());
					}
				},
				itemdblclick:function(grid,record,item,rowIndex, event,opts){
					//alert('双击');
				}
		    }
		});
	}
	return userGridPanel;
}

这是一个用户列表Grid面板，显示用户列表，默认按钮不可操作，点击行之后允许操作。

界面效果：