如何解决extjs Version: 6.0.0
,IE
和Google Chrome
中发生的Firefox
的以下错误。演示如下:
这是代码。如果删除',locked:true',则问题就消失了。添加locked: true
<!DOCTYPE html>
<html>
<head>
<meta name="google" content="notranslate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>extjs 6 demo</title>
<link rel="stylesheet" type="text/css" href='https://cdnjs.cat.net/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css' />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js'></script>
</head>
<body>
<script type="text/javascript">
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'store2',
fields: ['name', 'email', 'phone'],
groupField: 'name',
//header: 'Test',
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
store.add([{
'name': 'Gooooogle',
"phone": "111-222-3333"
}]);
var grid = Ext.create('Ext.grid.Panel', {
title: 'Demo Grid',
store: store,
columnLines: true,
autoHeight: true,
autoScroll: true,
width: 515,
enableColumnMove: false,
enableDragDrop: false,
enableHdMenu: true,
enableColumnHide: false,
columns: [{
text: 'Company Name',
dataIndex: 'name'
,locked: true
}, {
text: 'Phone',
dataIndex: 'phone'
,locked: true
}, {
text: 'Grouping Columns',
columns: [{
text: 'Phone 1',
dataIndex: 'phone'
}, {
text: 'Phone 2',
dataIndex: 'phone'
}, {
text: 'Phone 3',
dataIndex: 'phone'
}]
}],
renderTo: Ext.getBody()
});
</script>
</body>
</html>
答案 0 :(得分:1)
删除autoScroll: true
。这是在后续版本中修复的错误。由于网格默认滚动,因此无需指定它。
此外,创建网格的代码应包含在Ext.onReady
块中。
注意:scrollable: true
可能导致与autoScroll: true