为了让项目给人的感觉稳重,美观,便于统一编程管理,准备采用框架来实现后台管理模块。
一直都没有重视ext,以为有jqurey就可以解决所有的js问题了,也许是可以解决,O(∩_∩)O哈哈~,我技术水平还不到哦,不能完全的灵活的使用jquery。
ext虽然比jQuery大多了,但是同样功能也强大多了,我也只是对着网上的手册,稍微的大概的写了一个框架,能够自适应高度,根据不同的用户权限,从xml中读取数据库,显示不同的树形菜单。
不过说到底就是几个iframe组成的,只是比起传统的iframe生硬的组合,而是动态生成的iframe,好看了点,自由点高了点,还考虑了一 些iframe注入的情况。因为代码太多了,我只是把自己写的比较多的一部分拿去来,和大家分享下
Ext.onReady(function() { Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif"; var Tree = Ext.tree; var tree = new Tree.TreePanel({ el: 'west_content', useArrows: true, autoHeight: true, split: true, lines: true, autoScroll: true, animate: true, enableDD: true, border: false, containerScroll: true, loader: new Tree.TreeLoader({ dataUrl: './ext/ext_tree_json.aspx' }) }); // set the root node var root = new Tree.AsyncTreeNode({ text: '影像系统管理员', draggable: false, id: '0' }); tree.setRootNode(root); // render the tree tree.render(); root.expand(); var viewport = new Ext.Viewport({ layout: 'border', items: [{ region: 'west', id: 'west', //el:'panelWest', title: '系统菜单导航', split: true, width: 200, minSize: 200, maxSize: 400, collapsible: true, margins: '160 0 2 2', cmargins: '160 5 2 2', layout: 'fit', layoutConfig: { activeontop: true }, defaults: { bodyStyle: 'margin:0;padding:0;' }, //iconCls:'nav', items: new Ext.TabPanel({ border: false, activeTab: 0, tabPosition: 'bottom', items: [{ contentEl: 'west_content', title: '影像系统后台管理', autoScroll: true, bodyStyle: 'padding:5px;' }] }) }, { region: 'center', el: 'center', deferredRender: false, margins: '160 0 2 0', html: '<iframe id="center-iframe" width="100%" height=100% name="main" frameborder="0" scrolling="auto" style="border:0px none; background-color:#ffffff; " src="admin/articles.aspx"></iframe>', autoScroll: true }, { region: 'south', margins: '0 0 0 2', border: false, html: '<div>版权书写处</div>' } ] }); setTimeout(function() { Ext.get('loading').remove(); Ext.get('loading-mask').fadeOut({ remove: true }); }, 250) });
注:整个框架参考了火舞狂歌-后台管理框架,直接在vs中运行,有时候会出现ie无响应的情况,但是测试在iis和火狐中正常