Ext.TabPanel autoLoad 乱码解决

最新推荐文章于 2018-05-17 10:25:43 发布

转载最新推荐文章于 2018-05-17 10:25:43 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhihui516/archive/2010/02/01/1661156.html

本文介绍如何使用ExtJS创建美观的树形菜单，并在Tab面板中通过iframe方式加载不同页面，解决页面加载出现乱码的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚才一直在调试这段代码。

//目錄數據
   var value1=['產品生產規格(廠單)系統','樣辦單管理系統','工廠生產進度表','裝箱單管理系統','溫洲報價管理系統','Sample Invoice System'];
   var value2=['SRD管理系統 ','新產品管理系統 ','模具管理系統 '];
   var value3=['物料管理系統 ','板料管理系統 ','卡通箱系統 '];
   var value4=['外發系統 ','公倉借還貨管理系統 '];
   var value5=['卡尺管理系統 ','來料檢查/FQC系統'];
   var value6=['Forwarder系統 ','GRO系統 '];
var value7=['PD&D管理系統 '];
   var value8=['工休管理系統 ','績效考評系統 ','報關管理系統 '];
   var value9=['用戶硬軟件管理系統 '];
var value10=['用戶中心'];
var values=[value1,value2,value3,value4,value5,value6,value7,value8,value9,value10];
     var values0=['廠單系統','工程部系統','物料系統','倉存系統','QA系統','G.R.O系統','PDD系統','行政系統','電腦系統','控制面板'];

     var accordion = new Ext.Panel({
       title:'系統菜單',
                region:'west',
                margins:'0 0 0 0',
    frame:'true',
                split:true,
                width: 210,
                layout:'accordion',
                collapsible:true

            });

   for(var i=0;i<values.length;i++)
   {
    var item =new Ext.tree.TreePanel({
                title: values0[i],
                rootVisible:false
    });
           //建立根
              var root = new Ext.tree.TreeNode( {
                  text: 'Ext JS',
                  draggable:false,
            expanded:true ,
            rootVisable:false,
                  id:'root'+i
                 });
               //設置根
              item.setRootNode(root);
              //增加子節點
         for(var j=0;j<values[i].length;j++)
         {
         root.appendChild(new Ext.tree.TreeNode( {
            text: values[i][j],
            href:'jiemian.html',
            id:'node_csdn'+i+j
             }));
        }
     item.on('click',menuhandle);
     accordion.add(item);
     }

         var mainpanel=new Ext.TabPanel({
     html:'xxxx-->xxxx',
           region:'center',
          // enableTabScroll:true,
   // bodyStyle:'background-color:#e6e5e5',
   // headerCfg:{style:'background:#e6e5e5 url(../css/images/1topbg_02.gif)'},
           activeTab:0,
            items:[{
                  id:'homePage',
                  title:'首頁',
                 //target:middle,
     //bodyStyle:'background-color:#e6e5e5',
                  autoScroll:true,
                  html:'<iframe name="mainFrame" id="main" height="100%" frameborder="0" width="100%" marginheight="0" marginwidth="0" scrolling="auto" src="a.html"></iframe>'
    }]
});

var changeSkin = function(value) {
if(value){
Ext.util.CSS.swapStyleSheet('window','ext-3.0-rc2/resources/css/'+ ('xtheme-') + value + '.css');}};

        /**
         *??
         * ??典?:   Ext.menu
         */
   var panel1=new Ext.Panel({
  // region:'',
   id:'stoppanel',
   height:20,
   border:false,
   plain:true,
   html:'dfdf'
   });


            function menuhandle(node, event) {
                           event.stopEvent();
                           var n = mainpanel.getComponent(node.text);
                         if (!n) { ////判斷是否打開該面板
                                 n = mainpanel.add({
                                'id':node.id,
                                'title':node.text,
                                closable:true,
        html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+node.attributes.href+'"></iframe>'
                               // autoLoad:{url:node.attributes.href, scripts:true} //通過autoLoad載入目標頁，如果要用到腳本，必須加上scripts屬性。
                                });
                               }
                           mainpanel.setActiveTab(n);
                         }

左边是很漂亮的Ext.tree.TreeNode。右边是Ext.TabPanel，我采用aotoLoad载入目标页面在tabpanel内，可是载入的页面总是出现乱码，查了很久的资料都没有查到解决方法，终于皇天不负有心人给解决了载入页面乱码的问题，采用红色部分html载入的方式就可以解决该问题。嘻嘻。

转载于:https://www.cnblogs.com/zhihui516/archive/2010/02/01/1661156.html