- 浏览: 462510 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
njliukang:
请问一下,如果是异步树,应该怎么解决?貌似用expandpat ...
ExtJS Tree刷新后自动展开并选择节点 -
xiaoyueyue5721:
这是ScriptDataSet,如果换成OdaDataSet呢 ...
Birt动态填充DataSet数据 -
leexiaodong2009:
我准备要用那个锁定。
ExtJS 3.0 优秀扩展简介 (持续更新) -
babyhhcsy:
pizza823 写道分享下另外中方法store里面不用变在列 ...
ExtJS EditorGridPanel中时间日期编辑问题的总结 -
冷月宫主:
高手,请问一下有没有使用Ext做过多表头锁定左侧指定列的处理? ...
仅供纪念,曾做过的一些界面截图
模拟下tab....
为何要这样呢... 需要一个tab样式的标签页,但是点击后不希望切换panel,而是做一些其他的操作.
当然,可以通过其他方法操作TabPanel达到效果,但是觉得不好.(代码在后面第2段)
模拟Tab的代码,两种方式:
一种是XTemplate+Panel,然后自己监控事件
一种是XTemplate+DataView,这种就优雅多了.
先上图,免得大漠猪又说我...
代码如下:
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '/images/s.gif'; Ext.QuickTips.init(); testTab(); }); function testTab(){ //::用xtemplate+panel模拟:: //firebug偷来的,可以精简 var tpl = new Ext.XTemplate( '<div class="x-tab-panel-header x-unselectable x-tab-panel-header-plain" style="-moz-user-select: none; width:100%;">', '<div class="x-tab-strip-wrap">', '<ul class="x-tab-strip x-tab-strip-top">', '<tpl for=".">', '<li class="{[values.isActive?"x-tab-strip-active" : ""]}">', '<a onclick="return false;" class="x-tab-strip-close"/>', '<a onclick="return false;" href="#" class="x-tab-right">', '<em class="x-tab-left">', '<span class="x-tab-strip-inner">', '<span class="x-tab-strip-text ">{values.name}</span>', '</span>', '</em>', '</a>', '</li>', '</tpl>', '<li class="x-tab-edge"/><div class="x-clear"/>', '</ul>', '</div><div class="x-tab-strip-spacer"/>', '</div>' ); var str = tpl.apply([{name:'成功视图',isActive:true},{name:'失败视图'},{name:'错误视图'},{name:'加拨视图'}]) //顶上的Tab标签 var p=new Ext.Panel({ html:str, title:'::用xtemplate+panel模拟::', height:300, width:600, renderTo:document.body, listeners:{ 'render':function(panel){ //找到标签页 var tabs = panel.getEl().select('ul.x-tab-strip li[class!=x-tab-edge]'); //添加鼠标悬浮样式 tabs.addClassOnOver("x-tab-strip-over"); //点击事件 tabs.on('click',function(e,t,o){ var target = e.getTarget('li'); if (target) { var cls = t.className.trim(); if(cls!="x-tab-strip-active"){ //切换样式 tabs.removeClass("x-tab-strip-active"); Ext.fly(target).addClass("x-tab-strip-active"); //do sth... } } },this); }, scope:this, delay:1000 } }); //::用xtemplate+dataview模拟:: var view = new Ext.DataView({ autoWidth:true, autoHeight:true, store:new Ext.data.SimpleStore({ fields:['id','name',{name:'isActive',type:'boolean'}], data:[ ['tab_suc','成功视图',true], ['tab_err','失败视图',false], ['tab_fail','错误视图',false], ['tab_append','加拨视图',false] ] }), //item选择器 itemSelector:'li', //单选 singleSelect:true, multiSelect:false, //选中样式 selectedClass:'x-tab-strip-active', //鼠标悬浮样式 overClass:'x-tab-strip-over', //模板 tpl:new Ext.XTemplate( '<div class="x-tab-panel-header x-unselectable x-tab-panel-header-plain" style="-moz-user-select: none; width:100%;">', '<div class="x-tab-strip-wrap">', '<ul class="x-tab-strip x-tab-strip-top">', '<tpl for=".">', '<li class="">', '<a onclick="return false;" class="x-tab-strip-close"/>', '<a onclick="return false;" href="#" class="x-tab-right">', '<em class="x-tab-left">', '<span class="x-tab-strip-inner">', '<span class="x-tab-strip-text ">{values.name}</span>', '</span>', '</em>', '</a>', '</li>', '</tpl>', '<li class="x-tab-edge"/><div class="x-clear"/>', '</ul>', '</div><div class="x-tab-strip-spacer"/>', '</div>' ), listeners:{ 'afterrender':function(dataview){ //选中第一行 dataview.select(0); //do sth... }, 'click':function(dataview,index,node,e){ var record = dataview.getStore().getAt(index); alert("select:"+record.get('name')); //do sth... }, scope:this } }); var p = new Ext.Panel({ title:'::用xtemplate+dataview模拟::', height:300, width:600, renderTo:document.body, items:[view] }); }
用TabPanel实现的代码如下:
var tabPanel = new Ext.TabPanel({ //renderTo: document.body, activeTab: 0, //width:1000, //height:700, plain:true, defaults:{autoScroll: true}, items:[ { xtype:'panel', layout:'fit', title: '成功情况' },{ title: '失败情况', layout:'fit' },{ title: '系统错误情况', layout:'fit' },{ xtype:'panel', title:'加拨视图', layout:'fit' } ], listeners:{ 'tabchange':function(tabpanel,newTab,currentTab){ tabpanel.getActiveTab().add(grid); tabpanel.doLayout(); //if(currentTab==null)return true; //Ext.log(newTab.title) //return false; } } });
评论
3 楼
atian25
2012-12-27
lightyear416 写道
ExtJs的这个tab标签在美观上有个致命的硬伤,就是标签下的第二根横线,把标签和内容分割成了看似两个部分,你有办法修改样式表,或者采用别的办法让第二根线隐藏掉,或者看起来和内容一色吗?
刚试了下,修改tabpanel下的body, 加一个border-top:0px应该就ok了.
如下图,我这方法比较粗暴。
具体的样式应该如何覆盖,就需要你看下tabpanel的css class层次了。
http://dl.iteye.com/upload/attachment/0078/4706/de86eab6-508e-3ad9-87c7-c8ab09ea539f.png
2 楼
atian25
2012-12-27
lightyear416 写道
atain25我在官网论坛上看你发帖好几次了,知道你很厉害。
我有一个问题想请教你,看你能不能试着实现一下。
ExtJs的这个tab标签在美观上有个致命的硬伤,就是标签下的第二根横线,把标签和内容分割成了看似两个部分,你有办法修改样式表,或者采用别的办法让第二根线隐藏掉,或者看起来和内容一色吗?
我有一个问题想请教你,看你能不能试着实现一下。
ExtJs的这个tab标签在美观上有个致命的硬伤,就是标签下的第二根横线,把标签和内容分割成了看似两个部分,你有办法修改样式表,或者采用别的办法让第二根线隐藏掉,或者看起来和内容一色吗?
过誉了....抱歉,很久没用extjs了... 我对css也不擅长, 你可以试着用chrome开发者工具,分析下对应的dom, 然后改改吧。
1 楼
lightyear416
2012-12-25
atain25我在官网论坛上看你发帖好几次了,知道你很厉害。
我有一个问题想请教你,看你能不能试着实现一下。
ExtJs的这个tab标签在美观上有个致命的硬伤,就是标签下的第二根横线,把标签和内容分割成了看似两个部分,你有办法修改样式表,或者采用别的办法让第二根线隐藏掉,或者看起来和内容一色吗?
我有一个问题想请教你,看你能不能试着实现一下。
ExtJs的这个tab标签在美观上有个致命的硬伤,就是标签下的第二根横线,把标签和内容分割成了看似两个部分,你有办法修改样式表,或者采用别的办法让第二根线隐藏掉,或者看起来和内容一色吗?
发表评论
-
[4.x] Ext.ux.button.AutoRefresher
2011-05-23 11:22 2667/** * @class Ext.ux.b ... -
ExtJS 4.x 定制你的js
2011-05-01 00:04 0... -
ExtJS4.x 随笔(2011-04-29更新)
2011-04-29 13:41 36961.某个激活/禁用的checkboxfield,需要提交后台的 ... -
ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)
2011-04-27 15:24 12529Ext4.0 自带的Ext.ux.RowEditing还不够完 ... -
ExtJS Tree刷新后自动展开并选择节点
2010-07-29 10:48 17620很久没写EXTJS的tip了... 今天帮组员写了一个 ... -
仅供纪念,曾做过的一些界面截图
2010-07-06 16:55 3371仅供记录用. 1.亚运(EXTJS) ... -
ExtJS3.x 随笔(2010-07-08更新)
2010-07-02 17:15 3519谨用该贴来记录一些使 ... -
Ext JS 3.2.0发布 -- 不少令人振奋的特性(更新翻译后的release-notes)
2010-04-01 15:02 3730不少令人振奋的新功能 1.form里面的复合组件 ---写 ... -
ExtJS EditorGridPanel中时间日期编辑问题的总结
2009-09-23 09:48 10140老是被反复问到这个问题,烦了...总结下... 1.首 ... -
Ext 3.0.1 Release Notes
2009-08-31 07:58 3920难熬的三天....JE终于恢复了.... 可惜要付费 ... -
也谈谈Ext.Grid之记录用户使用习惯—隐藏列
2009-08-27 15:58 7549在论坛看到http://www.iteye ... -
ExtJS 常见问题 - by tz
2009-08-14 16:13 0经常在群里面被问到的一些问题,不如汇集起来算了... ... -
ExtJS 3.0 优秀扩展简介 (持续更新)
2009-08-14 10:14 17182自带示例里面的扩展就 ... -
ExtJS 2.3/3.0 定制你所需要的模块
2009-08-12 13:49 13221很实在的一个需求,就是 ... -
ExtJS Combo 下拉列表正常显示HTML标签内容
2009-08-11 15:02 5862解决问题: http://www.iteye.com/pro ... -
ExtJS 3.0 Designer Preview (官方的IDE可视化工具)
2009-08-11 12:35 24634原文地址: http://extjs.com/blog/200 ... -
ExtJS Menu嵌套combo等控件时,自动隐藏/遮盖等bug的解决方案
2009-08-06 12:41 61362010-07-08补充: DateField隐藏的 ... -
ExtJS 输入框/MessageBox.prompt 禁止粘贴
2009-07-30 13:33 6734回答问题http://www.iteye.com/proble ... -
ExtJS 修复3.0里面的LovCombo(下拉多选框)的Bug
2009-07-27 16:16 11288如果你不知道lovcombo是什么,看http://setti ... -
续:ExtJS Chart 扩展(重构了下,并写了个新的示例--内存监控)
2009-07-27 15:55 5895续前文:http://atian25.iteye.com/bl ...
相关推荐
Extjs+SpringMVC+MyBaits财务管控系统
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
Extjs+java+swf多文件上传进度条显示项目 采用了swf插件 后端使用java servlet 项目简单使用 页面美观,希望能多交流
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe
Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南
EXTJS + Struct +mysql 数据库脚本包含在类 json实现前台后台数据通信
利用dwr,整合extjs,spring,hibernate.是你学习dwr的参考指南
extjs+demo+apiextjs+demo+apiextjs+demo+apiextjs+demo+api
extjs+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码
EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统EXTJS+2.1+酒店管理系统
Extjs+hibernate+struts2+spring案例大全源代码,适合初学者下载使用,欢迎大家下载,欢迎大家交流
这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码:主要运用了一下的知识: 1、主要运用的后台框架是extjs, 2、jsp+hibernate+Struts2+spring+ajax+jQuery, 3、用到了Java面向对象的...
ExtJS+3.3+API+中文文档
ExtJs + api + 笔记 + 完整包
简单extjs+json+servlet实现,页面展示,仅供大家参考
extjs+struts+hibernate+spring(物流管理系统) 中的jar包
Extjs+Spring+Hibernate实现分页
extjs+spring+struts+hibernate整合实例
extjs 轻松搞定EXTJS.pdf +很多DEMO 高清 高质量 案例