Ext.onReady(function(){
Ext.QuickTips.init();
Ext.define('Group', {
extend: 'Ext.data.Model',
fields: [
'groupId','name', 'contents'
]
});
var store_grid_group = Ext.create('Ext.data.Store', {
pageSize: 4,
model: 'Group',
remoteSort: true,
proxy: {
type:'ajax',
url:'../limits/listgroupbypage!listGroupByPage',
reader:{
type:'json',
root:'data',
totalProperty: 'totalCount'
},
simpleSortMode: true
},
autoLoad:true
});
var form = new Ext.FormPanel({
layout: {
type: 'vbox',
align: 'stretch'
},
frame: true,
border: false,
url: '../limits/saveqx!addGroup',
buttonAlign:'center',
bodyPadding: 10,
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
//默认元素属性设置
items: [{
name: 'name',
fieldLabel: '权限组名称',
allowBlank: false
},{
xtype: 'textareafield',
name:'contens',
fieldLabel: '权限组描述',
margins: '0',
allowBlank: false
}],
buttons:[{
text:'保存',
handler:function(){
if (this.up('form').getForm().isValid()) {
form.submit({
success: function(form, action) {
form.reset();
win.hide();
store_grid_group.load();
},
failure: function(form, action) {
Ext.Msg.alert('Failed');
}
});
}
}
},{
text:'放弃',handler:function(){
this.up('form').getForm().reset();
this.up('window').hide();
}
}]
})
var form_edit = new Ext.FormPanel({
layout: {
type: 'vbox',
align: 'stretch'
},
frame: true,
border: false,
url: '../limits/editgroup!updateGroup',
buttonAlign:'center',
bodyPadding: 10,
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
//默认元素属性设置
items: [{
name: 'groupId',
fieldLabel: '编号',
hidden: true
},{
name: 'name',
fieldLabel: '全选组名称',
allowBlank: false
},{
xtype: 'textareafield',
name:'contents',
fieldLabel: '权限组描述',
margins: '0',
allowBlank: false
}],
buttons:[{
text:'修改',
handler:function(){
if (this.up('form').getForm().isValid()) {
form_edit.submit({
success: function(form, action) {
form.reset();
win_edit.hide();
store_grid_group.load();
},
failure: function(form, action) {
Ext.Msg.alert('Failed');
}
});
}
}
},{
text:'放弃',handler:function(){
this.up('form').getForm().reset();
this.up('window').hide();
}
}]
})
var win = Ext.create('widget.window', {
layout:'fit',
title: '添加',
closable: false,
closeAction: 'hide',
width: 400,
minWidth: 350,
height: 300,
modal: true,
items: form
});
var win_edit = Ext.create('widget.window', {
layout:'fit',
title: '修改',
closable: false,
closeAction: 'hide',
width: 400,
minWidth: 350,
height: 300,
modal: true,
items: form_edit
});
//添加功能
var add=function(data){
win.show();
}
//删除功能
var del=function(o){
var grid=o.ownerCt.ownerCt;
var data=grid.getSelectionModel().getSelection();
if(data.length==0){
Ext.Msg.alert('提示','至少选一条');
}else{
Ext.MessageBox.confirm('确认', '确定要删除吗？',function(btn){
if(btn=='yes'){
var st=grid.getStore();
var ids=[];
Ext.Array.each(data,function(record){
ids.push(record.get('groupId'));
});
//传给后台
Ext.Ajax.request({
url:'../limits/delgroup!delGroup',
params:{ids:ids.join(',')},
method:'post',
timeout:2000,
success:function(){
st.remove(data);//删除选中的行
},
failure:function(){
Ext.MessageBox.alert("失败");
}
});
}
});
}
}
//修改功能
var edit=function(o){
var grid=o.ownerCt.ownerCt;
var data=grid.getSelectionModel().getSelection();
if(data.length!=1){
Ext.Msg.alert('提示','请选择一条记录');
}else{
var st=grid.getStore();
var ids=[];
Ext.Array.each(data,function(record){
ids.push(record.get('groupId'));
});
//form ajax加载数据
form_edit.getForm().load({
url:'../limits/getupdategroup!getUpdateGroup',
params:{ids:ids.join(',')},
method:'GET',
timeout:2000,
success:function(data){
win_edit.show();
},
failure:function(){
Ext.MessageBox.alert("失败");
}
})
}
}
var query=function(o){
var grid=o.ownerCt.ownerCt;
}
var columns=[
{header:'权限组名称',dataIndex:'name'},
{text:'权限组描述',dataIndex:'contents',width:100},
{
xtype:'actioncolumn',
items: [{
text:'权限',
icon:'../commons/img/btn_qx.png',
tooltip: '权限',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('groupId'));
}
}]
}
];
// create the Grid
var grid_group = Ext.create('Ext.grid.Panel',{
width:'100%',
region:"center",
forceFit:true,//true自动填充空白处，即宽度占满column的width会失效，默认false
columns:columns,
tbar:[
{xtype:'button',text:'添加',iconCls:'btn_new',handler:add},
{xtype:'button',text:'编辑',id:'btn_edit',iconCls:'btn_edit',handler:edit},
{xtype:'button',text:'删除',id:'btn_delete',iconCls:'btn_del',handler:del}
],
dockedItems:[{
xtype:'pagingtoolbar',
store:store_grid_group,//用于分页栏显示总条数，页数等信息
dock:'bottom',
displayInfo:true
}],
selType:'checkboxmodel',//添加复选框
multiSelect:true,//多选，默认单选
store:store_grid_group
});
var queryForm = new Ext.FormPanel({
border:false,
layout:'hbox',
height:10,
flex:1,//如果所在容器时vbox占满高，如果是hbox占满宽
height:35,
frame:true,
border:false,
items:[{
xtype:'textfield'
},{
text:'查询',handler:function(){alert('查询')},
xtype:'button'
}]
});
var vpanel=Ext.create('Ext.Panel', {
region:'north',
height:60,
layout: {
type: 'vbox',
align: 'left'
},
items: [{html:'当前位置',border:false,id:'path',height:28},queryForm]
});
var vp=new Ext.Viewport({
layout:"border",
items:[vpanel,grid_group]
});
})
分享到：
相关推荐
在“简单的增删改查”这个主题中，我们将探讨如何使用ExtJS实现数据管理的基本操作，包括添加（Add）、删除（Delete）、修改（Update）和查询（Query）。 首先，我们需要了解ExtJS的核心概念，如组件（Components）...
在"EXTJS net 增删改查示例"中，我们将探讨如何使用EXTJS与后端网络接口（通常基于.NET框架）进行数据交互，实现常见的CRUD（Create、Read、Update、Delete）操作。这些基本操作是任何数据库驱动的应用程序的核心...
本文将深入探讨如何使用这两种技术实现Grid的增删改查功能，帮助新手理解ExtJS4与Struts2.1的交互机制。 首先，我们来看ExtJS4中的Grid组件。Grid是ExtJS中用于展示和管理数据的一种视图，它提供了一种灵活且可定制...
根据题目给出的信息，本文主要围绕Extjs中的表格组件（Grid）展开，介绍如何通过Grid实现对数据的增删改查功能。下面将分别针对各个功能点进行深入探讨。 #### 三、Extjs Grid组件配置详解 1. **初始化配置** - `...
#### 一、ExtJS Grid的增删改查功能概述 在ExtJS框架中，Grid是一个非常关键的组件，主要用于展示表格数据，并支持数据的增删改查等基本操作。对于大多数Web应用程序而言，这种功能几乎是不可或缺的。下面我们将...
ExtJs 提供了多种组件用于实现增删改查的交互，如`Ext.form.Panel`用于创建表单，`Ext.grid.Panel`用于显示和编辑表格数据，以及`Ext.toolbar.Toolbar`用于添加操作按钮如“新增”、“编辑”、“删除”。...
在这个"EXTJS4+STRUTS2+JAVA增删改查"的例子中，我们将深入探讨这三个技术如何协同工作，实现数据的动态管理。 EXTJS4是一个强大的JavaScript库，主要用于创建桌面级的Web应用程序。它提供了丰富的组件库，如表格、...
在"extjs做的增删改查"项目中，ExtJS负责前端展示和用户交互，而Struts2则负责后端业务逻辑处理和与数据库的交互。以下是关于这个主题的一些详细知识点： 1. **ExtJS组件**： - 表格（Grid）：用于显示和编辑数据...
在"extjs完成用户增删改查"这个场景中，我们主要关注的是如何利用ExtJS 4.0实现数据管理的基本功能，包括添加（Add）、删除（Delete）、修改（Edit）和查询（Query）用户信息。下面将详细介绍这些知识点： 1. **...
1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页，数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全，加载即可运行 5.VX：humingxing可随时交流
在与数据库进行交互时，ExtJS 通常结合服务器端的技术，如PHP、Java、ASP.NET等，实现数据的增删改查操作。下面我们将详细探讨这个主题。 一、ExtJS 数据模型（Model） 在ExtJS中，数据模型（Model）是表示应用...
在“extjs实现增删查改”这个主题中，我们将探讨如何使用ExtJS来实现基本的数据操作功能。 首先，增删查改（CRUD，Create, Read, Update, Delete）是任何数据管理应用的核心功能。在ExtJS中，我们可以利用Grid ...
- **Grid Panel**：在实现增删改查功能时，ExtJS的Grid Panel是核心组件，用于显示和编辑表格数据。它支持分页、排序、过滤和列宽调整等特性。 - **Form Panel**：用于创建和编辑记录，通常包含各种输入字段如...
在"ssh+extjs4.0grid增删改查"这个主题中，我们将深入探讨如何将SSH框架与Ext JS 4.0 Grid集成，实现数据的CRUD（Create, Read, Update, Delete）功能。 1. **Struts2整合Hibernate**： - 配置Struts2-Hibernate...
在这个"Extjs增删改查示例"中，我们将探讨如何使用ExtJS与etmvc（一个基于ExtJS的MVC模式扩展）和MySQL数据库配合，实现Web应用中的基本数据操作。 首先，ExtJS的MVC模式是其架构的核心部分，它将应用程序分为Model...
接下来 在mysql里建立 数据库位ext的库 再去项目中 src/META-INF/persistence.xml的配置文件里吧<!-- <property name="hibernate.hbm2ddl.auto" value="update" /> -->这句话的注释去掉 好了 部署项目到tomcat上 ...
本项目"Extjs_SpringMvc增删改查（自动搜索）"就是这样一个示例，展示了如何使用这两者进行数据操作和搜索功能。 首先，我们来看ExtJS在前端的角色。ExtJS提供了一套完整的组件模型，包括表格（Grid）、表单（Form...
在这个“extjs 增删改查”的主题中，我们将深入探讨如何利用ExtJS框架、JSON数据格式以及JDBC（Java Database Connectivity）来实现数据的增删改查功能，并带有分页显示。 首先，让我们了解ExtJS中的基础组件。`Ext...
总结来说，SSH+ExtJS实现的CRUD系统结合了Java后端的高效处理能力和JavaScript前端的用户体验优化，通过JSON进行数据交换，实现了对数据库中如“Student”这样的记录进行增、删、改、查的功能。这样的系统设计灵活且...