?????????????????????????????????????????ext2.0瀛???ラ?ㄧ??璁?
?
?1.????ttp://www.extjs.com/download涓?杞?xt2.0????缂╁??.
?2.??渚胯В??缂╁?颁?涔???褰?涓?锛?涓?绠＄??褰?????浠?涔?锛?????搴?璇ョ???伴??杈规??杩??风????褰?缁?????
?? adapter,air,build, docs, examples,resources,source,
?? CHANGES.txt, ext-all.js, ext-all-debug.js, ,ext-core.js,
?? ext-core-debug.js,??? INCLUDE_ORDER.txt,LICENSE.txt
?3.?板?ㄦ??浠??╃?ㄥ??????褰?缁?????涓?涓?HelloWorld渚?瀛?锛?
????
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script>
Ext.onReady(function(){
Ext.MessageBox.alert('helloworld', 'Hello world');
});
</script>
???
? 4.?ヤ??ユ??浠???涓?涓?Ext.grid.GridPanel??渚?瀛?锛?
??
<html>
<head>
<title>Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
</head>
<body>
<div id="grid1"></div>
</body>
<script type="text/javascript">
var readerSex = function(value){
if(value=='male'){
return "<span style='color:#FF0000; font-weight:bold'>绾㈢??lt;/span>";
}else{
return "<span style='color:green; font-weight:bold'>缁垮コ</span>";
}
};
var renderDescn=function(value, cellmeta, record, rowIndex, columnIndex, store){
var str ="<input type='button' value='?ョ??璇????杩? onClick='alert(\""+
"杩?涓??????肩????"+value+"\\n"+
"杩?涓??????肩????缃?:cellId="+cellmeta.cellId+", id="+cellmeta.id+", css:"+cellmeta.css+"\\n"+
"杩?涓??????兼???ㄨ???record:"+record+",涓?琛??版???ㄥ?ㄨ???"+"\\n"+
"璇ュ?????兼???ㄧ??琛?rowIndex:"+rowIndex+"?\\n"+
"杩?涓??????兼???ㄧ????columnIndex:"+columnIndex+"?\\n"+
"杩?涓?Ext.data.store???,store="+store+"\")'/>";
return str;
}
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'缂???, dataIndex:'id', sortable:true},
{header:'濮???', dataIndex:'name'},
{header:'?у??', dataIndex:'sex', renderer:readerSex},
{header:'??杩?, dataIndex:'descn', renderer:renderDescn}]);
var data = [['id1', 'name1','male', 'descn1'],
['id2', 'name2','female', 'descn2'],
['id3', 'name3','male', 'descn3']];
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({}, [
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'descn'}
])
});
var el = Ext.get('grid1');
var grid= new Ext.grid.GridPanel({
el:el,
ds:ds,
cm:cm,
sm:sm,
bbar:new Ext.PagingToolbar({
pageSize:2,
store:ds,
displayInfo:true,
displayMsg:'?剧ず绗?{0}?¤?板??扮??{1}?¤?板?,??2}?¤?板?',
emptyMsg:'娌℃??璁板?',
paramNames:{
start:1,
limit:2
}
})
});
ds.load();
grid.render();
</script>
</html>
?
?
?虹?扮????棰?锛?
?? 1.褰???绗?涓?娆¤?琛?杩?娈典唬???跺???帮?瀹??ㄧ????娴?瑙??ㄤ???浠ヨ?琛?锛?浣?????E娴?瑙??ㄤ?纭?涓??借?琛?锛????ユ??????
????? var data =?[['id1', 'name1','male', 'descn1'],
???????????????? ['id2', 'name2','female', 'descn2'],
??????????????? ?['id3', 'name3','male', 'descn3']];
?????? 杩?娈典唬??涓?涓?澶?浜?涓?涓?"锛?",杩??锋??浼??虹?拌??风??缁???锛???浠ュぇ瀹朵?瀹?瑕?缁?蹇???!
?
5.?板?ㄦ??浠??ュ??涓?涓?????????锛??冲??涓?涓?Ext.tree.TreePanel??渚?瀛?锛?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>????棰???妗?lt;/title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
</head>
<body>
<div id="tree" style="height:300px"></div>
</body>
<script type="text/javascript">
var root = new Ext.tree.TreeNode({text:'??????});
var node1 = new Ext.tree.TreeNode({text:'??1'});
var node2 = new Ext.tree.TreeNode({text:'??2'});
var leaf1 = new Ext.tree.TreeNode({text:'??'});
var leaf2 = new Ext.tree.TreeNode({text:'??'});
root.appendChild(node1);
root.appendChild(node2);
node1.appendChild(leaf1);
node1.appendChild(leaf2);
var tree = new Ext.tree.TreePanel({
el:'tree'
});
tree.setRootNode(root);
root.expanded=true;
tree.render();
</script>
</head>
<body>
</body>
</html>
?
??浠ヤ?????浠?浠?澶╂?荤???涓?浜??ヨ???癸?濡???浠ヤ????ｄ釜涓?杞藉?板??涓?琛?锛???浠ュ?伴??浠朵腑?讳?杞?xt-2.0.1.zip.
????
??
??
??
?
?
![DOM下元素 offset client scroll 相关属性简介[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)