Extjs的grid的单元格中加载超链接和按钮

 

Extjs的grid的单元格中加载超链接和按钮

标签： extjsheaderbuttonfunctionclassdiv

2012-04-17 10:09  17355人阅读  评论(6)  收藏  举报

  分类：

 

Extjs+.NET+sqlserver2005（31） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

效果：

 

 

户型图列显示的图片实际上就是一个超链接。

添加一个Button分2个步骤：
1.在列头中定义超链接列或者Button列的HTML代码，也就是Render
 
2.添加该Button的事件处理函数。其中，gridPanel应作为参数传入该函数。

  应该在gridPanel初始化时定义:
  (1)cellClick的listener：cellClick
  (2)cellClick事件的处理函数：onCellClick

 

列头定义的代码如下：

[javascript]  view plain  copy

1. var cm = new Ext.grid.ColumnModel([  
2. ,  
3.   new Ext.grid.RowNumberer(), //自动添加行号  
4.   
5.      {  
6.      header: "房间编号",  
7.      dataIndex: "RoomNumber",  
8.      //可以进行排序   
9.      sortable: true  
10.   
11.  }, {  
12.      header: "户型结构",  
13.      dataIndex: "huxingjiegou",  
14.      //可以进行排序  
15.      isHidden: true,  
16.      sortable: true  
17.   
18.  }, {  
19.      header: "面积(M²)",  
20.      dataIndex: "area",  
21.      //可以进行排序  
22.      sortable: true  
23.   
24.  }, {  
25.      header: "单价(元/M²)",  
26.      dataIndex: "singlePrice",  
27.      //可以进行排序  
28.      sortable: true  
29.      //           editor: new Ext.grid.GridEditor(new Ext.form.NumberField({  
30.      //            allowBlank: false  
31.      //        }))  
32.   
33.  }, {  
34.      header: "总价(元)",  
35.      dataIndex: "totalPrice",  
36.      //可以进行排序  
37.      sortable: true  
38.   
39.  }, {  
40.      header: "面积(M²)",  
41.      dataIndex: "mianjiCC",  
42.      //可以进行排序  
43.      sortable: true  
44.   
45.  }, {  
46.      header: "单价(元/M²)",  
47.      dataIndex: "priceCCS",  
48.      //可以进行排序  
49.      sortable: true  
50.      //           editor: new Ext.grid.GridEditor(new Ext.form.NumberField({  
51.      //            allowBlank: false  
52.      //        }))  
53.   
54.  }, {  
55.      header: "总价(元)",  
56.      dataIndex: "totalPriceCCS",  
57.      //可以进行排序  
58.      sortable: true  
59.   
60.  }, {  
61.      header: "面积(M²)",  
62.      dataIndex: "mianjiCK",  
63.      //可以进行排序  
64.      sortable: true  
65.   
66.  }, {  
67.      //         header: "单价(元/M²)",  
68.      header: "总价(元/M²)",  
69.      dataIndex: "priceCK",  
70.      //可以进行排序  
71.      sortable: true  
72.      //           editor: new Ext.grid.GridEditor(new Ext.form.NumberField({  
73.      //            allowBlank: false  
74.      //        }))  
75.   
76.  },  
77.   
78.   
79.   {  
80.       header: "",  
81.       dataIndex: "totalPriceALL",  
82.       //可以进行排序  
83.       sortable: true  
84.   
85.   },  
86.   
87.   header: "户型图",  
88.   tooltip: "户型图",  
89.   
90.   width: 120,  
91.   locked: true,  
92.   menuDisabled: true,  
93.   sortable: false,  
94.   dataIndex: "huxingPic",  
95.   renderer: function (data, metadata, record, rowIndex, columnIndex, store) {  
96.       var picture = store.getAt(rowIndex).get('huxingPic');  
97.   
98.       return '<a href="' + picture + '">' + '<img src="' + picture + '"width=60 hight=50> </a>';  
99.   
100.   }  
101.   
102.  {  
103.      header: "订购",  
104.   
105.      renderer: function (value, meta, record) {  
106.   
107.          var formatStr = "<button  onclick='javscript:return false;' class='order_bit'>订购</button>";   
108.          var resultStr = String.format(formatStr);  
109.          return "<div class='controlBtn'>" + resultStr + "</div>";  
110.      } .createDelegate(this),  
111.      css: "text-align:center;",  
112.      //  width: 30,     
113.      sortable: false  
114.  }  
115.   
116.     ]);  

注意超链接为'<a href="' + picture + '">'，而按钮为return "<div class='controlBtn'>"

按钮处理事件的代码如下：

[javascript]  view plain  copy

1. //按钮点击事件  
2.     grid.on('cellclick', function (grid, rowIndex, columnIndex, e) {  
3.         var btn = e.getTarget('.controlBtn');  
4.         var get = e.getTarget('.get');  
5.   
6.         if (get) {  
7.             var t = e.getTarget();  
8.             record = grid.getStore().getAt(rowIndex);  
9.             var control = t.className;  
10.             row = grid.getSelectionModel().getSelected(); //得到选择所有行  
11.             rowIndexId = rowIndex;  
12.             this.GetRoomDetails(record, rowIndexId, projectName, loudongName); //传行一行记录直接加载  
13.         }  
14.         if (btn) {  
15.   
16.             var t = e.getTarget();  
17.             record = grid.getStore().getAt(rowIndex);  
18.             var control = t.className;  
19.             row = grid.getSelectionModel().getSelected(); //得到选择所有行  
20.             switch (control) {  
21.   
22.                  case 'sale_already':  
23.                     {  
24.                         var state = "已售";  
25.                         //       this.SetSaleState(record,state)  
26.                         this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)  
27.                     }  
28.                     break;  
29.                 case 'order_bit':  
30.                     {  
31.                         var state = "大定";  
32.                         //       this.SetSaleState(record,state)    
33.                         this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)  
34.                     }  
35.                     break;  
36.                    }  
37.         }  
38.     },  
39. this);  
40. };