在Extjs&grid中列显示全内容（非多余部分用……显示）
在工作中碰见了这样一个问题：在用htmleditor编辑器编写的内容在grid的列中显示的时候可以显示全部内容（这时会将这一列撑起来）而在用textarea编辑的内容则不会显示完全。
后来知道是因为textarea的底部样式导致的：.x-grid-cell-inner中的text-overflow
，white-space
在这里简单说下这两个样式：
text-overflow& 在Ext的样式为 clip
text-overflow: clip& 不显示省略标记，直接截取
text-overflow：ellipsis 当对象文本溢出时显示省略标记
white-space 在Ext的样式为
在这两个样式中只修改white-space为normal就可以（如果改底部样式所有grid的显示都将改变）
因为在工作中有可能不是将所有的grid的样式都改为显示全部内容撑开行高，因此我们要在所在的列中更改样式
在要显示的列的renderer事件中更改
renderer: function (v, m, r) {
&&&&&&&&&&&
'style="white-space:word-wrap:break-word-break:break-"';
好了，就上面的三行代码就OK啦（O(∩_∩)O~
说了那么多废话就三句重点*^_^*）
在m.attr中还可以给所在列添加其他样式，以个人需要添加
添加word-wrap:break-word-break:break-
这两个样式用于改进浏览器兼容问题（在火狐英文和数字不换行） 至此IE，谷歌，火狐都可换行
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。随笔 - 1570, 文章 - 0, 评论 - 1, 引用 - 0
要使用GridPanel，首先要定义Store，而在创建Store的时候必须要有Model，因此我们首先来定义Model：Ext.define("Gpsdata", {
extend: "Ext.data.Model",
{ name: 'gpstime', type: 'string' },
{ name: 'gpstemp', type: 'string' }
});然后创建Store： var surfacestore = new Ext.data.Store({
model : 'Gpsdata',
pageSize : 22,
type : 'ajax',
url : 'gpsdata/grid',
reader : {
type : 'json',
root : 'dataOfAll',
totalProperty : 'total'
listeners : {
beforeload : function(store, operation, opts) {
Ext.MessageBox.show({
title : '请等待',
msg : '数据读取中……',
width : 240,
progress : true,
closable : false
Ext.MessageBox.wait('数据读取中……', '', {
duration : 900000,
interval : 500,
increment : 10,
scope : this,
fn : function() {
load : function(store, records, successful, opts) {
if (successful) {
Ext.MessageBox.hide();
Ext.MessageBox.hide();
});创建GridPanel var surfacegrid = Ext.create('Ext.grid.Panel', {
id: 'surface',
title: '数据列表展示',
store: surfacestore,
disableSelection: true,
loadMask: true,
viewConfig: {
trackOver: false,
stripeRows: false
new Ext.grid.RowNumberer(),{
text: "时间",
dataIndex: 'gpstime',
sortable: true,
text: "水温"+'(℃)',
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
//value="&span style='color:font-weight:'&红男&/span&";
dataIndex: 'gpstemp',
listeners: {
itemdblclick : function(view, record, item, index, e, eOpts) {
var gpsname=record.get('gpsname');
//alert(gpsname);
bbar: Ext.create('Ext.PagingToolbar', {
store: surfacestore,
displayInfo: true,
displayMsg: '显示监测数据 {0} - {1} of {2}',
emptyMsg: "无数据"
}); renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ }解析：value:将要像是单元格里的值，即dataIndex的值cellmeta:单元格的相关属性，主要是id和CSSrecord：这行的数据对象。通过record.data['id']方式得到其他列的值rowIndex:行号columnIndex:当前列的行号store:构造表格时传递的ds，也就是说，表格里所有的数据都可以通过store获得。 listeners: {itemdblclick : function(view, record, item, index, e, eOpts) { && }}解析：view:Ext.view.View &record : Ext.data.Model The record that belongs to the itemitem : HTMLElement The item's elementindex : Number The item's indexe : Ext.EventObject The raw event objecteOpts : Object The options object passed to Ext.util.Observable.addListener. Extjs GridPanel的列Extjs GridPanel的列有多种类型，例如：文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。下面是列的常用配置项：xtype：列类型text：列头显示的文字dataIndex：绑定的字段名width：宽度flex：自动适应的宽度sortable：是否可排序，默认为是hideable：是否可隐藏，默认为是locked：锁定列，将列锁定在grid的开头，当grid出现滚动条的时候该属性比较有用。默认为否lockable：是否可锁定，默认为否format：格式化字符串，常用于日期、数字的格式化。日期：'Y-m-d'；日期时间：'Y-m-d H:i:s'；数字：'0,000.00'（带有千位分隔符、保留两位小数）、'0.00'（保留两位小数），'0'（不保留小数）renderer：自定义绘制方法，可以是Ext.util.Format中定义好的方法名称，也可以是自定义否function，该方法接收下面的参数：value、metadata、record、rowIndex、colIndex、store、view，并需要一个用来显示的返回值。editor：编辑器，当使用编辑插件的时候才会起作用。Extjs GridPanel行选择模型（SelectionModel）控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下，selType为rowmodel，对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框，它通过点击行进行选中，默认为多选“MULTI”。如果我们要使用复选框来选择行，我们需要使用下面的配置：selType: "checkboxmodel",然后，我们可以通过selModel来配置selType：selModel: {& & injectCheckbox: 0,& & mode: "SIMPLE", & & //"SINGLE"/"SIMPLE"/"MULTI"& & checkOnly: true & & //只能通过checkbox选择}, Extjs GridPanel行选择除了界面操作来选中行，我们还可以通过代码来选中行：//选择行，并保持其他行的选择状态grid.getSelectionModel().select(records, true);//选择所有grid.getSelectionModel().selectAll();//根据row index选择grid.getSelectionModel().selectRange(startRow, endRow, true)Extjs GridPanel获取选中行获取选中行，仍然需要通过SelectionModel来完成：var records = grid.getSelectionModel().getSelection();Extjs GridPanel 提供了非常强大数据表格功能，在GridPanel可以展示数据列表，可以对数据列表进行选择、编辑等。在之前的中，我们已经使用到了GridPanel，今天我们来介绍一下Extjs中GridPanel的详细用法。
本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！
本文由齐飞（）原创，并发布在，转载请注明出处！推荐更多、
创建GridPanel
要使用GridPanel，首先要定义Store，而在创建Store的时候必须要有Model，因此我们首先来定义Model：
//1.定义Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
然后创建Store：
//2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
type: "ajax",
url: "GridHandler.ashx",
root: "rows"
接下来才是GridPanel的代码：
//3.创建grid
var grid = Ext.create("Ext.grid.Panel", {
xtype: "grid",
store: store,
width: 500,
height: 200,
margin: 30,
columnLines: true,
renderTo: Ext.getBody(),
selModel: {
injectCheckbox: 0,
mode: "SIMPLE",
//"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true
//只能通过checkbox选择
selType: "checkboxmodel",
columns: [
{ text: '姓名', dataIndex: 'name' },
text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
{ text: '电话', dataIndex: 'phone', editor: "textfield" }
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
listeners: {
itemdblclick: function (me, record, item, index, e, eOpts) {
//双击事件的操作
bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
这个GridPanel的效果如下：
在这个GridPanel中，我们可以通过复选框勾选数据行，可以编辑&年龄&和&电话&列，还可以对数据进行客户端排序。
Extjs GridPanel的列
Extjs GridPanel的列有多种类型，例如：文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。
下面是列的常用配置项：
xtype：列类型
text：列头显示的文字
dataIndex：绑定的字段名
width：宽度
flex：自动适应的宽度
sortable：是否可排序，默认为是
hideable：是否可隐藏，默认为是
locked：锁定列，将列锁定在grid的开头，当grid出现滚动条的时候该属性比较有用。默认为否
lockable：是否可锁定，默认为否
format：格式化字符串，常用于日期、数字的格式化。日期：'Y-m-d'；日期时间：'Y-m-d H:i:s'；数字：'0,000.00'（带有千位分隔符、保留两位小数）、'0.00'（保留两位小数），'0'（不保留小数）
renderer：自定义绘制方法，可以是Ext.util.Format中定义好的方法名称，也可以是自定义否function，该方法接收下面的参数：value、metadata、record、rowIndex、colIndex、store、view，并需要一个用来显示的返回值。
editor：编辑器，当使用编辑插件的时候才会起作用。
Extjs GridPanel行选择模型（SelectionModel）
控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下，selType为rowmodel，对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框，它通过点击行进行选中，默认为多选&MULTI&。
如果我们要使用复选框来选择行，我们需要使用下面的配置：
selType: "checkboxmodel",
然后，我们可以通过selModel来配置selType：
selModel: {
injectCheckbox: 0,
mode: "SIMPLE",
//"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true
//只能通过checkbox选择
Extjs GridPanel行选择
除了界面操作来选中行，我们还可以通过代码来选中行：
//选择行，并保持其他行的选择状态
grid.getSelectionModel().select(records, true);
//选择所有
grid.getSelectionModel().selectAll();
//根据row index选择
grid.getSelectionModel().selectRange(startRow, endRow, true)
Extjs GridPanel获取选中行
获取选中行，仍然需要通过SelectionModel来完成：
var records = grid.getSelectionModel().getSelection();
Extjs GridPanel显示行号
默认情况下Extjs GridPanel是不显示行号的，我们需要手动添加行号列。
columns: [
"rownumberer", text: "序号"
, width:40 },
{ text: '姓名', dataIndex: 'name' },
text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
{ text: '电话', dataIndex: 'phone', editor: "textfield" }
我们可以设置行号的列头和宽度。
Extjs GridPanel异步加载数据
Extjs GridPanel的异步加载数据是通过Store来实现的。我们之前已经介绍过Extjs Store的各种代理方式，可以参考我之前的文章：
异步加载通常采用ajax代理，例如我们代码中用到的：
//2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
type: "ajax",
url: "GridHandler.ashx",
root: "rows"
服务器端返回的数据格式如下：
"name": "Tom",
"age": 12,
"phone": "1233455"
"name": "Jerry",
"age": 12,
"phone": "1233455"
"name": "Sinbo",
"age": 12,
"phone": "1233455"
"name": "Jack",
"age": 12,
"phone": "1233455"
"name": "Johnson ",
"age": 12,
"phone": "1233455"
"total": 5
Extjs GridPanel分页
当GridPanel中数据量大的时候，我们就需要使用分页了。
分页的实现由两部来完成，首先是在Store中添加pageSize配置项，用来确定每页显示多少行数据；然后需要为GridPanel添加PagingToolbar。
1. Store添加pageSize配置项
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
type: "ajax",
url: "GridHandler.ashx",
root: "rows"
在分页参数加上之后，Extjs在执行ajax请求的时候会添加三个参数：
page：当前页
start：起始行的行号
limit：每页数据行数，默认为25；这个参数值就是我们设置的pageSize
2. GridPanel添加PagingToolbar
bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
在完成这两项配置以后，GridPanel就可以使用分页了。
Extjs GridPanel列编辑
Extjs GridPanel可以方便的实现列编辑。要实现这个功能需要两步：
1. 添加GridPanel的编辑插件
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
2. 为需要编辑的列指定编辑器
columns: [
{ xtype: "rownumberer", text: "序号", width:40 },
{ text: '姓名', dataIndex: 'name' },
text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
{ text: '电话', dataIndex: 'phone', editor: "textfield" }
编辑器可以是一个field的配置，也可以是一个xtype。
对于编辑后的单元格，会在左上角出现一个红色的标识，说明该数据是编辑过的，要想去掉这个红色箭头，需要调用record的commit()方法。
grid.on('edit', function (editor, e) {
// commit the changes right after editing finished
除了单元格编辑外，Extjs还支持行编辑功能，只需要将插件替换为RowEditing即可，此处不再进行演示。
Extjs GridPanel选中单元格内容
在默认情况下，Extjs GridPanel不允许进行选中单元格中的内容，由于不能选中，我们就不可能来复制单元格中的内容。如果要实现这种功能，我们需要通过viewConfig来实现。
代码如下：
viewConfig:{
stripeRows:true,//在表格中显示斑马线
enableTextSelection:true //可以复制单元格文字
禁止显示列头部右侧菜单
Extjs GridPanel的列，当我们点击列头的时候，会出现一个菜单：
如果我们要禁用这个菜单，可以将每个column定义属性menuDisabled指定为true，代码如下：
{header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}
本文由齐飞（）原创，并发布在，转载请注明出处！推荐更多、
阅读(...) 评论()Ext获取某一列的值 - CSDN博客
Ext获取某一列的值
问：如题我有三列，现在显示了5行，我想获取 第2行的第一列数据，要怎么写啊答：1） 表格数据选择行选择模式：Js代码 var rowcount = grid.getSelectionNode().getSelections(); var rowcount = grid.getSelectionNode().getSelections(); 可以获取全部选中的记录，得到的rowcount将是一个Array，比如想获取sex列的数据，语句如下Js代码 var strsex = rowcount[i].get(&sex&); var strsex = rowcount[i].get(&sex&); 单元格选择模式如果在GridPanel的配置属性增加sm属性如下Js代码 sm:new Ext.grid.CellSelectionModel(); sm:new Ext.grid.CellSelectionModel();则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格，而不是默认的选择某一行。选择方式如下Js代码 var cell = grid.getSelectionNode().getSelectedCell(); var cell = grid.getSelectionNode().getSelectedCell(); 得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据Js代码 var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名 var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据 var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据 getStore():获取表格的数据集getAt():获取该数据集cell[0]行get():获取该行colname的数据2） 为表格增加链接有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html如下：{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},定义DomUrl方法Js代码 function DomUrl(value){ return "&a href=&"+value+"&/a&"; } function DomUrl(value){return "&a href=&"+value+"&/a&";} 如果表格内的数据是一个链接如：这样写法自然没有问题，但是大多数时候我们在表格中不会直接写一个链接，如果又需要根据单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的，而且表格初始化之后这个属性无法改变，也就是只读属性。处理方法如下：定义一个全局变量，初始值为0；DomUrl函数如下Js代码 function DomUrl(value){ var row = grid.getSelectionModel().selectRow(startrow);//选中当前行 var rownum = grid.getSelectionModel().getSelected();//获取当前行 startrow ++; var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值，并组织链接字符串 return "&a href='"+strurl+"'&"+value+"&/a&"; } function DomUrl(value){var row = grid.getSelectionModel().selectRow(startrow);//选中当前行var rownum = grid.getSelectionModel().getSelected();//获取当前行startrow ++;var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值，并组织链接字符串return "&a href='"+strurl+"'&"+value+"&/a&";} 不过不要忘记在下次提交的时候将startrow赋值为0。3） 表格的属性表格的属性分为配置属性（在操作表格时无法修改），以及其他可读写属性，方法，以及事件。如下：配置属性a) activeItem：渲染布局时激活的子元素。b) applyTo：指定渲染对象。c) autoDestroy：当容器的子元素从容器中移除时是否自动销毁。d) autoExpandColumn：指定自动填充表格剩余区域的列ide) autoExpandMax：可自动扩张的最大宽度。f) autoExpandMin：可自动扩张的最小宽度g) autoHeight:自动扩充高度h) autoShow：是否自动显示i) autoWidth：自动扩充宽度j) bbar/tbar：底部/顶部状态栏k) bufferResize：容器再布局的缓冲频率l) colModel/cm:列模式m) cls：组件的额外css格式。n) collapsible:是否显示快捷隐藏按钮o) defaults：指定默认配置。p) disableSelection：是否禁止选择表格行或列q) enableDragDrop：是否允许表格列的拖放操作。r) enableHdMenu：是否显示表格列的菜单。s) frame：边框是否显示t) loadMask: 是否显示加载动画u) selModel/sm：表格选择模式v) store:表格数据集w) stripeRows：是否显示分隔线。x) title：表格标题方法a) getColumnModel()：得到表格列模型b) getGridEl():得到表格下的元素c) getPosition():得到组件的当前位置，返回一个数组d) getSelectionModel():得到选中模型e) getSize():得到组件大小f) getStore():得到组件的数据集g) getView():得到表格的GridView对象。h) hide():隐藏当前组件i) isVisible():判断当前组件是否显示j) setDisabled( Boolean):设置组件的可用性k) un():解除组件的监听l) on()：为组件添加监听on ( String eventName, Function handler, [Object scope] )eventName:添加监听的名称handler:事件处理函数scope:事件响应的作用域,包括scope,delay,single,buffer。
本文已收录于以下专栏：
相关文章推荐
extjs如何获取Grid中某一行某一列的值
举报|  分享| 
15:03wslyc0;| 浏览
 软件开发
extjs获取Grid...
接触Ext JS已然过去半个多月，在写项目的时候遇到一个简单的问题，需要将grid中某几列的数据求和，经网上搜索，结果不如人意，经api的查找及尝试，终于找到解决办法。
页面代码简写如下：
在extjs3中，大家知道用
myGrid.getColumnModel().setHidden(i,true);
但到了4.0后，已经没有getColumnModel这个方法了，我们在Ext.p...
合作驾校名称&/
1、实现源码
复制代码 代码如下:
JavaScript实现获取table中某一列的值
function getTdValue()
1、实现源码
JavaScript实现获取table中某一列的值
function getTdValue()
var tableId = document.getEle...
【注意】：本例子只适合.net 4.0中的WPF 中的DataGrid（因为在.Net 4.0之前的WPF中是不包含DataGrid的），不适合VB，ASP，他们有自己的方法。
在数据库使用过程中，我们有时候需要取出在一个表中对于某个列来说具有最大值或最小值的记录行，那么该如何操作呢？下面讲解几种方法。
首先我们先定义一个表，如下所示：
这是一张简单的表，下面我们通过...
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)grid 单元格cell的值 - CSDN博客
grid 单元格cell的值
&1017人阅读&&&
则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格，而不是默认的选择某一行。选择方式如下&
Java代码&&
得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据&
Java代码&&
getStore():获取表格的数据集&
getAt():获取该数据集cell[0]行&
get():获取该行colname的数据&
为表格增加链接&
有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html&
如下：{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},&
定义DomUrl方法&
function DomUrl(value){&&&&
return &&a href=&&+value+&&/a&&;&&&&
function DomUrl(value){ return &&a href=&&+value+&&/a&&; }&
如果表格内的数据是一个链接如：这样写法自然没有问题，但是大多数时候我们在表格中不会直接写一个链接，如果又需要根据单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的，而且表格初始化之后这个属性无法改变，也就是只读属性。&
处理方法如下：&
定义一个全局变量，初始值为0；DomUrl函数如下&
function DomUrl(value){&&&&
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行&&&&
var rownum = grid.getSelectionModel().getSelected();//获取当前行&&&&
startrow ++;&&&&
var strurl = &abc.jsp?id=& + rownum.get('id');//获取当前选中行的值，并组织链接字符串&&&&
return &&a href='&+strurl+&'&&+value+&&/a&&;&&&&
function DomUrl(value){ var row = grid.getSelectionModel().selectRow(startrow);//选中当前行 var rownum = grid.getSelectionModel().getSelected();//获取当前行 startrow ++; var strurl = &abc.jsp?id=& + rownum.get('id');//获取当前选中行的值，并组织链接字符串 return &&a href='&+strurl+&'&&+value+&&/a&&;
不过不要忘记在下次提交的时候将startrow赋值为0。&
本文已收录于以下专栏：
相关文章推荐
extjs 如何取grid中单元格的值
weixinweiboqqqzone
棠胁莫2 | 浏览
3439 次   22:21
转自http://blog.csdn.net/besley/article/details/8894348
SlickGrid 基本方法篇
分类： Javascript MVC20...
var n = grid.getStore().getCount();// 获得总行数 for(var i=0;i1&n;i++){ var record = store.getAt(i); var ...
有2种方式可以获取GridPanel中当前选中行的数据。
var selArr = gridPanel.getSelectionModel().getSelection();
var rec...
//EXT GridPanel获取某一单元格的值
listeners:{
'cellclick':function(grid, rowIndex, columnIndex, e){
editCell_...
之前可能是Extjs3.x，提供grid的有cellclick事件，能够得到列的index，
下面是一个cellclick事件
grid.addListener('cellclick', cell...
* 合并单元格
* @param {} grid
要合并单元格的grid对象
* @param {} cols
要合并哪几列 [1,2,4]
function mergeCells(...
首先技术原理基于狂人论坛的大大yunfengcheng发的帖子《100行代码解决ExtJs4.1合并单元格问题》，表示感谢。
如果需要他的代码各位可自行下载，在此不方便贴出（人家可卖30个金钱的...
//==&June8
 * ruantao1989
 * 合并单元格 
 * @param {} grid  要合并单元格的grid对象 
 * @param {} cols  要.....
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)