在Extjs 4.0中，实现 行选择、行编辑很简单，但是checkboxmodel 和 rowediting插件组合存在一个对齐的bug。
在线demo:http://extjshelp.sinaapp.com/rowedit/
grid + checkboxmodel 的显示效果如下：
双击编辑一行：
注意到，编辑器没有和grid表头对齐。原因就是我们加了一列checkbox。这是Extjs 4.0 的bug，rowediting 插件和checkboxmodel组件之间没有配合好。
解决方法，让item项的编辑器往右边"挤一挤":
{text:'Item',dataIndex:'item',editor:{ margin:'0 0 0 22 ' }},
现在看起来整齐了：
完整的代码：
Ext.onReady(function(){
var store = {
type:'array',
fields:["item","price"],
data:[
["Steve Bible",0.99],
["Steve Bible",0.99],
["Steve Bible",0.99],
["Steve Bible",0.99]
]
}
var checkmodel = Ext.create('Ext.selection.CheckboxModel')
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 2,
autoCancel: false
})
var grid = Ext.create("Ext.grid.Panel",{
store:store,
plugins: [rowEditing],
selModel:checkmodel,
columns:[
{text:'Item',dataIndex:'item',editor:{ margin:'0 0 0 22 ' }},
{text:'Price',dataIndex:'price',editor:{type:'numberfield'}},
],
region:'center'
})
Ext.create('Ext.container.Viewport',{
layout:'border',
items:[
grid
]
})
})
<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
- 大小: 6.4 KB
- 大小: 6.5 KB
- 大小: 6.8 KB
分享到：
相关推荐
Ext各种组件的使用实例，Extjs tree+grid+form+panel 使用实例
本项目使用了`extjs4`作为前端框架，`structs2`作为MVC Web应用框架，`spring`处理业务逻辑和依赖注入，以及`hibernate`作为ORM（对象关系映射）工具，来搭建一个完整的后台系统。下面将详细介绍这四个技术及其在...
ExtJS4是一个强大的JavaScript库，专门用于构建富客户端的Web应用程序。...总的来说，"Extjs4+MVC+struts2后台管理系统"结合了现代前端技术与成熟的后端框架，提供了一种高效、可扩展的解决方案来构建企业级的Web应用。
ExtJS Grid是一款强大的JavaScript数据网格组件，常用于构建数据密集型Web应用，提供丰富的功能，如排序、分页、过滤、编辑等。在"Extjs Grid+asp.net+json Demo"中，我们将探讨如何结合ExtJS Grid、ASP.NET以及JSON...
标题 "Extjs + Spring MVC + hibernate + mysql" 涉及的是一个综合性的Web应用程序开发框架，结合了前端UI库、后端MVC框架、ORM工具和关系型数据库。让我们详细了解一下这些技术及其在实际项目中的应用。 1. ExtJS...
ExtJS4是一个强大的JavaScript框架，主要用于构建富客户端的Web应用程序。它提供了丰富的组件库，包括各种用户界面元素，如表格、窗体、面板等。在"Extjs4登录功能+验证码+struts2"这个主题中，我们将深入探讨如何...
Extjs4.0终极教程+案例源码(超详细，针对4.0) 目前最为卓越的4.0教程，还附加案例源码。白~吃，也能学会用extjs做页面
ExtJs + Struts2 + JSON 是一种常见的前端与后端数据交互的技术组合，常用于构建富客户端应用。这里我们详细探讨一下这三个技术组件以及它们如何协同工作。 首先，ExtJs 是一个JavaScript库，用于创建复杂的、用户...
在IT行业中，构建Web应用程序是常见的任务，而“ExtJS4+JSON+Servlet(Struts2)实现登录验证”是一个典型的前端与后端交互的场景。这个主题涉及到几个关键的技术点，我们将逐一深入探讨。 首先，ExtJS4是一个流行的...
EXTJS4+MVC+JSP-buy360用户管理系统源码是一款基于EXTJS4、MVC架构和JSP技术开发的用户管理平台。EXTJS4是一个强大的JavaScript库，提供了丰富的用户界面组件和数据绑定机制，用于构建富互联网应用程序（RIA）。MVC...
标题 "extjs4 + servlet + json + soundmanager2 实现定时刷新报警" 涉及的是一个基于Web的实时报警系统开发技术，其中包含了多个关键组件和技术。让我们逐一深入探讨这些知识点。 1. **EXTJS4**：EXTJS是一个用...
ExtJS4是一个强大的JavaScript框架，用于构建富客户端Web应用程序。这个实例结合了多个技术，包括Accordion布局、Servlet、Struts2以及JSON数据交互，以及Ext.tree.Panel组件，以创建一个功能丰富的用户界面。 ...
《基于Extjs、SpringMVC和MyBatis的财务管控系统构建详解》 在现代企业信息化建设中，财务管控系统的构建至关重要，它能够帮助企业高效管理财务数据，提高运营效率，确保财务安全。本文将深入探讨如何利用Extjs、...
在"EXT_ASP.rar_asp extjs_extjs_extjs asp_extjs+asp"这个压缩包中，我们可以看到EXTJS与ASP结合使用的示例，用于开发一个通讯录程序，这是一个很好的学习EXTJS和ASP集成的实践项目。 首先，EXTJS的核心在于它的...
本文将深入探讨一个基于EXTJS4、SSH（Spring、Struts2、Hibernate）和MySQL数据库的假期管理系统，该项目旨在为小型企业提供高效且易用的假期管理解决方案。通过对这套系统的解析，我们可以了解到这些技术在实际开发...
EXTJS学习，webform+mvc routeing extjs布局 适合初学者
ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助
这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码：主要运用了一下的知识： 1、主要运用的后台框架是extjs， 2、jsp+hibernate+Struts2+spring+ajax+jQuery， 3、用到了Java面向对象的...
在给定的"Extjs4 grid使用例子"中，我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分，它提供了一个灵活的、可定制的数据展示网格，通常用于显示和操作大量数据。 1. **...