基于ExtJS实现床位卡

浏览数：49 / 时间：2015年06月09日

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这才是场景开发中最重要的地方

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

<!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>