SpringJava 2011-05-10 16:21
浏览 485
已采纳

TabPanel通过iframe加载页面问题

大家好!近段时间在弄EXT,我用的是EXT3.2.1的版本,单页面userDataGrid.jsp显示是没有问题的,如附件图片userDataGrid.bmp所示,userDataGrid.js的代码:


Ext.apply(Ext.form.VTypes, {
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : 'Passwords do not match'

});

var getCheckValue = function (dom){
if( !dom ) return ;
return (dom.checked)?1:0;
}

var getCheckboxValue = function (dom){
if( !dom ) return ;
return dom.checked;
}

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

//===================================================================================
// simple array store
var user_data_form_store = new Ext.data.JsonStore({
    fields : ['name2', 'userType'],
    data   : [
        {name2 : 'Administrator',   userType: '0'},
        {name2 : 'Manager',  userType: '1'},
        {name2 : 'Operator', userType: '2'},
        {name2 : 'Stuff', userType: '3'}
    ]
});

var combo = new Ext.form.ComboBox({
    tpl: '<tpl for="."><div ext:qtip="{name2}. (value={userType})" class="x-combo-list-item" style="color:green">{name2}</div></tpl>',
    store: user_data_form_store,
    name:  'userType',
    id:     'userType_id',
    fieldLabel: 'User Type',
    hiddenName:'userType',
    displayField: 'name2',
    allowBlank : false,
    valueField :  'userType',
    typeAhead: true,
    mode: 'local',//or use remote
    forceSelection: true,
    triggerAction: 'all',
    editable:       false,
    emptyText:'Select an User Type...',
    selectOnFocus:true,
    anchor:'94%'
    //applyTo: 'local-states'
});

var allowSms = new Ext.form.Checkbox({
       name: 'allowSms',
       id: 'allowSms_id',
       fieldLabel: 'Allow Sms',
       anchor:'94%'
});
var allowEmail = new Ext.form.Checkbox({
       name: 'allowEmail',
       id: 'allowEmail_id',
       fieldLabel: 'Allow Email',
       anchor:'94%'
});
var allowJob = new Ext.form.Checkbox({
       name: 'allowJob',
       id: 'allowJob_id',
       fieldLabel: 'Allow Job',
       anchor:'94%'
});
var allowPhone = new Ext.form.Checkbox({
       name: 'allowPhone',
       id: 'allowPhone_id',
       fieldLabel: 'Allow Phone',
       anchor:'94%'
});

var contact = new Ext.form.TextField({
        fieldLabel: 'Contact',
        allowBlank : true,
        //maxLength: 20,
        id:'contact_id',
        name: 'contact',
        anchor:'94%'                                     
});

var createDate = new Ext.form.DateField({
        allowBlank : true,
        editable:   false,
        format : 'Y-m-d H:i:s',
        showToday : true,
        selectOnFocus : false,
        name: 'createDate',
        id:'createDate_id',
        fieldLabel: 'CreateDate',
        anchor:'94%'                                        
});

var address = new Ext.form.TextField({
        fieldLabel: 'Address',
        allowBlank : true,
        //maxLength: 20,
        id:'address_id',
        name: 'address',
        anchor:'96%'                                     
});

var user_form = new Ext.FormPanel({
    //labelAlign: 'top',
    id :'user_form_ids',
    labelWidth: 75, // label settings here cascade unless overridden
    frame:true,
    //title: 'Multi Column, Nested Layouts and Anchoring',
    bodyStyle:'padding:10px 10px 0 10px',
    width: 700,
    heigh: 1000,
    items: [{
        layout:'column',
        items:[{
            columnWidth:.5,
            layout: 'form',
            items: [{
                xtype:'textfield',
                fieldLabel: 'User Name',
                allowBlank : false,
                maxLength: 20,
                id:'userName',
                name: 'userName',
                anchor:'94%'
            }, {
                xtype:'textfield',
                inputType: 'password',
                fieldLabel: 'Password',
                allowBlank : true,
                name: 'password',
                id:'password',
                anchor:'94%'
            }, {
                xtype:'textfield',
                fieldLabel: 'GSM Phone',
                allowBlank : true,
                maxLength: 20,
                id:'gsmPhone',
                name: 'gsmPhone',
                anchor:'94%'
            }, {
                xtype:'checkbox',
                name: 'allowSms2',
               id: 'allowSms_id',
               fieldLabel: 'Allow Sms',
               anchor:'94%' 
            }, allowSms, allowJob, contact
            ]
        },{
            columnWidth:.5,
            labelWidth: 105, 
            layout: 'form',
            items: [
                combo   
            ,
            {
                xtype:'textfield',
                vtype:'password',
                inputType: 'password',
                allowBlank : true,
                fieldLabel: 'Confirm Password',
                name: 'repassword',
                id:'repassword',
                initialPassField:'password',
                anchor:'94%'
            }, {
                xtype:'textfield',
                fieldLabel: 'E-mail',
                name: 'email',
                id:'email',
                vtype:'email',
                anchor:'94%'
            }, 
            allowEmail, allowPhone, createDate
            ]
        }]
    }, address, {
        xtype:'htmleditor',
        id:'remark_id',
        name:'remark',
        fieldLabel:'Remark',
        height:200,
        anchor:'96%'
    },{
        xtype:'hidden',
        fieldLabel:'Hidden Text',
        name:'userId',
        id:'userId_id',
        value:'null',
        anchor:'96%'
    }],

    buttons: [{
        text: 'Load Data',
        anchor:'90%',
        handler : function(){
                user_form.getForm().load({
                    url: '/userData.do',
                    waitMsg: 'Loading your information...',
                    params : {"method":"loadUserData","userId":"51"},
                    method : 'GET',
                    success: function(user_form, a){
                       if(a.result.data.favoritie3 == "asdf"){ 
                           Ext.getCmp("favoritie3").setValue(true); 
                       } 
                       //Ext.getCmp("favoritie4").setValue(a.result.data.favoritie4 == "abc"); 
                       Ext.getCmp("repassword").setValue(Ext.getCmp("password").getValue());
                       Ext.Msg.alert('Success', 'Processed successfully on the server, your name is :'+a.result.data.userName);
                       //msg('Success', 'Processed file "'+o.result.file+'" on the server');
                    },
                    failure:function(user_form, a){
                        Ext.Msg.alert('Failure', 'Failure...'+a.result.data.description);
                        user_form.reset();
                    }
                });
        }
    },{
        text: 'Save',
        anchor:'90%',
        handler : function(){
            if (user_form.getForm().isValid()){
                user_form.getForm().submit({
                    url: '/userData.do',
                    waitMsg: 'Saving your information...',
                    params : {"method":"addUserData","allowSms":getCheckValue(Ext.getCmp("allowSms_id")),
                                "allowEmail":getCheckValue(Ext.getCmp("allowEmail_id")),"allowJob":getCheckValue(Ext.getCmp("allowJob_id")),
                                "allowPhone":getCheckValue(Ext.getCmp("allowPhone_id"))},
                    success: function(user_form, a){
                        Ext.Msg.alert('Success', 'Processed successfully on the server, your name is :'+a.result.result.userId);

                        //msg('Success', 'Processed file "'+o.result.file+'" on the server');
                    },
                    failure:function(user_form, a){
                        Ext.Msg.alert('Failure', 'Failure...');
                        //user_form.reset();
                    }
                }); 
            } //end if
        }
    },{
        text: 'Reset',
        anchor:'90%',
        handler: function() {
            user_form.form.reset();
        }
    }]                        
});

//===================================================================================

// create the Grid of start
// example of custom renderer function
function change(val){
    if(val.length > 20){
        return '<span style="color:red;">' + val + '</span>';
    }else if(val.length > 15){
        return '<span style="color:green;">' + val + '</span>';
    }
    return val;
}

function checkBoxRenderer(val){
    if(val == 1){
        return '<span style="color:red;">' + true + '</span>';
    }else if(val == 0){
        return '<span style="color:green;">' + false + '</span>';
    }
    return val;
}

function grid_refresh(){
    Ext.apply(store.baseParams, {   
        "start":0,
        "limit":10,
        "method":"searchUserData",
        "userName":Ext.get('keywordText_id').getValue()
    });
    store.load();
}
// create the data store
var store = new Ext.data.Store({                                   
    baseParams:{"method":"searchUserData"},
    proxy: new Ext.data.HttpProxy({   
        url: "/userData.do"
    }),//new Ext.ux.data.PagingMemoryProxy(myData),
    autoDestroy: true,
    remoteSort:true,
    autoLoad: {params:{start:0, limit:10}},

    reader: new Ext.data.JsonReader({
        root: 'data',   
        totalProperty: 'recordCount',   
        idProperty: 'id',
        sortInfo: {field:'userName', direction:'ASC'},
        fields: [
           {name: 'userId', type: 'int'},
           {name: 'userType', type: 'int'},
           {name: 'userName', type: 'string'},
           {name: 'password', type: 'string'},
           {name: 'allowSms', type: 'int'},
           {name: 'gsmPhone', type: 'string'},
           {name: 'contact', type: 'string'},
           {name: 'address', type: 'string'},
           {name: 'email', type: 'string'},
           {name: 'allowEmail', type: 'int'},
           {name: 'allowJob', type: 'int'},
           {name: 'allowPhone', type: 'int'},
           {name: 'createDate', type: 'date', dateFormat: 'Y-m-d H:i:s'},
           {name: 'remark', type: 'string'}
        ]
    })
});


var keywordText = new Ext.form.TextField({   
    //fieldLabel: 'keyword',
    id : 'keywordText_id',
    name: 'keyword',   
    anchor: '95%',   
    maxLength: 25  
});

var sm = new Ext.grid.CheckboxSelectionModel({
     dataIndex:"userId"
});

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [

   sm,
&nbsp;&nbsp;&nbsp;new Ext.grid.RowNumberer({width: 30, header:"<font color='red'>No.</font>"}),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {id:'userId',header: "User Id", width: 50, hidden: false, dataIndex: 'userId'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "User Type", width: 75, dataIndex: 'userType'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "userName", width: 150, renderer: change, dataIndex: 'userName'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "password", width: 120, dataIndex: 'password'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "gsmPhone", width: 120, dataIndex: 'gsmPhone'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "email", width: 125, dataIndex: 'email'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "createDate", width: 120,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), dataIndex: 'createDate'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "contact", width: 200, dataIndex: 'contact'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "address", width: 200, dataIndex: 'address'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "allowSms", width: 60, renderer: checkBoxRenderer, dataIndex: 'allowSms'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "allowEmail", width: 60, dataIndex: 'allowEmail'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "allowJob", width: 60, dataIndex: 'allowJob'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "allowPhone", width: 60, dataIndex: 'allowPhone'},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "remark", width: 275, hidden:true, dataIndex: 'remark'}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ], loadMask:true,
stripeRows: true,
//autoExpandColumn: 'userName_id',
layout:'fit',
/* height:800,
width: 1200,*/
bodyStyle:'margin:0;padding:0;',
//autoWidth: true,
width : Ext.get('user_data_grid_div_id').getWidth(),
height : Ext.get('user_data_grid_div_id').getHeight(),
frame:true,
title:'User Data Grid List Sliding Pager Test',

    plugins: new Ext.ux.PanelResizer({
        minHeight: 100
    }),

    tbar:[{
          id:'add_id',
          text:'Add',
          iconCls: 'add',
          handler: function(){
                var win = new Ext.Window({
                    //contentEl:"win",
                    scripts: true,
                    title: 'User Data',
                    closable:true,
                    width:720,
                    height:480,
                    closeAction:'hide',
                    border:false,
                    plain:true,
                    layout: 'border',
                    items: new Ext.Panel({
                            region: 'center',
                            margins:'3 3 4 3', 
                            cmargins:'3 3 3 3',
                            autoDestroy : true,
                            defaults:{autoScroll:true},
                            items:[user_form]
                        })
                });
              win.show();
         }

    }, '-', {
          id:'remove_id',
          text:'Remove',
          iconCls: 'remove',
          handler: function(){
               store.load({params:{start:0, limit:10,"method":"loadUserDataGrid"}});
               Ext.Msg.alert('Result Tips', "Remove a record seccessfully..."); 
          }
    }, '-&gt;', 
    'Search a UserName?: ', keywordText,{
            id:'search_id',
            text: 'Search',   
            pressed: false,   
            iconCls: 'search',   
            handler: grid_refresh
    },' '],

    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        displayInfo: true,

        plugins: new Ext.ux.ProgressBarPager()
    })
});

window.onresize = function(){ 
    grid.setWidth(0); 
    grid.setHeight(0); 
    grid.setWidth(Ext.get("user_data_grid_div_id").getWidth()); 
    grid.setHeight(Ext.get("user_data_grid_div_id").getHeight()); 
};

//控制缩放的时候修改grid的高度
grid.on('afterlayout',function(view,layout){
  var height = grid.getSize().height - 30;
},this);

// create the Grid of end
grid.render("user_data_grid_div_id");
store.load({params:{start:0, limit:100000,"method":"searchUserData"}});

});




userDataGrid.jsp代码所示:

<html>

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/common/ext-all.js"></script>
。。。其他的一些js加载省略了
<body>
<div id="user_data_grid_div_id" style="width:100%;height:100%; margin:0; padding:0" ></div>
</body>
</html>


现在我想在主框架页面(main.jsp,main.js)上动态加载其他页面(userDataGrid.jsp),如ext_main.bmp所示,我是用TabPanel里面的iframe加载的。通过iframe加载后有些功能就不能正常使用:grid分页的按钮,grid工具上的按钮和查询功能按钮都不能正常使用了,main.js:

Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [
        {
            region: 'north',
            contentEl: 'viewport',
            split: true,
            minSize: 124,
            maxSize: 124,
            margins: '0 0 0 0'
        }, {
            region: 'south',
            contentEl: 'south12',
            split: true,
            minSize: 5,
            maxSize: 5,
            title: '&amp;nbsp;',
            margins: '0 0 0 0'
        }, {
            region: 'east',
            title: 'East Side',
            collapsible: true,
            split: true,
            width: 225, // give east and west regions a width
            minSize: 175,
            maxSize: 400,
            margins: '0 5 0 0',
            layout: 'fit', // specify layout manager for items
            items:            // this TabPanel is wrapped by another Panel so the title will be applied
            new Ext.TabPanel({
                border: false, // already wrapped so don't add another border
                activeTab: 1, // second tab initially active
                tabPosition: 'bottom',
                items: [{
                    html: '&lt;p&gt;A TabPanel component can be a region.&lt;/p&gt;',
                    title: 'A Tab',
                    autoScroll: true
                }, new Ext.grid.PropertyGrid({
                    title: 'Property Grid',
                    closable: true,
                    source: {
                        "(name)": "Properties Grid",
                        "grouping": false,
                        "autoFitColumns": true,
                        "productionQuality": false,
                        "created": new Date(Date.parse('10/15/2006')),
                        "tested": false,
                        "version": 0.01,
                        "borderWidth": 1
                    }
                })]
            })
        }, {
            region: 'west',
            id: 'west-panel', // see Ext.getCmp() below
            title: 'West',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: {
                type: 'accordion',
                animate: true
            },
            items: [{
                contentEl: 'west',
                title: 'Navigation',
                border: false,
                iconCls: 'westnavigationnavigation' // see the HEAD section for style used
            }, {
                title: 'Settings',
                html: '&lt;p&gt;Some settings in here.&lt;/p&gt;',
                border: false,
                iconCls: 'westnavigationsettings'
            }]
        },
        // in this instance the TabPanel is not wrapped by another panel
        // since no title is needed, this Panel is added directly
        // as a Container
        tabs
        ]
    });
    viewport.doLayout();
    // get a reference to the HTML element with id "hideit" and add a click listener to it 
    Ext.get("hideit").on('click', function(){
        // get a reference to the Panel that was created with id = 'west-panel' 
        var w = Ext.getCmp('west-panel');
        // expand or collapse that Panel based on its collapsed property state
        w.collapsed ? w.expand() : w.collapse();
    });
});



动态加载的TabPanel.js代码:

var indexId = "new_tab_id_";
var title = "";
Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
 onRender : function(ct, position){
      this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, margin:0, padding:0, src: this.url});
     }
});

function addNewTab(str, url){
//alert(url);
    //indexId = indexId + str;
    title = document.getElementById(str).innerHTML;
    var obj = Ext.getCmp(indexId + str);
    if (!obj){
        var obj = new Ext.Panel({
            id:indexId + str,
            title: title,
            width:'100%',
            height:'100%',
            iconCls: 'newtab',
            closable: false,
            frame:true,
            layout: 'fit', 
            items: [ new Ext.ux.IFrameComponent({ id: indexId + str, url: url }) ],
             listeners:{
             activate:function(tab){
              tab.getUpdater().refresh();
             }
            }

            //html:'&lt;iframe id="'+indexId + str+'" scrolling="auto" frameborder="0" width="100%" height="100%" style="margin:0; padding:0;" src="'
            //          +url+'"&gt;&lt;/iframe&gt;'
            //autoLoad: {url: url, method:'GET', params: 'foo=bar&amp;wtf=1', scripts:true}
        });
        tabs.add(obj);
        //tabs.setActiveTab(obj);

/* tabs.add({
id:indexId + str,
title: title,
closeAction:'close',
iconCls: 'newtab',
closable: true,
layout: 'border',
//html: '<iframe src="'+url+'" width="100%" height="100%"/>'
html:'<iframe id="'+indexId + str+'" frameborder="0" width="100%" height="100%" style="margin:0 0 0 0; padding:0 0 0 0;" src="'
+url+'"></iframe>'
//autoLoad : {url:url, scripts:true}
//items: obj
}).show();*/
}else{
//obj.getUpdater().update(url);
obj.show();
}
showCurrentActiveTabs();
tabs.setActiveTab(obj);
indexId = "new_tab_id_";
}

function showCurrentActiveTabs(){

}

var tabs = new Ext.TabPanel({
    region: 'center',
    deferredRender: false,
    resizeTabs:true,
    activeTab: 0,
    minTabWidth: 135,
    enableTabScroll:true,
    activeTab: 0,
    margins : '3 3 3 0',
    plain:true,
    frame:true,
    defaults:{autoScroll: true, closable: true},
    items:[{
        contentEl: 'center2',
        title: 'API Home',
        closable: false,
        iconCls: 'newtab'
    }]
});

tabs.on('beforedestroy', function(tab) {
        tabs.remove(tab,false);
        tab.hide();
        return false;
});


现在把userDataGrid.jsp通过tabpanel加载进来后,如图:ext_main.bmp所示, 出现了2个问题:

1. grid工具栏上的按钮和分页按钮都不能正常使用了,点按钮:add, remove, search都没有反应;

2. grid怎么样可以填充满整个TabPanel?



请高手们多多指教,谢谢!

  • 写回答

5条回答 默认 最新

  • suziwen 2011-05-11 14:41
    关注

    还有用那个IFRAME插件 ,其实我觉得 没必要,自己手写一个HTML就可以了.

    我觉得不能触 发点击事件等 ,估计就是这个IFRAME插件的问题,他可能是把IFRAME里面的HTML内容单独COPY出来渲染到当前页面了,而仅仅是COPY里面HTML 的BODY东西所以那些JS里的东西是用不了的

    参考这个
    [url]http://www.iteye.com/problems/64808[/url]

    [code="js"]ar mainTabs = new Ext.TabPanel({

    tabPosition:'bottom',

    animCollapse:true,

    activeTab:0,

    enableTabScroll:true,

    height:550,

    border:false,

    //frame:true,

    items:[{

    title:"我的工作台",

    html:""

    }]

    });

    var i = 1;

    function addTab(_id){

    var id = "tab_id
    " + _id;

    var n = mainTabs.getComponent(id);

    if (!n) {

    n = mainTabs.add({

    id:id,

    title:id,

    closable:true,

    layout:'fit',

    html:'' });

    }

    mainTabs.setActiveTab(n);

    }

    var viewport = new Ext.Viewport({

    layout: 'border',

    items: [

    {

    region: 'west',

    width: 200,

    split: true,

    collapsible: true,

    useSplitTips: true,

    margins: '5 0 5 5',

    cmargins: '5 5 5 5',

    bbar:[{

    text:'click',

    handler:function(){

    addTab(_i++);

    }}]

    },{

    margins:'5 5 5 0',

    layout:'fit',

    region:'center',

    items:[mainTabs]

    }

    ]

    }); [/code]

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

悬赏问题

  • ¥30 vb net 使用 sendMessage 如何输入鼠标坐标
  • ¥200 求能开发抖音自动回复卡片的软件
  • ¥15 关于freesurfer使用freeview可视化的问题
  • ¥100 谁能在荣耀自带系统MagicOS版本下,隐藏手机桌面图标?
  • ¥15 求SC-LIWC词典!
  • ¥20 有关esp8266连接阿里云
  • ¥15 C# 调用Bartender打印机打印
  • ¥15 我这个代码哪里有问题 acm 平台上显示错误 90%,我自己运行好像没什么问题
  • ¥50 C#编程中使用printDocument类实现文字排版打印问题
  • ¥15 找会编程的帅哥美女 可以用MATLAB里面的simulink编程,用Keil5编也可以。