extjs4中的grid用法

Ext.onReady(function(){
	Ext.QuickTips.init();//标准初始化
	//创建表格时要用表格的面板
	var grid=Ext.create('Ext.grid.Panel',{
		title:'grid_demo',//标题
		frame:true,//面板渲染
		//forceFit:true,//自动填充panel空白处
		width:600,
		height:280,
		columns:[//列模式
		          {text:"编号",dataIndex:'num',width:100,align:'center'},
				  {text:"姓名",dataIndex:'name',width:100,align:'center'},
				  {text:"邮箱",dataIndex:'email',width:200,align:'center',
						field:{
							xtype:'textfield',
							allowBlank:false
						}//允许编辑
					},
					{text:'出生日期',
					 xtype:'datecolumn',
					 width:100,
					 dataIndex:'birthday',
					 format:'Y年m月d日',
					 align:'center'
					},
					{text:'是否从事IT行业',dataIndex:'isIt',align:'center',
					 xtype:'booleancolumn',width:100,
					 trueText:'是',
					 falseText:'不是'
					},
					{text:'收入',dataIndex:'deposit',align:'center',format:'0.000'},
					//信息描述
					{text:'描述',xtype:'templatecolumn',align:'center',
					 tpl:'姓名是{name} 邮箱是:{email}',
					 width:200
					}
		         ],
		tbar:[{xtype:'button',text:'添加',iconCls:'table_add'},//工具栏
			  {xtype:'button',text:'删除',iconCls:'table_remove',
				handler:function(o){
//				var g=o.findParentByType('gridPanel');获取grid方式一
				var g=o.ownerCt.ownerCt;//方式二
				var data=g.getSelectionModel().getSelection();
				if(data.length==0)
					{
						Ext.Msg.alert("提示","你至少选择一条数据");
					}
				else
					{
					//1.先得到ID的数据(name)
						var st=g.getStore();
						var ids=[];
						Ext.Array.each(function(record){
							ids.push(record.get('name'));
						});
					//2.后台操作delete
						Ext.Ajax.request({
							url:'/gs_mes/extjs!getUserList',
							params:{ids:ids.join(",")},
							method:'POST',
							timeout:2000,
							success:function(response,opts){
								Ext.Array.each(data,function(record){
									st.remove(record);//前台删除			
								});
							}
						});
					}
				//alert(g.getStore().getCount());
				}
			  },
			  {xtype:'button',text:'修改',iconCls:'table_edit'},
			  {xtype:'button',text:'查询',iconCls:'table_comm'}
		     ],
		dockedItems:[{//分页
			xtype:'pagingtoolbar',
			store:Ext.data.StoreManager.lookup('s_user'),
			dock:'bottom',//定位
			displayInfo:true
		}],
		plugins:[
					Ext.create("Ext.grid.plugin.CellEditing",{		//单元格编辑
						clickToEdit: 1	//点击几次可以编辑
					})
				],
		selType:'checkboxmodel'	,					//实现多选框
		multiSelect:true,							//实现多选功能
		renderTo:'gridDemo',//渲染到一个div上
		store:Ext.data.StoreManager.lookup('s_user')
	});

});

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值