ExtJS模板与菜单的使用案例-床位卡
ExtJS的模板的使用：
项目中场景基本就是表格模型：
TPL:自己编写模板
store：数据源
UI组件:
tbar，rbr，bbar实现工具栏
PageBar与StatusBar:可以针对TPL的组件进行分页
SVG可以实现路径绘图
DataView就是UI与TPL,Store联系起来
==============================================
提示组件：
var tip = new Ext.ToolTip({
target: 'dp',
title: '提示详细',
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:'检查检验',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" ></div>'); new Ext.Panel({ title: '床位卡面板', id: 'images-view', 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 > </div> </body> </html>