效果:
户型图列显示的图片实际上就是一个超链接。
添加一个Button分2个步骤:
1.在列头中定义超链接列或者Button列的HTML代码,也就是Render
2.添加该Button的事件处理函数。其中,gridPanel应作为参数传入该函数。
应该在gridPanel初始化时定义:
(1)cellClick的listener:cellClick
(2)cellClick事件的处理函数:onCellClick
列头定义的代码如下:
var cm = new Ext.grid.ColumnModel([
sm,
new Ext.grid.RowNumberer(), //自动添加行号
{
header: "房间编号",
dataIndex: "RoomNumber",
//可以进行排序
sortable: true
}, {
header: "户型结构",
dataIndex: "huxingjiegou",
//可以进行排序
isHidden: true,
sortable: true
}, {
header: "面积(M²)",
dataIndex: "area",
//可以进行排序
sortable: true
}, {
header: "单价(元/M²)",
dataIndex: "singlePrice",
//可以进行排序
sortable: true
// editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
// allowBlank: false
// }))
}, {
header: "总价(元)",
dataIndex: "totalPrice",
//可以进行排序
sortable: true
}, {
header: "面积(M²)",
dataIndex: "mianjiCC",
//可以进行排序
sortable: true
}, {
header: "单价(元/M²)",
dataIndex: "priceCCS",
//可以进行排序
sortable: true
// editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
// allowBlank: false
// }))
}, {
header: "总价(元)",
dataIndex: "totalPriceCCS",
//可以进行排序
sortable: true
}, {
header: "面积(M²)",
dataIndex: "mianjiCK",
//可以进行排序
sortable: true
}, {
// header: "单价(元/M²)",
header: "总价(元/M²)",
dataIndex: "priceCK",
//可以进行排序
sortable: true
// editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
// allowBlank: false
// }))
},
{
header: "",
dataIndex: "totalPriceALL",
//可以进行排序
sortable: true
},
{
header: "户型图",
tooltip: "户型图",
width: 120,
locked: true,
menuDisabled: true,
sortable: false,
dataIndex: "huxingPic",
renderer: function (data, metadata, record, rowIndex, columnIndex, store) {
var picture = store.getAt(rowIndex).get('huxingPic');
return '<a href="' + picture + '">' + '<img src="' + picture + '"width=60 hight=50> </a>';
}
},
{
header: "订购",
renderer: function (value, meta, record) {
var formatStr = "<button onclick='javscript:return false;' class='order_bit'>订购</button>";
var resultStr = String.format(formatStr);
return "<div class='controlBtn'>" + resultStr + "</div>";
} .createDelegate(this),
css: "text-align:center;",
// width: 30,
sortable: false
}
]);
注意超链接为'<a href="' + picture + '">',而按钮为return "<div class='controlBtn'>"
按钮处理事件的代码如下:
//按钮点击事件
grid.on('cellclick', function (grid, rowIndex, columnIndex, e) {
var btn = e.getTarget('.controlBtn');
var get = e.getTarget('.get');
if (get) {
var t = e.getTarget();
record = grid.getStore().getAt(rowIndex);
var control = t.className;
row = grid.getSelectionModel().getSelected(); //得到选择所有行
rowIndexId = rowIndex;
this.GetRoomDetails(record, rowIndexId, projectName, loudongName); //传行一行记录直接加载
}
if (btn) {
var t = e.getTarget();
record = grid.getStore().getAt(rowIndex);
var control = t.className;
row = grid.getSelectionModel().getSelected(); //得到选择所有行
switch (control) {
case 'sale_already':
{
var state = "已售";
// this.SetSaleState(record,state)
this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)
}
break;
case 'order_bit':
{
var state = "大定";
// this.SetSaleState(record,state)
this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)
}
break;
}
}
},
this);
};
分享到:
相关推荐
ExtJs 4.0 Grid 单元格合并控件封装
解决extjs中的GridPanel的单元格在IE无法选中复制的问题
Extjs4.2 Grid单元格编辑,包含日期控件,下拉框控件,同时可控制单元格是否有编辑权限。
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
NULL 博文链接:https://stanly-xia.iteye.com/blog/1534256
NULL 博文链接:https://dejazhan.iteye.com/blog/871259
ExtJs表格点击超链接获取行的值,和各种获取节点值的方法
实现grid单元格重复数据的合并,完整的案例实现,包含合并方法和调用过程
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
extjs grid 多表头 插件 extjs grid 多表头 插件
extjs单元格合并,gridpanel中多行合并
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
AJAX: 以JSON数据格式,使用ExtJS构造动态异步加载的树。
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
Extjs grid 中文排序问题修正,其实很简单,请自己看源代码
NULL 博文链接:https://zdk8105.iteye.com/blog/2232570
extjs grid ide:myeclipse5.5 jboss4.2.1 extjs4.2.1