查看: 473|回复: 3
自己做的静态页面，如何调用discuz 头部文件，
本次悬赏总金额：10 金币 |
剩余悬赏金额：10 金币
本次悬赏到期时间：
本悬赏贴永不过期。
，每次获得楼主奖励时可获得系统额外30金币的系统奖励。
只允许悬赏会员本人发放悬赏金币
只允许版主或管理员收回悬赏金币
最多悬赏人数：10人
还没有会员获得悬赏奖励，加油，快来争头奖！
我来答复这个问题
rt，我直接在html中加{template header}和{template footer}结果不行，请高手指点。
把本文推荐给朋友或其他网站上，每次被点击增加您在本站积分：1金币
只能默默的顶起！！！
header.html这个文件存储于common文件下，这个大家应该不陌生吧，我是每个DIV为小节来讲，头部的核心div我就不加if语句来讲解！因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
第1行代码：
&!--{subtemplate common/header_common}--&
代码解释：用于调用common文件下的header_common.html文件，
备注：&!--{subtemplate}--&与&!--{template}--}--&是有区别的，&!--{subtemplate }--&后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候，程序就会判断&!--{subtemplate }--&所引入的模板会被再一次解析一遍然后再和入口模板拼合，组成一个完整的模板。也就是说，如果我们添加的模板是在别的模板中被调用的话我们需要以&!--{subtemplate 模板名称}--&的方式引入进来。
第2-29行代码：
从&meta name=&application-name& content=&$_G['setting']['bbname']& /&开始到以&/head&结尾
代码解释：这里主要放置一些外部文件，其中的代码不多作解释，大家在加的时候请考虑官方的书写规范！
备注：此处虽然不解释太多，但大家还是会用到！如果要加外部调用JS、css请按官方的模板制作规范来书写
第30-186行代码：
从&body&处开始到此文件的最下方
代码解释：这是首部文件的核心
备注：在修改时请注间要提前备份文件
第32-44行代码：
从&div id=&append_parent&&&/div&&div id=&ajaxwaitid&&&/div&处开始到&!--{/if}--&&div id=&toptb& class=&cl&&结尾
代码解释：此处是整的DIY样式导入、导出及样式修改等，此处代码是隐藏的，
备注：&div id=&toptb& class=&cl&&是方便你查找才写出！此代码不要修改，在修改模板时也不要漏了！
第32-44行代码：
从代码：&div id=&toptb& class=&cl&&到&/div&&!--{if !IS_ROBOT}--&
代码解释：顶部文件，用于放置导航与dz内部的一些功能，&div class=&y&&右处内容&/div&,&div class=&z&&左处内容&/div&
备注：在后台=》界面=》顶部导航。可以设置
第70-78行代码：&!--{if !IS_ROBOT}--&
& && && && && && && && &&!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}--&
& && && && && && && && && && &&&&div id=&sslct_menu& class=&cl p_pop& style=&display:&&
& && && && && && && && && && && && && & &!--{if !$_G[style][defaultextstyle]}--&&span class=&sslct_btn& onClick=&extstyle('')& title=&{lang default}&&&i&&/i&&/span&&!--{/if}--&
& && && && && && && && && && && && && & &!--{loop $_G['style']['extstyle'] $extstyle}--&
& && && && && && && && && && && && && && && && &&span class=&sslct_btn& onClick=&extstyle('$extstyle[0]')& title=&$extstyle[1]&&&i style='backgroundextstyle[2]'&&/i&&/span&
& && && && && && && && && && && && && & &!--{/loop}--&
& && && && && && && && && && &&&&/div&
& && && && && && && && &&!--{/if}--&
复制代码代码解释：此处是拓展色的切换的菜单
备注：如里不需要可以删除
第80-96行代码：&div id=&qmenu_menu& class=&p_pop {if !$_G['uid']}blk{/if}& style=&display:&&
& && && && && && && && && && && && && & &!--{if $_G['uid']}--&
& && && && && && && && && && && && && & &ul&
& && && && && && && && && && && && && && && && &&!--{loop $_G['setting']['mynavs'] $nav}--&
& && && && && && && && && && && && && && && && && && &&&&!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] & 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--&
& && && && && && && && && && && && && && && && && && && && && & &li&$nav[code]&/li&
& && && && && && && && && && && && && && && && && && &&&&!--{/if}--&
& && && && && && && && && && && && && && && && &&!--{/loop}--&
& && && && && && && && && && && && && & &/ul&
& && && && && && && && && && && && && & &!--{else}--&
& && && && && && && && && && && && && && && && &&div class=&ptm pbw hm&&
& && && && && && && && && && && && && && && && && && &&&{lang my_nav_login}
& && && && && && && && && && && && && && && && &&/div&
& && && && && && && && && && && && && & &!--{/if}--&
& && && && && && && && && && &&&&/div&
& && && && && & &!--{/if}--&
复制代码代码解释：此处是快捷导航弹出的菜单，里面用到了&!--{if $_G['uid']}--&语句进行判断，意思是只有会员才可以浏览此处内容，循环我就不多讲了哈
备注：&!--{if $_G['uid']}--&语句可以用到很多地方，自己在做模板的时候，可能会用到！
第97行代码：&!--{ad/headerbanner/wp a_h}--&
代码解释：头部的广告代码，
备注：可以在后台=》运营=站内广告添加
第98-184行代码：
从&div id=&hd&&到 &/div&&!--{/if}--&
代码解释：头部的核心文件
备注：下面是头部核心的DIV指引
&div id=&hd&&
& && &&&&div class=&wp&&
& && && && & &div class=&hdc cl&&
& && && && && & &h2&logo&/h2&----------------------------------&logo
& && && && && &&&&div id=&um&&
& && && && && && && && && &&&&div class=&avt y&&头像&/div&-----------------------------头像
& && && && && && && &&&&p&
& && && && && && && && &&&&!--{hook/global_usernav_extra1}--&------------------------------------&插件嵌入点1
& && && && && && && && &&&&!--{hook/global_usernav_extra2}--&---------------------------------&插件嵌入点2
& && && && && && && && &&&个人信息----------------------------------------&个人信息
& && && && && && && & &/p&
& && && && && && && & &p&
& && && && && && && && & &!--{hook/global_usernav_extra3}--&---------------------------&插件嵌入点3
& && && && && && && && & 个人信息----------------------------------------&个人信息&&
& && && && && && && &&/p&
& && && && && &&&&/div&
& && && && && && && &&&&!--{template member/login_simple}--&----- & 登录框(此处调用member/login_simple.html文件)& && && && && && && && & &/div&
& && && && &&&&div id=&nv&&
& && && && && && &&a href=&javascript:;& id=&qmenu& &快捷导航&/a&--------------&快捷导航
& && && && && & &ul&
& && && && && &&&&li&栏目导航&/li&---------------------------------&栏目导航
& && && && && &&&&/ul&
& && && && && & &/div&
& && && && && &&ul class=&p_pop h_pop& id=&plugin_menu& style=&display: none&&
& && && && && && && & 二级导航菜单样式------------------------------------------------------&二级导航菜单样式
& && && && && &&/ul&
& && && && &&&& div id=&mu& class=&cl&&&&
& && && && && && && && && & 二级导航横排&-------------&二级导航横排样式& &
& && && && &&&&/div&&&
& && && && &&&&!--{ad/subnavbanner/a_mu}--&-------------------------&头部广告（后台站点广告处可以添加）
& && && && && & &!--{subtemplate common/pubsearchform}--&--------&搜索(此处调用common/pubsearchform文件)& && && && && && & &/div&
& && &&&&/div&&!--{hook/global_header}--&插件嵌入点
总结：大家在修改的时候他的每个DIV和ul、li、和会有if语句，大家在看明白以上图后，在添加的时候要注意一下IF语句的作用，我就没有把代码复制到上面一一解析，希望大家去妍究下！利用这些资源，自己可以做出很漂亮的头部，举一反三！相信此
header.html这个文件存储于common文件下，这个大家应该不陌生吧，我是每个DIV为小节来讲，头部的核心div我就不加if语句来讲解！因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
第1行代码：
&!--{subtemplate common/header_common}--&
代码解释：用于调用common文件下的header_common.html文件，
备注：&!--{subtemplate}--&与&!--{template}--}--&是有区别的，&!--{subtemplate }--&后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候，程序就会判断&!--{subtemplate }--&所引入的模板会被再一次解析一遍然后再和入口模板拼合，组成一个完整的模板。也就是说，如果我们添加的模板是在别的模板中被调用的话我们需要以&!--{subtemplate 模板名称}--&的方式引入进来。
第2-29行代码：
从&meta name=&application-name& content=&$_G['setting']['bbname']& /&开始到以&/head&结尾
代码解释：这里主要放置一些外部文件，其中的代码不多作解释，大家在加的时候请考虑官方的书写规范！
备注：此处虽然不解释太多，但大家还是会用到！如果要加外部调用JS、css请按官方的模板制作规范来书写
第30-186行代码：
从&body&处开始到此文件的最下方
代码解释：这是首部文件的核心
备注：在修改时请注间要提前备份文件
第32-44行代码：
从&div id=&append_parent&&&/div&&div id=&ajaxwaitid&&&/div&处开始到&!--{/if}--&&div id=&toptb& class=&cl&&结尾
代码解释：此处是整的DIY样式导入、导出及样式修改等，此处代码是隐藏的，
备注：&div id=&toptb& class=&cl&&是方便你查找才写出！此代码不要修改，在修改模板时也不要漏了！
第32-44行代码：
从代码：&div id=&toptb& class=&cl&&到&/div&&!--{if !IS_ROBOT}--&
代码解释：顶部文件，用于放置导航与dz内部的一些功能，&div class=&y&&右处内容&/div&,&div class=&z&&左处内容&/div&
备注：在后台=》界面=》顶部导航。可以设置
第70-78行代码：&!--{if !IS_ROBOT}--&
& && && && && && && && &&!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}--&
& && && && && && && && && && &&&&div id=&sslct_menu& class=&cl p_pop& style=&display:&&
& && && && && && && && && && && && && & &!--{if !$_G[style][defaultextstyle]}--&&span class=&sslct_btn& onClick=&extstyle('')& title=&{lang default}&&&i&&/i&&/span&&!--{/if}--&
& && && && && && && && && && && && && & &!--{loop $_G['style']['extstyle'] $extstyle}--&
& && && && && && && && && && && && && && && && &&span class=&sslct_btn& onClick=&extstyle('$extstyle[0]')& title=&$extstyle[1]&&&i style='backgroundextstyle[2]'&&/i&&/span&
& && && && && && && && && && && && && & &!--{/loop}--&
& && && && && && && && && && &&&&/div&
& && && && && && && && &&!--{/if}--&
复制代码代码解释：此处是拓展色的切换的菜单
备注：如里不需要可以删除
第80-96行代码：&div id=&qmenu_menu& class=&p_pop {if !$_G['uid']}blk{/if}& style=&display:&&
& && && && && && && && && && && && && & &!--{if $_G['uid']}--&
& && && && && && && && && && && && && & &ul&
& && && && && && && && && && && && && && && && &&!--{loop $_G['setting']['mynavs'] $nav}--&
& && && && && && && && && && && && && && && && && && &&&&!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] & 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--&
& && && && && && && && && && && && && && && && && && && && && & &li&$nav[code]&/li&
& && && && && && && && && && && && && && && && && && &&&&!--{/if}--&
& && && && && && && && && && && && && && && && &&!--{/loop}--&
& && && && && && && && && && && && && & &/ul&
& && && && && && && && && && && && && & &!--{else}--&
& && && && && && && && && && && && && && && && &&div class=&ptm pbw hm&&
& && && && && && && && && && && && && && && && && && &&&{lang my_nav_login}
& && && && && && && && && && && && && && && && &&/div&
& && && && && && && && && && && && && & &!--{/if}--&
& && && && && && && && && && &&&&/div&
& && && && && & &!--{/if}--&
复制代码代码解释：此处是快捷导航弹出的菜单，里面用到了&!--{if $_G['uid']}--&语句进行判断，意思是只有会员才可以浏览此处内容，循环我就不多讲了哈
备注：&!--{if $_G['uid']}--&语句可以用到很多地方，自己在做模板的时候，可能会用到！
第97行代码：&!--{ad/headerbanner/wp a_h}--&
代码解释：头部的广告代码，
备注：可以在后台=》运营=站内广告添加
第98-184行代码：
从&div id=&hd&&到 &/div&&!--{/if}--&
代码解释：头部的核心文件
备注：下面是头部核心的DIV指引
&div id=&hd&&
& && &&&&div class=&wp&&
& && && && & &div class=&hdc cl&&
& && && && && & &h2&logo&/h2&----------------------------------&logo
& && && && && &&&&div id=&um&&
& && && && && && && && && &&&&div class=&avt y&&头像&/div&-----------------------------头像
& && && && && && && &&&&p&
& && && && && && && && &&&&!--{hook/global_usernav_extra1}--&------------------------------------&插件嵌入点1
& && && && && && && && &&&&!--{hook/global_usernav_extra2}--&---------------------------------&插件嵌入点2
& && && && && && && && &&&个人信息----------------------------------------&个人信息
& && && && && && && & &/p&
& && && && && && && & &p&
& && && && && && && && & &!--{hook/global_usernav_extra3}--&---------------------------&插件嵌入点3
& && && && && && && && & 个人信息----------------------------------------&个人信息&&
& && && && && && && &&/p&
& && && && && &&&&/div&
& && && && && && && &&&&!--{template member/login_simple}--&----- & 登录框(此处调用member/login_simple.html文件)& && && && && && && && & &/div&
& && && && &&&&div id=&nv&&
& && && && && && &&a href=&javascript:;& id=&qmenu& &快捷导航&/a&--------------&快捷导航
& && && && && & &ul&
& && && && && &&&&li&栏目导航&/li&---------------------------------&栏目导航
& && && && && &&&&/ul&
& && && && && & &/div&
& && && && && &&ul class=&p_pop h_pop& id=&plugin_menu& style=&display: none&&
& && && && && && && & 二级导航菜单样式------------------------------------------------------&二级导航菜单样式
& && && && && &&/ul&
& && && && &&&& div id=&mu& class=&cl&&&&
& && && && && && && && && & 二级导航横排&-------------&二级导航横排样式& &
& && && && &&&&/div&&&
& && && && &&&&!--{ad/subnavbanner/a_mu}--&-------------------------&头部广告（后台站点广告处可以添加）
& && && && && & &!--{subtemplate common/pubsearchform}--&--------&搜索(此处调用common/pubsearchform文件)& && && && && && & &/div&
& && &&&&/div&&!--{hook/global_header}--&插件嵌入点
总结：大家在修改的时候他的每个DIV和ul、li、和会有if语句，大家在看明白以上图后，在添加的时候要注意一下IF语句的作用，我就没有把代码复制到上面一一解析，希望大家去妍究下！利用这些资源，自己可以做出很漂亮的头部，举一反三！相信此
代码学的好，真是高手
很幸运，你获得了抢楼奖励！
只能默默的顶起！！！
很幸运，你获得了抢楼奖励！
站长推荐 /4
特别声明：金币直接兑换人民币，目前我们还是做不到的，但金币也并非毫无价值！我们已经为大家打造了一个 金币间接兑换人民币的渠道，
下面我就对咱们论坛的金币以及金币兑换成-人民币的方法进行详细的说明：
为了论坛的发展，也为了惠及更多的朋友，飘仙决定 从今天开始
大力招收版主，有闲时间的高手，刚学建站的新手，凡是有空儿的朋友大家都可以来试试，试试 不会有什么损失！赶快加入我们的管理团队吧（兼职）
为了增加论坛活跃度，论坛签名资源将由金币购买，请在快捷导航中找到“签名购买”操作。
首先：飘仙论坛是一个 提倡 互帮互助，互利互惠的论坛！飘仙已经明确告知  各版主，凡是 积极回复求助帖子且对求助者确有一定帮助的，看到  要加金币鼓励！当然  金币鼓励算不了什么，但这 说明了  飘仙的态度——希望大家能互帮互助，互利互惠，共同进步！
飘仙建站论坛创建于,您看到的内容均为会员发表,并不代表飘仙建站论坛立场,转载时请注明作者和出处!
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论!
咨询/投诉建议 联系:QQ
邮箱:admin＠piaoxian.net
Powered by当前位置： >
> 深入剖解ExtJS 2.2实现及应用连载(11): 左边导航菜单
深入剖解ExtJS 2.2实现及应用连载(11): 左边导航菜单
saveyou & at
深入剖析ExtJS 2.2实现及应用连载(11): 左边导航菜单
深入剖析ExtJS 2.2实现及应用连载(11): 左边导航菜单2.4.2左边导航菜单深入剖析ExtJS 2.2实现及应用连载& 版权所有，谢绝转载& 作者：彭仁夔 QQ：左边导航菜单就是Asp.net中TabBox控件。在这里，我们也是形成一个组件的形式，看起来实现是有点复杂，但是如果建立在Ext的组件架构基础之上，就一点也不难了。Ext有一种布局叫做accordion。它是专门用来处理这种效果，它可以应用在任何布局类中（如panel及其子类）。因为布局类中都会有着一些需要布局中的子组件。accordion布局的特性就是任何一个时候都只有一子组件处在激活状态，它的内容处在展开状态，其它不处在激活状态的子组件都会折叠其内容。如果布局类中的子组件都是面板的话（即Panel类），那么因为面板内容的折叠/展开都是针对于其head标题部分。也就是说展开时，可以看到其内容，没有折叠时能看到其head标题部分，这就和我们TabBox特别相似了。我们的TabBox是要在任何时刻都要显示每个Tab子项的标题，而任何一个时刻都要显示唯一的激活状态的Tab子项的内容。对于激活状态的Tab子项的高度，它会占据其它Tab子项的所没有占据的所有高度。这个accordion布局，在没有指定子组件时，也会根据子组件来自动计算激活状态子组件的高度以便占据整个剩余高度。那么说来我们就可以采用Panel布局上加上accordion布局来模拟整个TabBox控件，而itmes中子Panel组件来用模拟Tab子项。组件就是类的形式，那么我们通过Panel来构建这个LeftMenu类。为了使用这个leftMenu类拥有组件特性和Panel的功能，我们让它来继承于Panel类。那么如何使用LeftMenu类拥有Panel类的功能呢？第一是要继承于Panel类，第二是在LeftMenu类把当前的配置项都传入到Panel类的构建函数中去，同时改变它的作用域为当前LeftMenu类的作用域：代码清单2.8&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& LeftMenu中代码Morik.Office.LeftMenu = function(config) {Morik.Office.LeftMennstructor.call(this,config||{});①&&& //实现本类的功能&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ②}Ext.extend(Morik.Office.LeftMenu, Ext.Panel, {//加上LeftMenu类的方法});③对于继承，我们可以采用Ext.extend函数，把Panel类中所有的方法都继承到当前类来，另外我们还可以通过第三个参数来实现本类的方法，这个与在构建函数中通过this来实现方法有点不同，那就是其方法都定义在当前类的prototype中。在①处，我们通过Function类的call方法来改变Panel类的作用域为当前类的作用域，同时把配置项也传递给Panel类。这就是为什么在该类中能使用父类中定义的配置项。在①处我们完全是传入当前类的配置项，这里应该给了出一些默认值，而对于layout的配置项就不能通过当前类传入配置项来进行修改。看一下如何实现：代码清单2.9&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& LeftMenu中代码var d = Ext.apply( {// default set&&&&&&&&&&&&& split : true,&&&&&&&&&&&&& region : 'west',&&&&&&&&&&& width : 200,&&&&&&&&&&&&& defaults : {&&&&&&&&&&&&&&&&& border : false&&&&&&&&&&&&& },&&&&&&&&&&&&& layoutConfig : {&&&&&&&&&&&&&&&&& animate : true&&&&&&&&&&&&& }&&&&&&&&&& }, config || {}); &&& config = Ext.apply(d, {&&&&&& layout : 'accordion',&&&&&& collapsible : true&&& });&&& Morik.Office.LeftMennstructor.call(this, config);这段代码替换代码2.8中①处的代码。它首先apply把传入的配置项和默认是配置项组合起来，如果没有传入就采用默认的配置项。一般说来TabBox都会在左边区域。其默认的宽度差不多也就是200px。每个Tab条目都不需要边框。接下就是不管是否传入layout和collapsible的值为何值，都采用accordion布局和能折叠来进行配置。这两个是TabBox的核心，不能修改。通过这些，我们就能通过panel父类来实现它的显示出的样子。我们来运行下看看其效果。在看到其效果之后，我们得调用运行这个类，这个任务要在main.js中完成。即代码2.7第三步中去进行完成。我们讲到了LeftMenu的items子组一定要Panel。同时Panel中的内容是树形的条目（一般都是采用树形结构，也可以不采用）。对应图2.5,我们先创建两个子panel，这个两个子Panel中items又含有一棵树。代码清单2.10&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& main.js中代码var leftmenu = new Morik.Office.LeftMenu( {&&&&&&&&&& title : '我的办公系统',&&&&&&&&&& items : [ {&&&&&&&&&&&&& title : '我的办公桌',&&&&&&&&&&&&& items : [t1]&&&&&&&&&& }, {&&&&&&&&&&&&& title : '主数据管理',&&&&&&&&&&&&& items : [t2]&&&&&&&&&& }]&&& });这一段代码取代原有leftmenu变量部分。两个panel子组件都只要定义title,用来指定Tab项的标题，这个是一定要的，一是因为它的的提示作用，第二是因为如果没有它，就不会有Tab条目了。那么不是TabBox了。items中只要包含一颗树。两个panel中分别包含是t1,t2两棵树。那么我们得在代码前面定义t1,t2两个树。定义树一般都是通过TreePanel在实现树的样式及布局，树的节点通过其树的根节点一层层地串联起来。我们可以采用每个节点都通过new TreeNode来创建，如何节点与节点之间有父子关系，那么就采用appendChild把子节点追加入父节点上，最后形成一条以根节点为首的节点链。把这个根节点通过TreePanel的root配置项传到树panel中。这样做会有很多冗余代码。对于静态的数据还会一种做法，就是通过AsyncTreeNode做为根节点的类型，之后就可以采用数组及Json对象的形式来动态构建节点链。这个的用法在Ext的docs/resources/docs.js就是采用了它。我们看的文档的左边树的节点数据就是这样实现的。我们还是要看一下实现吧：代码清单2.11&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& main.js中代码var t1 = new Ext.tree.TreePanel( {&&& border : false,&&& rootVisible : false,&&& root : new Ext.tree.AsyncTreeNode( {&&&&&& text : "我的办公桌",&&&&&& expanded : true,&&&&&& children : [ {id : "docRec",text : "接收公文",leaf : true },{id : "docSend",text : "发送公文",leaf : true},{id : "docManage",text : "公文管理",leaf : true}]&&&&&&&&&& })&&&&&& }); var t2 = new Ext.tree.TreePanel( {&&& border : false,&&& rootVisible : false,&&& root : new Ext.tree.AsyncTreeNode( {&&&&& text : "主数据管理",&&&&& expanded : true,&&&&& children : [ {id : "department",text : "部门管理",leaf : true},{id : "company",text : "公司管理",leaf : true},{id : "permissions",text : "权限管理",&&&&&&&& children : [ {id : "permission",text : "权限管理",leaf : true}, {id : "permissionType",text : "权限类别",leaf : true}]&&&&&& }]&&& })});这两棵树的结构差不多，先通过Ext.tree.TreePanel来生成一个树面板。对于TabBox的树面板，我们要取消其默认的边框线。我们还看到两个配置项，一个是root，一个是rootVisible，即然指定了root，又为什么要隐藏它呢。rootVisible设为false的话，那就是隐藏根节点本身，而根节点的子节点都不会隐藏的。很多时间根节点除了作一个串接所有子节点的作用，就没有它的用途，所以就不要显示出来，这里也是一样。其根节点的提示作用就在上一部分的panel中title定义好了。在根节点的配置项中，我们一定要指定expanded为true(也可以通过代码来指定)。因为其默认是不展开，通过点击根节点来展开其下层的子节点，而现在隐藏了，不能点击，只能通过其expanded配置项来让其下层的所有子节点都展开。具体的数据其实都在children配置项给定了。对于每个节点，我们要一般来都要定义三项配置项：id,text,leaf/children。其中id是可以采用默认生成的。因为要用到它做为标识，我们就定义了。对于text，提示作用的。一定是要的。对于AsyncTreeNode的数据，leaf和children一定要配置一个，leaf为true说明其为叶子节点，如果没有就说明其不是叶子节点，那么就得到子节点，这个节点可能是多个，于是就得采用children来进行给定。把这个加到main.js对应的位置，运行一下，我们就可以看到图2.5中左边菜单的效果。对于上面的代码，我们会觉得不应该把TabBox中Tab项目来放在配置项中来配置，也就是每传入一棵树，就会有一个Tab项。它的标题就是树不显示出来的根节点文本，同时又为能使用items来配置那些可以其内容不是树的组件。我们可以另外实现一个配置，如tree，其要求就是把代码2.10中items用trees:[t1,t2]来替换就能实现同样的效果。现在我们改进一个其leftMenu类。在代码2.8的②后面加上如下：for(var i=0;i&this.trees.i++)& this.add({title:this.trees[i].getRootNode().text,items:[this.trees[i]]});& 这段代码就是根据有多少颗树就在LeftMenu中的Items增加多少个Panel子组件。并指定子Panel的标题。加上这代码，在使用它时，就可以不采用itmes，直接采用treees传入tree就可以实现TabBox的效果。实现完成上面，LeftMenu还没有完成。它还有一个重大的任务就是实现一个点击事件。实现事件可以分成如下三步，第一是在先注册事件名，第二是在类的某一个时刻的代码中运行这个事件函数，（它是和事件名相对应的回调函数）。第三就是在注册这个回调函数。这个注册回调函数在main.js已经完成。根据上面的步骤，我们在leftMenu构建函数中追加如下代码：this.addEvents('nodeClick');this.initTreeEvent();第一行是注册事件名，第二行是通过一个类方法来实现运行这个事件函数。这个方法在代码2.8中③处的第三个参数中的注释后面加上它，下面我们就给出代码2.8完整的代码：代码清单2.12&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& LeftMenu中代码Ext.extend(Morik.Office.LeftMenu, Ext.Panel, {&&& initTreeEvent : function() {&&&&&& if(!this.items)&&&&&& for (var i = 0;i & this.items. i++) {&&&&&&&& var p = thiemAt(i);&&&&&&&& if (p)&& var t = emAt(0);&&&&&&&& if(t)& t.on( {&&&&&&&&&&&&&& 'click' : function(node, event) {&&&&&&&&&&&&&&&&& if (node && node.isLeaf()) {&&&&&&&&&&&&&&&&&&&& event.stopEvent();&&&&&&&&&&&&&&&&&&&& this.fireEvent('nodeClick', node.attributes);}} });&&&&&&&& }&&&&&& }})这段代码的initTreeEvent是根据LeftMenu类items中子panel找到其中的树组件，之后为每颗树都注册其click事件的回调函数。也就是每次点击树的时候（任何地方）它都会运行这个回调函数。在这个回调函数中，它进一步判断，判断点击是否其树的子节点。如果是的话，就停止事件的默认处理（冒泡给上一层，其缺省的动作），再运行我们在main.js中注册的nodeClick的回调函数。从运行的函数可以看出，这个回调函数参数只有一个，就是树节点的属性集合，它包括id,text,leaf等属性。我们实现了LeftMenu的中树的点击事件，现在点击树叶子节点就会报错，原因是我们还没有实现MainPanel的loadTab方法。下一节中实现它。深入剖析ExtJS 2.2实现及应用连载& 版权所有，谢绝转载& 作者：彭仁夔 QQ：Tag标签: 深入剖析ExtJS 2.2实现及应用连载彭仁夔关注 - 2粉丝 - 3关注博主000(请您对文章做出评价)
上一篇：深入剖析ExtJS 2.2实现及应用连载(10):主页面布局
下一篇：深入剖析ExtJS 2.2实现及应用连载(12)：主内容区域
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&&&湘教QS2-164&&增值电信业务经营许可证湘B2-