Extjs-grid-panel-column属性配置link

公司项目需求,增加一列存放一个icon,点击后定向到刚刚配置好的页面!

效果图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var storeSelect = Ext.create('Ext.data.ArrayStore', {
fields: ['dashboardType', 'dashboardTitle', 'dashboardName', 'dashboardId'],
storeId: 'showArrayStore',
sorters: ['dashboardType', 'dashboardName', 'dashboardTitle'],
groupField: 'dashboardType',
pageSize: 14,
proxy: {
type: 'ajax',
url: '<%=rootPath%>/loadDashboardPages.action',
reader: {
type: 'json',
totalProperty: "totalCount",
root: 'listData'
}
},
listeners: {
load: function() {
globalMask.hide();
}
}
});
storeSelect.on('beforeload',
function(store, options) {
globalMask.show();
var new_params = {
currentSiteId: <%=themeDisplay.getLayout().getGroupId() % >,
dashboardType: Ext.getCmp('dashboardTypeQry').getValue(),
dashboardName: Ext.getCmp('dashboardNameQry').getValue()
};
Ext.apply(store.proxy.extraParams, new_params);
});
var selModel = Ext.create('Ext.selection.CheckboxModel', {
showHeaderCheckbox: false,
mode: 'SINGLE',
listeners: {
selectionchange: function(selectionModel, selected, options) {
if (selected.length == 0) {
Ext.getCmp('<portlet:namespace />deleteDashboard').setDisabled(true);
} else {
Ext.getCmp('<portlet:namespace />deleteDashboard').setDisabled(false);
}
if (selected.length == 1) {
Ext.getCmp('<portlet:namespace />editDashboard').setDisabled(false);
} else {
Ext.getCmp('<portlet:namespace />editDashboard').setDisabled(true);
}
}
}
});
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '<%=bundle.getString("grouping.catalog.Type")%>: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
});
Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer: function(value, cellmeta, record, rowIndex, columnIndex, store) {
return (store.currentPage - 1) * store.pageSize + rowIndex + 1;
}
});
var grid = Ext.create('Ext.grid.Panel', {
selModel: selModel,
collapsible: false,
iconCls: 'icon-grid',
frame: true,
store: storeSelect,
features: [groupingFeature],
columns: [Ext.create('Ext.grid.PageRowNumberer', {
header: ' ',
}), {
text: '<%=bundle.getString("grouping.catalog.Type")%>',
flex: 1,
sortable: true,
id: 'typeColumnId',
dataIndex: 'dashboardType'
},
{
text: '<%=bundle.getString("grouping.catalog.Name")%>',
flex: 1,
sortable: true,
dataIndex: 'dashboardName'
},
{
text: '<%=bundle.getString("grouping.catalog.Title")%>',
flex: 1,
sortable: true,
dataIndex: 'dashboardTitle'
},
{
text: '<%=bundle.getString("grouping.catalog.UrlLink")%>',
flex: 0.1,
sortable: true,
id: 'dashboardUrl',
dataIndex: 'dashboardName',
renderer: function(myValue, myDontKnow, myRecord) {
if (myValue.indexOf(" ") == -1) {
} else {
myValue = myValue.replace(/ /g, '-');
}
var pic = '<%=rootPath%>/images/' + 'go' + '.png';
return '<a href="' + myValue + '" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;<img id="dashboardGridUrl" src="' + pic + '" /></a>';
}
}],
height: 480,
width: '100%',
viewConfig: {
stripeRows: true
},
listeners: {
select: function(view, selections) {
Ext.getCmp('<portlet:namespace />editDashboard').setDisabled(false);
Ext.getCmp('<portlet:namespace />deleteDashboard').setDisabled(false);
}
},
/* clear current grouping format
fbar: ['->', {
text: 'Clear Grouping',
//iconCls: 'icon-clear-group',
handler: function() {
groupingFeature.disable();
}
}], */
bbar: Ext.create('Ext.PagingToolbar', {
store: storeSelect,
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2} ',
emptyMsg: "No record to display",
doLoad: function(start) {
record_start = start;
var o = {};
var pn = this.getParams();
o[pn.start] = start;
o[pn.limit] = this.pageSize;
this.store.load({
params: o
});
}
})
});