大家好!近段时间在弄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,
new Ext.grid.RowNumberer({width: 30, header:"<font color='red'>No.</font>"}),
{id:'userId',header: "User Id", width: 50, hidden: false, dataIndex: 'userId'},
{header: "User Type", width: 75, dataIndex: 'userType'},
{header: "userName", width: 150, renderer: change, dataIndex: 'userName'},
{header: "password", width: 120, dataIndex: 'password'},
{header: "gsmPhone", width: 120, dataIndex: 'gsmPhone'},
{header: "email", width: 125, dataIndex: 'email'},
{header: "createDate", width: 120,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), dataIndex: 'createDate'},
{header: "contact", width: 200, dataIndex: 'contact'},
{header: "address", width: 200, dataIndex: 'address'},
{header: "allowSms", width: 60, renderer: checkBoxRenderer, dataIndex: 'allowSms'},
{header: "allowEmail", width: 60, dataIndex: 'allowEmail'},
{header: "allowJob", width: 60, dataIndex: 'allowJob'},
{header: "allowPhone", width: 60, dataIndex: 'allowPhone'},
{header: "remark", width: 275, hidden:true, dataIndex: 'remark'}
], 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..."); } }, '->', '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: '&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: '<p>A TabPanel component can be a region.</p>', 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: '<p>Some settings in here.</p>', 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:'<iframe id="'+indexId + str+'" scrolling="auto" frameborder="0" width="100%" height="100%" style="margin:0; padding:0;" src="' // +url+'"></iframe>' //autoLoad: {url: url, method:'GET', params: 'foo=bar&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?
请高手们多多指教,谢谢!