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')
});
});
extjs4中的grid用法
最新推荐文章于 2023-01-30 16:56:49 发布