extjs grid
<html>
<head>
<meta charset="UTF-8" />
<title>grid</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<div id="a"></div>
<script>
//
var sm = new Ext.grid.CheckboxSelectionModel({
singleSelect: false
//singleSelect true， grid ， false
});
// ----1 ：
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),// Ext ，
sm,
{
id : "title",
header : " ", //
width : 150,
sortable : true, //
dataIndex : "title_cm",// name
tooltip : " ",
renderer : function(v) { //
return "<u>" + v + "</u>";// renderer ， jsonObj
}
}, {
header : " ",
width : 50,
dataIndex : "author"
}, {
header : " ",
width : 150,
format : "Y-m-d",
dataIndex : "createdTime",
renderer : Ext.util.Format.dateRenderer("Y-m-d")
}, {
header : " ",
width : 100,
dataIndex : "rowId",
menuDisabled : true,// ,false
renderer : function(v) {
var modify = "<a href='modify?newsId=" + v + "'> </a>";
var remove = "<a href='delete?newsId=" + v + "'> </a>";
return "<span align='center'>" + modify + " " + remove
+ "</span>";
}
}]);
// Dummy
var data = {"totalProperty":5,"root":[{
rowId : 5,
title : " ",
author : " ",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
rowId : 2,
title : " ",
author : " ",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
rowId : 3,
title : " ",
author : " ",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
rowId : 1,
title : " ",
author : " ",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
rowId : 4,
title : " ",
author : " ",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}]};
// ， Dummy
var proxy = new Ext.data.MemoryProxy(data);
// Record ---2：
var News = Ext.data.Record.create([{
name : "title_cm", // cm dataIndex
type : "string",
mapping : "title"// data title
},
// name data ， ，
{
name : "author",
type : "string",
mapping : "author"
}, {
name : "createdTime",
type : "string",
mapping : "createdTime"
}, {
name : "rowId",
mapping : "rowId"
}]);
// Reader
var reader = new Ext.data.JsonReader({totalProperty:"totalProperty",root:"root"}, News);
// Store ---3：
var store = new Ext.data.Store({
proxy : proxy,
reader : reader
});
store.load({params:{start:0,limit:2}});
Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
title : " ",
width : 500,
autoHeight : true,
cm : cm,
sm : sm,
// ColumnModel sm grid ， ：
//1. ；
//2. CheckBox
store : store,
renderTo : "a",
autoExpandColumn : "title",
tbar : [{
text : " ",
icon : "../extjs/resources/images/default/dd/drop-no.gif",
cls : "x-btn-text-icon",
handler : function() {
var rsm = grid.getSelectionModel();
var view = grid.getView();
var store = grid.getStore();
for (var i = view.getRows().length - 1; i >= 0; i--) {
if (rsm.isSelected(i)) {
store.remove(store.getAt(i));
}
}
view.refresh();
}
}, {
text : " ",
icon : "../extjs/resources/images/default/dd/drop-no.gif",
cls : "x-btn-text-icon",
handler : function() {
Ext.Msg.confirm(" ", " ？", function (btn) {
if (btn == "yes") {
var store = grid.getStore();
store.removeAll();
grid.getView().refresh();
}
})
}
}, '-', { //'-' | '->'
text : " ",
icon : "../extjs/resources/images/default/dd/drop-add.gif",
cls : "x-btn-text-icon",
handler : function() {
Ext.Msg.prompt(" ", " ：", function (btn, txt) {
var newItem = {
title : txt,
author : "Kong",
createdTime : new Date()
}
var news = new News(newItem);
grid.getStore().insert(0, news); // 、grid.getStore().add(news);
grid.getView().refresh();//
})
}
}, {
text : " ",
icon : "../extjs/resources/images/default/dd/drop-yes.gif",
cls : "x-btn-text-icon",
handler : function() {
var rsm = grid.getSelectionModel();//
for (var i = 0; i < grid.getView().getRows().length; i++) {
if (rsm.isSelected(i)) {
var record = grid.getStore().getAt(i);
var title = record.get("title_cm");
var author = record.get("author");
var createdTime = record.get("createdTime");
var rowId = record.get("rowId");
Ext.Msg.alert("Info", title + "<br/>" + author + "<br/>" + createdTime + "<br/>" + rowId);
}
}
}
}, {
text : " ",
icon : "../extjs/resources/images/default/dd/drop-yes.gif",
cls : "x-btn-text-icon",
handler : function() {
var rsm = grid.getSelectionModel();
if(rsm.getCount()==1){
var r = rsm.getSelected();
//alert(r.get("title_cm"));
// for (var i = 0; i < grid.getView().getRows().length; i++) {
// if (rsm.isSelected(i)) {
// alert(grid.getStore().getAt(i).get("title_cm"));
//}
//}
}else{
Ext.Msg.alert(" "," ！");
}
}
}],
bbar:new Ext.PagingToolbar({
pageSize:2,
store:store,
displayInfo:true,
displayMsg:' {0} {1}, {2} ',
emptyMsg:' '
}),
buttonAlign : "right",
buttons : [{
text : " ",
handler : function() {
var rowSelectModel = grid.getSelectionModel();
//
rowSelectModel.selectFirstRow();
}
}, {
text : " ",
handler : function() {
var rsm = grid.getSelectionModel();
if (!rsm.hasPrevious()) {
Ext.Msg.alert(" ", " ");
} else {
rsm.selectPrevious();
}
}
}, {
text : " ",
handler : function() {
var rsm = grid.getSelectionModel();
if (rsm.hasNext()) {
rsm.selectNext();
} else {
Ext.Msg.alert(" ", " ");
}
}
}, {
text : " ",
handler : function() {
var rsm = grid.getSelectionModel();
rsm.selectAll();
}
}, {
text : " ",
handler : function() {
var rsm = grid.getSelectionModel();
rsm.deselectRange(0, grid.getView().getRows().length - 1);
//grid.getView().getRows().length
// ：Ext.grid.RowSelectionModel getCount
}
}, {
text : " ",
handler : function() {
var rsm = grid.getSelectionModel();
for (var i = grid.getView().getRows().length - 1; i >= 0; i--) {
if (rsm.isSelected(i)) {
rsm.deselectRow(i);
} else {
rsm.selectRow(i, true);
//selectRows ，
// rsm.selectRow(i)，
}
}
}
}]
});
//store.load({params:{start:0, limit:3}});
});
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
