extjs 데이터 렌더링 매개 성별 행 셀
11116 단어 ExtJs
(클래스의 명칭은 정확하지 않을 수 있지만, extjs는 이렇게 쓴다)
Class Ext.grid.Column 클래스의 속성 renderer 대응 함수 매개 변수 설명은ColumnModel을 참조할 수 있습니다.setRenderer( Number col, Function fn )
setRenderer는 줄 번호를 설정해야 합니다. 매개 변수 설명도 여기에 있습니다. record 매개 변수는 Ext.data입니다.record
Ext.data.레코드 설명
data : Object
An object hash representing the data for this Record. Every field name in the Record definition is represented by a property of that name in this object. Note that unless you specified a field with
name "id"in the Record definition, this will
not contain an
id property.
id라는 속성을 제외하고 다른 속성은 데이터로 가져와야 합니다
직접 녹음할 수도 있어요.get (속성 이름) 가져오기;
jquery의grid 관련 플러그인과 비슷한 것 같습니다. 모든 js 표 구성 요소, 예를 들어 속성 등이 비슷한 것 같습니다.
데이터 렌더링<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>03.grid</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
/*
var cm = new Ext.grid.ColumnModel([
{header:' ',dataIndex:'id'},
{header:' ',dataIndex:'sex',renderer:function(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'> </span>";
} else {
return "<span style='color:green;font-weight:bold;'> </span>";
}
}},
{header:' ',dataIndex:'name'},
{header:' ',dataIndex:'descn'}
]);
*/
function renderSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'> </span><img src='user_male.png' />";
} else {
return "<span style='color:green;font-weight:bold;'> </span><img src='user_female.png' />";
}
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value=' ' onclick='alert(\"" +
" :" + value + "\
" +
" :{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\
" +
" record :" + record + ", \
" +
" " + rowIndex + " \
" +
" " + columnIndex + " \
" +
" Ext.data.Store :" + store + ", 。" +
"\")'>";
return str;
}
var cm = new Ext.grid.ColumnModel([
{header:' ',dataIndex:'id'},
{header:' ',dataIndex:'sex',renderer:renderSex},
{header:' ',dataIndex:'name'},
{header:' ',dataIndex:'descn',renderer:renderDescn}
]);
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
행 렌더링,class 추가<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<title>03.grid</title>
<style type="text/css">
.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
</style>
<script type="text/javascript">
Ext.onReady(function(){
var PersonRecord = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'},
{name: 'color', type: 'string'}
]);
var data = [
['boy', 0, '#FBF8BF'],
['girl', 1, '#99CC99'],
['man', 0, '#F5C0C0'],
['woman', 1, '#FFFFFF']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'name', dataIndex: 'name'},
{header: 'sex', dataInex: 'sex'}
],
autoHeight: true,
renderTo: 'grid',
viewConfig : {
forceFit : true,
enableRowBody : true,
getRowClass :function(record, rowIndex, p, ds) {
var cls = 'white-row';
switch (record.data.color) {
case '#FBF8BF' :
cls = 'yellow-row'
break;
case '#99CC99' :
cls = 'green-row'
break;
case '#F5C0C0' :
cls = 'red-row'
break;
}
return cls;
}
}
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
셀 렌더링<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<title>03.grid</title>
<script type="text/javascript">
Ext.onReady(function(){
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
var value = record.get('color')
cell.attr = "style=background-color:" + value;
return data;
}
var cm = new Ext.grid.ColumnModel([
{header: 'name', dataIndex: 'name'},
{header: 'sex', dataInex: 'sex'},
{header: 'color', dataIndex: 'color', renderer: renderMotif}
]);
var PersonRecord = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'},
{name: 'color', type: 'string'}
]);
var data = [
['boy', 0, '#FBF8BF'],
['girl', 1, '#FBF8BF'],
['man', 0, '#FBF8BF'],
['woman', 1, '#FBF8BF']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
autoHeight: true,
renderTo: 'grid',
viewConfig : {
forceFit : true
}
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>03.grid</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
/*
var cm = new Ext.grid.ColumnModel([
{header:' ',dataIndex:'id'},
{header:' ',dataIndex:'sex',renderer:function(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'> </span>";
} else {
return "<span style='color:green;font-weight:bold;'> </span>";
}
}},
{header:' ',dataIndex:'name'},
{header:' ',dataIndex:'descn'}
]);
*/
function renderSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'> </span><img src='user_male.png' />";
} else {
return "<span style='color:green;font-weight:bold;'> </span><img src='user_female.png' />";
}
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value=' ' onclick='alert(\"" +
" :" + value + "\
" +
" :{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\
" +
" record :" + record + ", \
" +
" " + rowIndex + " \
" +
" " + columnIndex + " \
" +
" Ext.data.Store :" + store + ", 。" +
"\")'>";
return str;
}
var cm = new Ext.grid.ColumnModel([
{header:' ',dataIndex:'id'},
{header:' ',dataIndex:'sex',renderer:renderSex},
{header:' ',dataIndex:'name'},
{header:' ',dataIndex:'descn',renderer:renderDescn}
]);
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<title>03.grid</title>
<style type="text/css">
.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
</style>
<script type="text/javascript">
Ext.onReady(function(){
var PersonRecord = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'},
{name: 'color', type: 'string'}
]);
var data = [
['boy', 0, '#FBF8BF'],
['girl', 1, '#99CC99'],
['man', 0, '#F5C0C0'],
['woman', 1, '#FFFFFF']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'name', dataIndex: 'name'},
{header: 'sex', dataInex: 'sex'}
],
autoHeight: true,
renderTo: 'grid',
viewConfig : {
forceFit : true,
enableRowBody : true,
getRowClass :function(record, rowIndex, p, ds) {
var cls = 'white-row';
switch (record.data.color) {
case '#FBF8BF' :
cls = 'yellow-row'
break;
case '#99CC99' :
cls = 'green-row'
break;
case '#F5C0C0' :
cls = 'red-row'
break;
}
return cls;
}
}
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<title>03.grid</title>
<script type="text/javascript">
Ext.onReady(function(){
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
var value = record.get('color')
cell.attr = "style=background-color:" + value;
return data;
}
var cm = new Ext.grid.ColumnModel([
{header: 'name', dataIndex: 'name'},
{header: 'sex', dataInex: 'sex'},
{header: 'color', dataIndex: 'color', renderer: renderMotif}
]);
var PersonRecord = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'},
{name: 'color', type: 'string'}
]);
var data = [
['boy', 0, '#FBF8BF'],
['girl', 1, '#FBF8BF'],
['man', 0, '#FBF8BF'],
['woman', 1, '#FBF8BF']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
autoHeight: true,
renderTo: 'grid',
viewConfig : {
forceFit : true
}
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.