extjs4grid换行

Ⅰ extjs grid 处理当前行不取消其他选择行…………如编辑当前行……其他选择行不被取消如何

编辑模式无法选择多行，如果没有编辑模式倒是可以。

selModel:{
selType:'rowmodel',
mode:'MULTI'
}

官网说明：

"MULTI"- Allows complex selection of multiple items using Ctrl and Shift keys.

允许复杂的多项选择，使用Ctrl 或Shift 建。

Ⅱ extjs grid 列头分行

/**

* 表格综合示例

*

* @author XiongChun

* @since 2010-10-20

*/

Ext.onReady(function() {

group1 = [{}, {

header : '分组1-1a',

colspan : 4,

align : 'center'

}, {}, {

header : '分组1-3',

colspan : 5,

align : 'center'

}];

var group2 = [{}, {

header : '分组2-1',

colspan : 2,

align : 'center'

}, {

header : '分组2-2',

colspan : 2,

align : 'center'

}, {

header : '单位',

rowmerge:true,

domid:'group_dw',

align : 'center'

}, {

header : '分组2-3',

colspan : 2,

align : 'center'

}, {

header : '分组2-4',

colspan : 3,

align : 'center'

}];

/*

var group = new Ext.ux.grid.ColumnHeaderGroup({

rows : [group1, group2]

});

*/

var group = new Ext.ux.plugins.GroupHeaderGrid({

rows : [group1, group2]

});

// 定义自动当前页行号

var rownum = new Ext.grid.RowNumberer({

header : 'NO',

width : 28

});

// 复选框

var sm = new Ext.grid.CheckboxSelectionModel();

// 定义列模型

var cm = new Ext.grid.ColumnModel([rownum, {

header : '项目ID', // 列标题

dataIndex : 'xmid', // 数据索引:和Store模型对应

sortable : true

// 是否可排序

}, {

header : '项目名称',

dataIndex : 'xmmc',

sortable : true,

width : 200

}, {

header : '项目热键',

dataIndex : 'xmrj'

}, {

header : '规格',

dataIndex : 'gg'

}, {

dataIndex : 'dw',

align:'center',

fixed:true,

width : 60

}, {

header : '启用状态',

dataIndex : 'qybz',

// 演示render的用法(代码转换,该render由<G4Studio:ext.codeRender/>标签生成)

renderer : QYBZRender,

width : 60

}, {

header : '剂型',

dataIndex : 'jx',

width : 60

}, {

header : '产地',

dataIndex : 'cd',

width : 200

}, {

header : '医院编码',

dataIndex : 'yybm'

}, {

header : '更改时间',

dataIndex : 'ggsj'

}]);

/**

* 数据存储

*/

var store = new Ext.data.Store({

// 获取数据的方式

proxy : new Ext.data.HttpProxy({

url : 'gridDemo.do?reqCode=querySfxmDatas'

}),

// 数据读取器

reader : new Ext.data.JsonReader({

totalProperty : 'TOTALCOUNT', // 记录总数

root : 'ROOT' // Json中的列表数据根节点

}, [{

name : 'xmid' // Json中的属性Key值

}, {

name : 'sfdlbm'

}, {

name : 'xmmc'

}, {

name : 'xmrj'

}, {

name : 'gg'

}, {

name : 'dw'

}, {

name : 'qybz'

}, {

name : 'jx'

}, {

name : 'cd'

}, {

name : 'yybm'

}, {

name : 'ggsj'

}])

});

/**

* 翻页排序时候的参数传递

*/

// 翻页排序时带上查询条件

store.on('beforeload', function() {

this.baseParams = {

xmmc : Ext.getCmp('xmmc').getValue()

};

});

// 每页显示条数下拉选择框

var pagesize_combo = new Ext.form.ComboBox({

name : 'pagesize',

triggerAction : 'all',

mode : 'local',

store : new Ext.data.ArrayStore({

fields : ['value', 'text'],

data : [[10, '10条/页'], [20, '20条/页'],

[50, '50条/页'], [100, '100条/页'],

[250, '250条/页'], [500, '500条/页']]

}),

valueField : 'value',

displayField : 'text',

value : '20',

editable : false,

width : 85

});

var number = parseInt(pagesize_combo.getValue());

// 改变每页显示条数reload数据

pagesize_combo.on("select", function(comboBox) {

bbar.pageSize = parseInt(comboBox.getValue());

number = parseInt(comboBox.getValue());

store.reload({

params : {

start : 0,

limit : bbar.pageSize

}

});

});

// 分页工具栏

var bbar = new Ext.PagingToolbar({

pageSize : number,

store : store,

displayInfo : true,

displayMsg : '显示{0}条到{1}条,共{2}条',

plugins : new Ext.ux.ProgressBarPager(), // 分页进度条

emptyMsg : "没有符合条件的记录",

items : ['-', '&nbsp;&nbsp;', pagesize_combo]

});

// 表格工具栏

var tbar = new Ext.Toolbar({

items : [{

xtype : 'textfield',

id : 'xmmc',

name : 'xmmc',

emptyText : '请输入项目名称',

width : 150,

enableKeyEvents : true,

// 响应回车键

listeners : {

specialkey : function(field, e) {

if (e.getKey() == Ext.EventObject.ENTER) {

queryCatalogItem();

}

}

}

}, {

text : '查询',

iconCls : 'page_findIcon',

handler : function() {

queryCatalogItem();

}

}, {

text : '刷新',

iconCls : 'page_refreshIcon',

handler : function() {

store.reload();

}

},'->' ,{

text : '重设列标题',

iconCls : 'acceptIcon',

handler : function() {

cm.setColumnHeader('2','开天辟地');

}

}, {

text : '重设分组列标题',

iconCls : 'acceptIcon',

handler : function() {

Ext.getDom('group_dw').innerHTML = '开天辟地';

}

}]

});

// 表格实例

var grid = new Ext.grid.GridPanel({

// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体

title : '<span class="commoncss">表格综合演示七(表头分组支持)</span>',

height : 500,

frame : true,

autoScroll : true,

region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局

margins : '3 3 3 3',

store : store, // 数据存储

stripeRows : true, // 斑马线

cm : cm, // 列模型

tbar : tbar, // 表格工具栏

bbar : bbar,// 分页工具栏

plugins : group,

viewConfig : {

// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况

// forceFit : true

},

loadMask : {

msg : '正在加载表格数据,请稍等...'

}

});

// 页面初始自动查询数据

// store.load({params : {start : 0,limit : bbar.pageSize}});

// 布局模型

var viewport = new Ext.Viewport({

layout : 'border',

items : [grid]

});

// 查询表格数据

function queryCatalogItem() {

store.load({

params : {

start : 0,

limit : bbar.pageSize,

xmmc : Ext.getCmp('xmmc').getValue()

}

});

}

});

Ⅲ ExtJS表格单元格如何自动换行

<style type="text/css">
.x-grid3-cell-inner, .x-grid3-hd-inner { white-space:normal !important; }
</style>

Ⅳ extjs中textarea 换行符应该怎么写

这个得用htmleditor来进行编辑换行

Ⅳ Extjs 4.x 为GridPanel动态添加一行数据

//声明对应grid的Record对象
var ItemRecord = Ext.data.Record.create([
{name:'itemid'},
{name:'itemcode'},
{name:'itemname'},
{name:'price'},
{name:'mark'}
]);
//点新增按钮时则执行类似如下函数

function addNewLine2Grid(grid){
var rec = new ItemRecord({ //实例化Record对象，并赋予各字段初始值
'itemid': 0,
'itemcode': '',
'itemname': '',
'price': 0.00,
'mark': ''
});
grid.store.insert(grid.store.getCount(), rec); //插入新行作为grid最后一行
grid.getView().refresh(); //刷新
//grid.plugins[1].startEditing(grid.store.getCount()-1,4); //编辑最后一行第4列
}

Ⅵ extjs 如何实现在表格编辑状态下输入数字后,按回车自动到下一行的编辑状态

你在GRID里面加一个KEYS 监听回车。
然后在监听方法里面获取当前编辑的CELL 然后得到当前编辑的CELL下一列的CELL。 然后调用开始编辑方法。
具体的用法可以看看editgridpanel的api 找到keys这个属性 看看说明

Ⅶ 怎么样让extjs grid竖着显示,行列转置

看了一下Extjs中代码会知道，extjs中gridpanel中的表格是通过<div<table<tbody<tr<td<divcontent式的结构书写的。要改变单元格边框的样式就要改变Ext-all.css中.x-grid3-row这个样式。这个样式是应用到最外层div上的。
全局改变只需改变Ext-all.css里面的.x-grid3-row样式
比如你想去掉边框可以这样：
一、.x-grid3-row{cursor:default;border:0px solid #fff;border-top-color:#fff;width:100%;}
如果想个性一点，自己要定义一个样式然后应用到特定的行如：
一、.my-x-grid3-row{cursor:default;border:0px solid #ccc,border-top-color:#fff;width:100%;}
二、应用样式，获取div
var view=grid.getView();
var rows=view.getRows();//获取所有的行
var row=rows[0];//获取单行，就是你想改变的那一行，rows[1],rows[2].....都可以，就看你有多少列了
var cls= Ext.get(row);//获取ext中外层div对象
cls.removeClass("x-grid3-row");//去掉原来的样式
cls.addClass("my-x-grid3-row");//加上自己的样式
这样你会发现原来的边框不见了。大家可以举一反三改变其他样式。
ps：extjs中css中核心的部分是Ext-all.css,所以大家要是想改变样式直接改变里面的东西就ok啦