`
阿牛ge
  • 浏览: 104721 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

学习ExtJs(1):TabPanel不能AutoLoad的问题

阅读更多
最近在学习Ext Js以及jQuery,网络中对这两Javascript的框架各有褒贬。我还没有最终决定采用哪一个框架,不过了解了一下jQuery,发现如果要实现Ext JS的许多功能,需要自己寻找插件。对比一下:
    一、寻找是费时费力的事情,还要试用才知道是不是适合你;
    二、决定了就要学习各种插件的使用,虽然是插件,但是编程风格一定不同;
    三、你也不知道哪天开始,你所要的插件不更新了,淘汰了
    四、最重要的,等你收集够了你需要的插件,估计总体js文件的尺寸也不小了

所以,本人应该更加倾向于Ext JS,它有一个稳定、成熟的开发团队,产品延续性会更强,编程风格也能一脉相承,不用再去学习和适应不同人编写的插件的风格。虽然个头大一点,不过带宽总是再增加的。

忘记说明:本人的目的很简单:只要达到灵活使用框架而已。

前面的废话算是学习ExtJS的序片吧,哈哈……

回到正体:相信有不少朋友遇到不能AutoLoad的问题,看看ExtJs的例子,怎么他们可以。其实你如果在本地硬盘运行例子,也是不可以的。差别就在于你要把自己试验的文件放到Web服务器的虚拟路径中,就可以读去了。

答案很简单,不过费了我不少时间!因为我都是在Windows路径直接编辑js文件,也是直接双击打开测试的文件。在一般调试的时候没有问题,遇到autoLoad它就不执行了!

看下面:
items:[{id:"tab1",title:"面板1",closable:true,html:"<h1>第一面版内容</h1>"},{id:"tab2",title:"面板2",autoLoad:'ajax1.html'}]

ajax1.html替换为你自己的文件,没有特别的讲究。

但是如果load的文件中包含js代码,需要这样写:
id:"tab2",title:"面板2",autoScroll:true,autoLoad:{url:'Panel.html',scripts:true}

Panel.html正常运行在Tab里面。

/*2009-09-03 重要补充 */
前面说到panel.html可以运行,但是后来折腾了一下,发现autoload的时候又不能正常运行,调试了很久也没有结果。单独运行,无论在IE还是Firefox都正常,最终只能暂时放下。

今天在继续研究Ext其它东西的时候,慢慢的又回到了autoload的话题上,最终被我发现,如果被Load的页面同样包含ext-base.js, ext-all.js 的文件,就不会运行代码。

不过我没有深究原因,有兴趣的朋友可以研究一下,并能告诉结果的话,我会非常感谢!


分享到:
评论
2 楼 星际大篷车 2012-08-22  
请问一下,我把例子发布在tomcat下,但是怎么还是不能读取呢?
1 楼 yadsun 2010-01-12  
貌似是因为autoload的内容是被直接替换到包含它的元素的body中去的,所以如果那个页面已经引用了某个js文件上,你再引入一次,重复引入了,所以autoload的目标页面中是不需要引入已经引入的文件了

相关推荐

    extjs4.2.1 tabPanel刷新及关闭标签

    ### ExtJS 4.2.1 TabPanel 刷新与关闭标签功能详解 #### TabPanel 组件简介 在ExtJS框架中,`TabPanel`组件是一个非常实用且强大的UI控件,它允许用户在一个界面上组织多个相关的视图或面板,并通过标签页的形式...

    ExtJs部署及使用方法

    1. **ExtJs核心资源**: - `extEngine/ext-all.js`: 包含所有ExtJs功能的主脚本文件。 - `extEngine/adapter/ext/ext-base.js`: 适配器脚本文件。 - `extEngine/resources/css/ext-all.css`: ExtJs默认样式表。 ...

    Extjs中通过Tree加载右侧TabPanel具体实现

    在Extjs中,实现左侧功能树到右侧TabPanel的动态加载是一个常见的需求。为了完成这一需求,开发者需要利用Extjs的组件和事件系统。具体来说,在Extjs4.1版本中,涉及到的主要知识点包括Ext.tree.Panel(用于展示树形...

    JavaScript.-Extjs基础学习笔记

    根据给定的文件信息,我们可以深入探讨两个关键的Extjs组件——Tab Panel(标签页控件)和Grid(表格控件)。这两个控件是Extjs框架中非常实用且功能丰富的部分,广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...

    课程ExtTabPanel文档tab嵌套tab.pdf

    【Ext.TabPanel】是ExtJS库中的一个组件,主要用于创建带有多个选项卡的用户界面。在本文中,我们将深入探讨如何使用Ext.TabPanel创建和管理选项卡,包括基本的使用方法、内容引入方式以及如何实现选项卡的嵌套。 1...

    extjs树形结构实现系统主界面功能框架借鉴.pdf

    1. **树形结构**:EXTJS的TreePanel组件用于构建树形结构。在这个例子中,树形结构的每个叶子节点代表一个可打开的面板(Tab)。当用户点击树中的一个叶子节点时,`addPanel` 函数会被调用,创建一个新的选项卡并...

    Ext3.0最经典的学习教程.pdf

    《Ext3.0最经典的学习教程》深入浅出地介绍了ExtJS的核心概念和技术细节,对于希望利用ExtJS构建高效、美观的Web应用程序的开发者来说,是一份不可或缺的参考资料。通过学习和实践这些知识点,开发者将能够更好地...

    ExtTabPanel文档tab嵌套tab.pdf

    在HTML文件中,你需要包含Ext的基础脚本文件`ext-base.js`和完整的库文件`ext-all.js`,以及CSS样式表文件`ext-all.css`,确保这些文件路径正确无误,以便于ExtJS库能正常运行。 创建一个简单的TabPanel,有两种...

    Ext 开发指南 学习资料

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 A.9. 有关grid的一些小问题 A.9.1. 如何让grid总所有的列都支持排序 A.9.2. 修改一个grid的ColumnModel和Store A.9.3. 动态为ds添加参数baseParams A.10. 有关...

    EXT2.0中文教程

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者列表 ...

Global site tag (gtag.js) - Google Analytics