extjs表格兼并表头以后，列宽度的自适应
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>grid兼并表头后列宽自适应</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
<script src="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/theme-crisp.js"></script>
<style>
/**
*grid row 悬停色彩
*/
tr.x-grid-row.x-grid-row-over td {
background-color: #8CBF26;
}
/**
*grid row 挑选色彩
*/
.x-grid-row-selected .x-grid-cell-inner {
font-weight: bold;
background-color: red;
}
</style>
</head>
<body>
<script>
Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: "这个婊会自适应...",
resizable: true,
columns: [{
text: 'fullname',
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 0.25
}, {
text: 'Email',
dataIndex: 'email',
flex: 0.25
}]
}, {
text: 'other',
columns: [{
text: 'Phone',
dataIndex: 'phone',
flex: 0.5
}]
}],
store: store,
listeners: {
afterrender: function (width, height, oldWidth, oldHeight, eOpts) {
getWidthByPercent();
}
}
});
function getWidthByPercent(percent) {
var columns = grid.columns;
for (var a in columns) {
flex = columns[a].flex;
width = grid.getWidth() * flex;
columns[a].setWidth(width);
}
}
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [grid],
listeners: {
resize: function (width, height, oldWidth, oldHeight, eOpts) {
getWidthByPercent();
},
afterrender: function () {
}
}
});
});
</script>
</body>
</html>
