TabPanelはiframeを通じてページの問題をロードします.
27066 ワード
皆さん、こんにちは最近EXTをいじっていますが、EXT 3.2.1のバージョンを使っています.単一ページのuserDataGrid.jspの表示は問題ないです.添付の写真のようにuserDataGrid.bmpに示されています.userData Grid.jsのコード:
userDataGrid.jspコードに示されています.
今はメインフレームのページ(main.jsp,main.js)に他のページ(userData Grid.jsp)を動的にロードしたいです.main.bmpに示すように、TabPanelの中のiframeでロードしました.iframeで読み込むと、機能の一部が正常に使えなくなります.gridページのボタン、gridツールのボタンと検索機能ボタンは正常に使えなくなります.
動的にロードされたTabPanel.jsコード:
今はuserDataGrid.jspをtabpanelを通じてロードしてきました.main.bmpに示すように、2つの問題があります.
1.gridツールバーのボタンと改ページボタンは正常に使えなくなりました.点ボタン:add、remove、searchは反応しません.
2.gridはどうやってTabPanel全体を埋めることができますか?
よろしくお願いします.ありがとうございます.
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)に他のページ(userData Grid.jsp)を動的にロードしたいです.main.bmpに示すように、TabPanelの中のiframeでロードしました.iframeで読み込むと、機能の一部が正常に使えなくなります.gridページのボタン、gridツールのボタンと検索機能ボタンは正常に使えなくなります.
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: ' ',
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を通じてロードしてきました.main.bmpに示すように、2つの問題があります.
1.gridツールバーのボタンと改ページボタンは正常に使えなくなりました.点ボタン:add、remove、searchは反応しません.
2.gridはどうやってTabPanel全体を埋めることができますか?
よろしくお願いします.ありがとうございます.