EXT 3. x 상세 한 Ext. grid. GridPanel 사용 (2)
4439 단어 JavaScript데이터 구조jsoncssext
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
html,body{
margin:0px;
height:100%;
}
#content{
height:100%;
width:100%;
}
</style>
</head>
<body style="height:100%">
<script type="text/javascript">
var grid;
var cm;
var ds;
//
function renderSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'> </span>";
} else {
return "<span style='color:green;font-weight:bold;'> </span>";
}
}
//
function renderDescn(value, cellmeta, record, rowIndex, columnIndex,store){
var str = (rowIndex+1)+" |"+(columnIndex+1)+" ";
return str;
}
//
Ext.onReady(function()
{
//
cm = new Ext.grid.ColumnModel([
{header:'<font color="blue"> </font>',width: Ext.get("content").getWidth()/4,sortable:true,dataIndex:'id'},//sortable ，
{header:'<font color="blue"> </font>',width: Ext.get("content").getWidth()/4,dataIndex:'sex',renderer:renderSex},
{header:'<font color="blue"> </font>',width: Ext.get("content").getWidth()/4,dataIndex:'name'},
{header:'<font color="blue"> </font>',width: Ext.get("content").getWidth()/4,dataIndex:'descn',renderer:renderDescn}
]);
// ，Json
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
//
//proxy ，reader
ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
//Ext.data.ArrayReader ， cm dataIndex
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
// dataStore
ds.load();
// grid
grid = new Ext.grid.GridPanel({
renderTo: 'content',// div
// div ， ， grid grid
width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),
// ds cm
store: ds,
cm: cm
});
});
//
window.onresize=function(){
grid.destroy();
cm = new Ext.grid.ColumnModel([
// ， ， grid
{header:'<font color="blue"> </font>',width: Ext.get("content").getWidth()/4,sortable:true,dataIndex:'id'},
{header:'<font color="blue"> </font>',width: Ext.get("content").getWidth()/4,dataIndex:'sex',renderer:renderSex},
{header:'<font color="blue"> </font>',width: Ext.get("content").getWidth()/4,dataIndex:'name'},
{header:'<font color="blue"> </font>',width: Ext.get("content").getWidth()/4,dataIndex:'descn',renderer:renderDescn}
]);
grid = new Ext.grid.GridPanel({
width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),
store: ds,
cm: cm
});
grid.render(Ext.get("content"));
};
</script>
<div id="content">
<div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
