急!请教:
我将一个已经存在的html,直接转换成ext的样式,但是为什么我用Ext.get("the-table")得到的是null?"the-table"是原来html的table的id,还有的问题就是,我原来用js写的一些对table的操作现在都不能使用会报错,请问应该做哪些相应的修改?小弟只有16分了,给15分
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>From Markup Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS --><script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="from-up.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
#the-table { border:1px solid #bbb;border-collapse:collapse; }
#the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
</style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>From Markup Grid Example</h1>
<p>This example shows how to create a grid with from an existing, unformatted HTML table.</p>
<p>Note that the js is not minified so it is readable. See <a href="from-up.js">from-up.js</a>.</p>
<button id="create-grid" type="button">Create grid</button>
<br />
<br />
<table cellspacing="0" id="the-table">
<thead>
<tr style="background:#eeeeee;">
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>Barney Rubble</td>
<td>32</td>
<td>Male</td>
</tr>
<tr>
<td>Fred Flintstone</td>
<td>33</td>
<td>Male</td>
</tr>
<tr>
<td>Betty Rubble</td>
<td>32</td>
<td>Female</td>
</tr>
<tr>
<td>Pebbles</td>
<td>1</td>
<td>Female</td>
</tr>
<tr>
<td>Bamm Bamm</td>
<td>2</td>
<td>Male</td>
</tr>
</tbody>
</table></body>
</html>转换table的from-up.js:Ext.onReady(function() {
var btn = Ext.get("create-grid");
btn.on("click", function(){
btn.dom.disabled = true; // create the grid
var grid = new Ext.grid.TableGrid("the-table", {
stripeRows: true // stripe alternate rows
});
grid.render();
alert(Ext.get("the-table"));
}, false, {single:true}); // run once
});Ext.grid.TableGrid = function(table, config) {
config = config || {};
Ext.apply(this, config);
var cf = config.fields || [], ch = config.columns || [];
table = Ext.get(table); var ct = table.insertSibling(); var fields = [], cols = [];
var headers = table.query("thead th");
for (var i = 0, h; h = headers[i]; i++) {
var text = h.innerHTML;
var name = 'tcol-'+i; fields.push(Ext.applyIf(cf[i] || {}, {
name: name,
mapping: 'td:nth('+(i+1)+')/@innerHTML'
})); cols.push(Ext.applyIf(ch[i] || {}, {
'header': text,
'dataIndex': name,
'width': h.offsetWidth,
'tooltip': h.title,
'sortable': true
}));
} var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record:'tbody tr'
}, fields)
}); ds.loadData(table.dom); var cm = new Ext.grid.ColumnModel(cols); if (config.width || config.height) {
ct.setSize(config.width || 'auto', config.height || 'auto');
} else {
ct.setWidth(table.getWidth());
} if (config.remove !== false) {
table.remove();
} Ext.applyIf(this, {
'ds': ds,
'cm': cm,
'sm': new Ext.grid.RowSelectionModel(),
autoHeight: true,
autoWidth: false
});
Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
};Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);
我将一个已经存在的html,直接转换成ext的样式,但是为什么我用Ext.get("the-table")得到的是null?"the-table"是原来html的table的id,还有的问题就是,我原来用js写的一些对table的操作现在都不能使用会报错,请问应该做哪些相应的修改?小弟只有16分了,给15分
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>From Markup Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS --><script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="from-up.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
#the-table { border:1px solid #bbb;border-collapse:collapse; }
#the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
</style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>From Markup Grid Example</h1>
<p>This example shows how to create a grid with from an existing, unformatted HTML table.</p>
<p>Note that the js is not minified so it is readable. See <a href="from-up.js">from-up.js</a>.</p>
<button id="create-grid" type="button">Create grid</button>
<br />
<br />
<table cellspacing="0" id="the-table">
<thead>
<tr style="background:#eeeeee;">
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>Barney Rubble</td>
<td>32</td>
<td>Male</td>
</tr>
<tr>
<td>Fred Flintstone</td>
<td>33</td>
<td>Male</td>
</tr>
<tr>
<td>Betty Rubble</td>
<td>32</td>
<td>Female</td>
</tr>
<tr>
<td>Pebbles</td>
<td>1</td>
<td>Female</td>
</tr>
<tr>
<td>Bamm Bamm</td>
<td>2</td>
<td>Male</td>
</tr>
</tbody>
</table></body>
</html>转换table的from-up.js:Ext.onReady(function() {
var btn = Ext.get("create-grid");
btn.on("click", function(){
btn.dom.disabled = true; // create the grid
var grid = new Ext.grid.TableGrid("the-table", {
stripeRows: true // stripe alternate rows
});
grid.render();
alert(Ext.get("the-table"));
}, false, {single:true}); // run once
});Ext.grid.TableGrid = function(table, config) {
config = config || {};
Ext.apply(this, config);
var cf = config.fields || [], ch = config.columns || [];
table = Ext.get(table); var ct = table.insertSibling(); var fields = [], cols = [];
var headers = table.query("thead th");
for (var i = 0, h; h = headers[i]; i++) {
var text = h.innerHTML;
var name = 'tcol-'+i; fields.push(Ext.applyIf(cf[i] || {}, {
name: name,
mapping: 'td:nth('+(i+1)+')/@innerHTML'
})); cols.push(Ext.applyIf(ch[i] || {}, {
'header': text,
'dataIndex': name,
'width': h.offsetWidth,
'tooltip': h.title,
'sortable': true
}));
} var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record:'tbody tr'
}, fields)
}); ds.loadData(table.dom); var cm = new Ext.grid.ColumnModel(cols); if (config.width || config.height) {
ct.setSize(config.width || 'auto', config.height || 'auto');
} else {
ct.setWidth(table.getWidth());
} if (config.remove !== false) {
table.remove();
} Ext.applyIf(this, {
'ds': ds,
'cm': cm,
'sm': new Ext.grid.RowSelectionModel(),
autoHeight: true,
autoWidth: false
});
Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
};Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货