项目中最常用的就是GridPanel,现有一个简单样例，但是有个bug在左边树菜单收缩
时gridpanel不能自己的伸缩。代码如下
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';//本地加载图片
////////////////////////////////////////////////////////////////////////
/**树种选择相关数据-begin*/
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//顶端工具栏
/**树种选择store*/
var jixian_linmu_swfc_store = new Ext.data.JsonStore({
url : '',/**请求用户数据库*/
totalProperty : 'totalProperty',
root : 'jxlm_csfc',
fields : [/**用到的json域*/
{
name:'carbon_level_id'
},
{
name:'lfpjmjxjl'
},{
name:'swl_cs_a'
},{
name:'swl_cs_b'
},{
name:'swl_cs_c'
},{
name:'ds_dx_rate'
},{
name:'carbon_i_area'
},{
name:'year_after_pro'
}]
});
/**工具栏*/
var topBar = new Ext.Toolbar([
{
text : '添加碳层参数',
tooltip : '添加树种参数',
iconCls : 'addnews',
scope : this,
handler : function() {
var add_top = new Ext.FormPanel({
url : '', /**增加树种参数提交数据URL*/
labelAlign : 'right',
frame : true,
title : '添加碳层参数',
bodyStyle : 'padding:5px 5px 0',
items : [
{
xtype : 'textfield',
fieldLabel : '林分平均单位面积蓄积量',
allowBlank : false,
name : 'lfpjmjxjl',
width:250
},
{
xtype : 'textfield',
fieldLabel : '生物量参数a',
allowBlank : false,
name : 'swl_cs_a',
width:180
},{
xtype:'textfield',
fieldLabel : '生物量参数b',
allowBlank : false,
name:'swl_cs_b',
width:180
},{
xtype:'textfield',
fieldLabel : '生物量参数c',
allowBlank : false,
width:180,
namne:'swl_cs_c'
},{
xtype:'textfield',
fieldLabel:'树种林木地下/地上生物量比',
allowBlank : false,
width:180,
namne:'ds_dx_rate'
},{
xtype:'textfield',
fieldLabel:'基线碳层面积',
allowBlank : false,
width:250,
namne:'carbon_i_area'
},{
xtype:'textfield',
fieldLabel:'项目开始后的年数',
allowBlank : false,
width:250,
namne:'year_after_pro'
}
],
buttons : [{
text : '提交',
formBind : true,
handler : function() {
add_top.getForm().submit({
method : 'POST',
waitTitle : '连接',
waitMsg : '消息发送中...',
success : function() {
Ext.Msg.alert('状态', '提交成功!',
function(btn, text) {
if (btn == 'ok') {
jixian_linmu_swfc_store.removeAll();
jixian_linmu_swfc_store.reload();
treewind.destroy();
}
});
},
failure : function(form, action) {
Ext.Msg.alert('状态', '添加碳层参数添加失败!');
add_top.getForm().reset();
}
});
}//end_handler
}, {
text : '取消',
handler : function() {
tree_papameter_wind.destroy();
}
}]
});
/**弹出窗口*/
var tree_papameter_wind = new Ext.Window({
id : 'treewind',
height: 450,
width: 450,
closable : true,
resizable : false,
plain : true,
border : false,
monitorValid : true,
modal : true,
autoScroll:'true',
items : [add_top]
});
tree_papameter_wind.show();
}
}//
, '-', {
text : '修改碳层参数',
tooltip : '修改碳层参数',
iconCls : 'deletenews',
scope : this,
handler : function() {
var selectlog = grid.getSelectionModel().getSelected();
if (null == selectlog) {
Ext.MessageBox.alert('状态', '你没有选择要修改的碳层!');
} else {
var id = selectlog.get('carbon_level_id'); /**获取选择的树种id*/
var name = selectlog.get('carbon_level_id');/**获取选择的名称*/
var top = new Ext.FormPanel({
url : 'exam_editPaperName.action?id=' + id,
labelAlign : 'right',
frame : true,
title : '修改碳层参数',
bodyStyle : 'padding:5px 5px 0',
autoWidth:true,
items : [
{
xtype : 'textfield',
fieldLabel : '林分平均单位面积蓄积量',
allowBlank : false,
name : 'lfpjmjxjl',
width:250
},
{
xtype : 'textfield',
fieldLabel : '生物量参数a',
allowBlank : false,
name : 'swl_cs_a',
width:180
},{
xtype:'textfield',
fieldLabel : '生物量参数b',
allowBlank : false,
name:'swl_cs_b',
width:180
},{
xtype:'textfield',
fieldLabel : '生物量参数c',
allowBlank : false,
width:180,
namne:'swl_cs_c'
},{
xtype:'textfield',
fieldLabel:'树种林木地下/地上生物量比',
allowBlank : false,
width:180,
namne:'ds_dx_rate'
},{
xtype:'textfield',
fieldLabel:'基线碳层面积',
allowBlank : false,
width:250,
namne:'carbon_i_area'
},{
xtype:'textfield',
fieldLabel:'项目开始后的年数',
allowBlank : false,
width:250,
namne:'year_after_pro'
}
],
buttons : [{
text : '提交',
formBind : true,
handler : function() {
top.getForm().submit({
method : 'POST',
waitTitle : '连接',
waitMsg : '消息发送中...',
success : function() {
Ext.Msg.alert('状态', '修改名称成功!',
function(btn, text) {
if (btn == 'ok') {
jixian_linmu_swfc_store.removeAll();
jixian_linmu_swfc_store.reload();
treewind.destroy();
}
});
},
failure : function(form, action) {
Ext.Msg.alert('状态','修改树种失败!');
top.getForm().reset();
}
});
}//end_handler
}, {
text : '取消',
handler : function() {
treewind.destroy();
}
}]
});
var treewind = new Ext.Window({
id : 'treewind',
closable : true,
resizable : false,
plain : true,
border : false,
monitorValid : true,
modal : true,
items : [top]
});
treewind.show();
}
}
}, '-', {
text : '删除树种参数',
tooltip : '删除选中的树种参数',
iconCls : 'delete',
scope : this,
handler : function() {
var selectlog = grid.getSelectionModel().getSelected();
if (null == selectlog) {
Ext.MessageBox.alert('状态', '你没有选择要删除的树种参数!');
} else {
var id = selectlog.get('carbon_level_id');
Ext.MessageBox.confirm('确认删除',
'是否确认执行删除 ', function(btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url : 'exam_deletePaper.action?id='/**删除用户对应数据库中的树种*/
+ id,
method : 'POST',
success : function() {
jixian_linmu_swfc_store.removeAll();
jixian_linmu_swfc_store.reload();
Ext.Msg.alert('状态',
'删除成功!');
},
failure : function(result, action) {
Ext.Msg.alert('状态','删除失败!');
}
});
}
});
}
}
}, '-']);
var rowNum = new Ext.grid.RowNumberer(
{
header : "序号",
width : 50,
sortable:true
});
var colmodel = new Ext.grid.ColumnModel([
rowNum,{
header:"carbon_level_id",
dataIndex:'carbon_level_id',
hideable:false,
hidden:true
},{
header:"林分平均单位面积蓄积量",
dataIndex:'lfpjmjxjl',
sortable:true,
width:150
},{
header:"生物量参数a",
dataIndex:'swl_cs_a',
sortable:true,
width:80
},
{
header:"生物量参数b",
dataIndex:'swl_cs_b',
sortable:true,
width:80
},{
header:"生物量参数c",
dataIndex:'swl_cs_c',
sortable:true,
width:80
},{
header:"树种林木地下/地上生物量比",
dataIndex:'ds_dx_rate',
sortable:true,
width:180
},{
header:"基线碳层面积",
dataIndex:'carbon_i_area',
sortable:true,
width:80
},{
header:"项目开始后的年数",
dataIndex:'year_after_pro',
sortable:true,
width:80
}]);
var pagingBar = new Ext.PagingToolbar({
pageSize : 20,
store : jixian_linmu_swfc_store,
displayInfo : true,
displayMsg : '显示 {0} - {1} of {2}',
emptyMsg : "当前没添加有树种"
});
jixian_linmu_swfc_store.setDefaultSort('carbon_level_id', 'DESC');/**设置默认的排序方式*/
//gridpanel
var jixian_linmu_grid = new Ext.grid.GridPanel({
id : 'tree_type_grid',
store : jixian_linmu_swfc_store,
renderTo:'jixian_caiji',
colModel : colmodel,
selModel : new Ext.grid.RowSelectionModel(),
stripeRows : true,
height : 490,
tbar : topBar,
bbar : pagingBar
});
jixian_linmu_swfc_store.load({
params : {
start : 0,
limit : 20
}
});
});
效果如下
相关推荐
在"ExtJS增删改查"这个主题中，我们将深入探讨如何利用ExtJS进行CRUD（创建Create、读取Read、更新Update和删除Delete）操作，这是任何数据库驱动的应用程序中的基本功能。 首先，创建（Create）操作通常涉及创建新...
在“增删改查”场景下，我们通常会用到GridPanel（表格）和FormPanel（表单）。 - **GridPanel**: 用于展示数据集合，支持分页、排序、过滤等功能。在增删改查中，GridPanel可以显示数据库中的数据，用户可以通过它...
本文将深入探讨如何使用这两种技术实现Grid的增删改查功能，帮助新手理解ExtJS4与Struts2.1的交互机制。 首先，我们来看ExtJS4中的Grid组件。Grid是ExtJS中用于展示和管理数据的一种视图，它提供了一种灵活且可定制...
在"Ext左树有表格 增删改查"这个主题中，我们主要关注的是ExtJS如何实现左侧树形结构与右侧表格的交互，以及在这样的布局中进行数据的增、删、改、查操作。 首先，ExtJS中的树形组件（TreePanel）可以用来展示层级...
这个压缩包文件包含的示例和资源主要展示了如何利用ExtJS实现数据操作（增删改查）以及树形视图（TreePanel）的界面设计。 首先，"增删改查"（CRUD，Create、Read、Update、Delete）是任何数据驱动应用的基础功能。...
在这个例子中，Nhibernate被集成到ASP.NET MVC架构中，提供了数据的增删改查（CRUD）功能。ExtJS则是一个用于构建富客户端Web应用程序的JavaScript库，它的组件化特性使得创建复杂的用户界面变得轻松。 **...
在本文中，我们将深入探讨`treePanel`和`gridPanel`技术在页面上实现数据的增删改查功能。这两个组件是Ext JS框架中的核心组件，广泛用于构建数据驱动的用户界面。`treePanel`主要用于展示层级结构的数据，如文件...
这个"Extjs实现了增删改查（增加了动态树）上次升级版"项目，显然是利用ExtJS的功能来实现了一个完整的数据操作功能，包括添加、删除、修改和查询，同时还集成了一项新的特性——动态树视图。 动态树视图是ExtJS中...
"admin"可能是应用程序的管理界面目录，包含用于执行增删改查操作的EXT.NET控件，如GridPanel、FormPanel等。这些控件可以绑定到数据源，并通过EXT.NET的事件处理机制（如button的click事件）调用后台的C#方法执行...
6. **安全性考虑**：比如使用Spring Security进行权限控制，确保只有授权用户才能执行增删改查操作。 这个项目是一个很好的学习资源，展示了如何结合现代前端技术和后端框架实现一个完整的业务功能。通过研究和实践...
本文将深入探讨如何使用Ext JS来实现基本的数据增删改查（CRUD）操作，特别关注代码示例中的Store和GridPanel组件。 #### Store组件 在Ext JS中，`Store`是负责从服务器获取数据并存储这些数据的核心组件。通过...
总结来说，SSH+ExtJS实现的CRUD系统结合了Java后端的高效处理能力和JavaScript前端的用户体验优化，通过JSON进行数据交换，实现了对数据库中如“Student”这样的记录进行增、删、改、查的功能。这样的系统设计灵活且...
创建一个简单的GridPanel，并添加增删改查功能： ```javascript var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: 'api/users' } }); var grid = Ext.create('...
### ExtJS 增删改查操作详解 #### 一、引言 ExtJS 是一款强大的 JavaScript 框架，用于构建复杂的前端应用程序。通过利用其丰富的组件库和灵活的数据处理能力，开发者能够轻松实现数据的增删改查（CRUD）操作。本文...
在增删改查的应用中，GridPanel通常与Store组件配合使用，Store负责加载和管理数据。当用户进行操作时，如点击“新增”按钮，EXTJS会触发事件，然后通过Ajax请求将数据发送到服务器。 C#.NET作为后端语言，可以处理...
在本文中，我们将深入探讨如何使用ExtJS框架实现EditGrid中的增删改查操作。ExtJS是一个强大的JavaScript库，主要用于构建富客户端Web应用程序。EditGrid是ExtJS中用于展示和编辑表格数据的一种组件，它提供了丰富的...
标题“EXT经典例子（增删改查）”暗示了我们将探讨EXT在实现CRUD操作中的应用。CRUD代表创建（Create）、读取（Read）、更新（Update）和删除（Delete），这是任何数据库驱动应用的基础操作。EXT提供了直观且易于...
首先，让我们深入了解一下Ext中的"增删改查"（CRUD）操作。CRUD代表创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)，这是任何数据库应用的基础。在Ext中，我们通常会使用Store组件来处理这些操作。Store...
使用`Ext.grid.GridPanel`展示数据，配置`store`为你之前创建的`Store`，并定义`columns`来展示数据字段。你还可以添加编辑功能，例如使用`Ext.grid.EditorGridPanel`，使得用户可以直接在表格内编辑数据。 6. **...