您的位置：首页 > Web前端 > JavaScript

ExtJS模板与菜单的使用案例-床位卡

2014-09-13 21:37 127 查看
ExtJS的模板的使用：

项目中场景基本就是表格模型：

　　TPL:自己编写模板

　　store：数据源

　　UI组件:

　　tbar，rbr，bbar实现工具栏

　　PageBar与StatusBar:可以针对TPL的组件进行分页

　　SVG可以实现路径绘图

　DataView就是UI与TPL,Store联系起来

==============================================

提示组件：

var tip = new Ext.ToolTip({
target: 'dp',
title: '提示详细',
width:200,
html: '确定要查看这个床位的病人的详细信息吗?',
trackMouse:true
});

任务组件:

ExtJS对定时的任务的设置，一般的场景就是页面的定期的刷新，比如30分钟，对比Flex的刷新任务也类型，其实就是他的编程模型简单，理解起来也是比较容易

定时器，模板TPL，Store这才是场景开发中最重要的地方

============================================

这个案例在应用场景个人感觉比较多：

　　tpl模板

　　提示toop：大量使用

　　菜单：在开发中大量使用

===============================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="data-view.css" />
<script language="JavaScript" src="ext-3.4.0/adapter/ext/ext-base.js">
</script>
<script language="JavaScript" src="ext-3.4.0/ext-all.js">
</script>
<script language="JavaScript">
Ext.onReady(function(){

var rightMenu = new Ext.menu.Menu({
items: [{
text: '执行医嘱',
handler: function(){
alert("执行医嘱");
}

}, {
text: '浏览病程',
handler: function(){
alert("浏览病程");
}

}, {
handler: function(){
alert("病案首页");
},
text: '病案首页'
}, '-', {
text: '检查检验',
handler: function(){
new Ext.Window({title:'检查检验',width:400,height:300,html:'减价检验详细',buttons:[{text:'确定'}]}).show();
}
}]
});

var store = new Ext.data.JsonStore({
fields: ['name', 'url', 'shortName',{
name: 'size',
type: 'float'
}, {
name: 'lastmod',
type: 'date',
dateFormat: 'timestamp'
}],
data: [{
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'aaaaaaaaaaaaa'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}]
});

var tpl = new Ext.XTemplate('<tpl for=".">', '<div class="thumb-wrap" id="{name}">', '<div class="thumb"><img src="{url}" title="{name}"></div>', '<span class="x-editable">{shortName}</span></div>', '</tpl>', '<div class="x-clear"></div>');

new Ext.Panel({
title: '床位卡面板',
id: 'images-view',
width: 720,
height: 300,
renderTo: 'div',
items: new Ext.DataView({
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
overClass: 'x-view-over',
emptyText: 'No images to display',
listeners: {
contextmenu: function(dataView, index, node, e){
if (node.tagName == "IMG") {
dataView.menu = rightMenu;
dataView.menu.showAt(e.getXY());
e.stopEvent();
}
}
}
}),
listeners: {
selectionchange: {
fn: function(dv, nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
}
}
}

});

Ext.getBody().on("contextmenu", Ext.emptyFn,null, {preventDefault: true});
});
</script>
</head>
<body>
<div id="div">
</div>
</body>
</html>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航