TabPabel基础

来源:互联网 发布:淘宝店铺数据怎么看 编辑:程序博客网 时间:2024/05/15 03:53

摘要链接:http://www.cn-java.com/www1/?uid-551263-action-viewspace-itemid-4286

这份教程目的在于对TabPanel类进行一次快速介绍。所提及的知识都是来自我对TabPanel范例、Ext源码和API文档的学习。到本文最后,你应该完成好一个Tab Panel,这个TabPanel能够:

  • 创建新tab,其内容来自一个URL。
  • 判断某个tab是否存在,有的话加载新内容。

 Step 1: 创建 HTML 骨架

我们将会用下列HTML,和Ext一齐构建一个基本的结构。复制这些内容到一个叫tptut.heml的文件,并要求是运行在服务端的,当然 也要保证ext-all.cssext-base.js, 和 ext-all.js这些Ext安装路径的正确。然后按照以下步骤创建tab_actions.js:

<html><head><title>TabPanel教程</title><!-- Ext CSS and Libs --><link rel="stylesheet" type="text/css"href="../include/ext2/resources/css/ext-all.css" /><script type="text/javascript"src="../include/ext2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../include/ext2/ext-all.js"></script> <!-- Custom CSS and Libs --><script type="text/javascript" src="./tab_actions.js"></script><style>#actions li {margin:.3em;}#actions li a {color:#666688;text-decoration:none;}</style></head><body>  <ul id="actions" class="x-hidden"><li><a id="use" href="#">Use Existing Tab</a></li><li><a id="create" href="#">Create New Tab</a></li></ul> <div id="tabs"></div></body></html>

以上代码有两个地方的元素需要注意。我们将使用"actions"(动作列表)这种简易的实现来执行tab的创建。"tabs"的那个div将用于Tab面板中第一个默认tab的容器。

 Step 2: Ext结构的构建

在刚才那个目录中创建一个文文件。就叫做作tab_actions.js,加入下面JavaScript.


Ext.onReady(function(){   // 包含actions的菜单    var tabActions = new Ext.Panel({    frame.:true,    title: 'Actions',    collapsible:true,    contentEl:'actions',    titleCollapse: true    })// 保持actions菜单的父面板    var actionPanel = new Ext.Panel({    id:'action-panel',    region:'west',    split:true,    collapsible: true,    collapseMode: 'mini',    width:200,    minWidth: 150,    border: false,    baseCls:'x-plain',    items: [tabActions]    })// 主面板(已有tab)    var tabPanel = new Ext.TabPanel({region:'center',deferredRender:false,autoScroll: true, margins:'0 4 4 0',activeTab:0,items:[{id:'tab1',contentEl:'tabs',    title: 'Main',    closable:false,    autoScroll:true}]    })//  配置视图viewport    viewport = new Ext.Viewport({           layout:'border',           items:[actionPanel,tabPanel]});});

上面的代码被套上一个Ext.onReady的函数,以防止页面元素未全部加载就执行代码了。接着要做的事情是将我们的动作列表(Action list)转换到名字为tabActions的那个面板,该命名是由contentEl (content element)(内容元素)这个配置项参数所指定的。

接着,创建一个父面板actionPanel来保持菜单面板。我们已tabActions 作为一个item项的参数。由于actionPanel会由视图Viewport的LayoutManager来页面定位,所以我们须在配置项对象中指定一个区域。

第三个步骤是创建TabPanel(Tab面板)本身。我们想在页面居中,即是对应于视图的中部。还要将一系列的tab配置项对象参数传入到面板中。在这里例子中,参与内置渲染的只有一个tab,但是多个也是可以的。如能确定每个面板在页面上能够被当作容器使用,便可以成为该数组的元素。像当前的情况,我们是把tabs作为第一个面板的内容元素。 要注意,我们这指出了tab的Id。这就是我们稍后获取的tab的依据。

最后,我们设置视图, 用于浏览器可视区域的控制。 所需要做的就是指定一个布局(layout)和什么要显示的组件。组件已经由视图的LayoutMangager(视图管理器)配置好适合放置的区域。

这时,你应该在浏览器观察到,包含Acitons菜单的两个格式化列在左边,tab面板占据了屏幕的其余位置。

 Step 3: 创建Tab控制逻辑

现在我们所需的元素已经创建好了, 可以增加Tab面板的创建(creating)和更新(updating)方法。 在当前目录中新建三个页面以便我们的测试:

  • loripsum.html
  • sample0.html
  • sample1.html

这三分文件的实际内容无关紧要, 但最好是每份的内容应该有所不同,好让tab加载内容后区别开来。

打开tab_actions.js,在viewport创建的位置插入下列代码:

// 在中间的面板加入tab    function addTab(tabTitle, targetUrl){        tabPanel.add({    title: tabTitle,    iconCls: 'tabs',    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},    closable:true}).show();    }     // 更新tab内容,如不存在就新建一个    function updateTab(tabId,title, url) {    var tab = tabPanel.getItem(tabId);    if(tab){    tab.getUpdater().update(url);    tab.setTitle(title);    }else{    tab = addTab(title,url);    }    tabPanel.setActiveTab(tab);    }     // 映射连接的id到函数    var count = 0;    var actions = {    'create' : function(){    addTab("New Tab",'loripsum.html');    },    'use' : function(){    // 演示页之间的轮换    updateTab('tab1','替换' + count + ' 次','sample'+(count%2)+'.html');    count++;        }    }function doAction(e, t){    e.stopEvent();    actions[t.id]();    }     // body初始化后,viewport setup过后才能执行下面的代码    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});

函数addTab(...) 需要标题title和URL字符串两个参数,然后传递到tabPanel.add(...)里的配置项对象。 这会返回创建好的面板对象,上面的代码立即调用了show()方法显示内容。

函数updateTab(...) 需要多个tabId的参数,以便能检测这个tab是否存在。如果是,面板会获取Updater进行面板内容的更新。若然不是,会调用addTab(...)创建tab。

最后一个步骤, 增加一个actionPanel的监听器,来响应选区动作之后的事件后,执行相应的函数。先要说明的是,actions是一创建好的对象,对象可被认为是一种哈希表(HashTable)或是字典(Dictionary),一一映射了动作和方法两者。注意“键key”对应于HTML list项。 由于方法比较简单,我们就直接这里写好了。变量counter用于清晰显示tab之间的切换,没有其他特定的功能。


事件处理器(event handler)doAction(...)执行时会有两个参数传入:事件对象和目标对象,actions函数查找目标对象的id然后执行相应的方法。 当任意一个actionPanel's的组件被按下,将会触发mousedown的事件,侦听器立即通知已登记的事件处理器doAction(...)运行。 被按下的那个组件便是事件对象的目标。

0 0
原创粉丝点击