SpringJava
- 浏览: 289615 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
SpringJava：
摘过来的
小心使用ArrayList和LinkedList -
jingjing0907：
我要成为第一个赞的人！呵呵，
小心使用ArrayList和LinkedList -
SpringJava：
cilendeng 写道应该用ConcurrentHashMa ...
实现单用户登陆session先进先出（session踢出） -
lingxiajiudu：
不错，完美解决我了的问题，赞一个。
子窗体给父窗体传值 javascript opener -
cilendeng：
应该用ConcurrentHashMap
实现单用户登陆session先进先出（session踢出）
大家好！近段时间在弄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: ' ',
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？
请高手们多多指教,谢谢！
分享到：
发表评论
相关推荐
上述代码中的`this.tabPanel.getActiveItem()`用于获取当前活动的标签页，之后通过`item.loader.load()`来触发数据的重新加载。如果标签页本身并没有定义`loader`对象，则可以通过动态创建的方式为其添加一个`...
页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.css new TabPanel({ renderTo:'tabs', width: '100%', height: '500px', active: 0, items: [{ title:'工作中心', html:'<iframe width="100%" ...
6.用户列表页面点编辑时，在父页面的TabPanel中增加一个标签，下放置一个iframe，将编辑 页面Url（带参数）放入iframe。 7.页面间传值[如：列表页面传ID给编辑页面] 8.FormPanel的load事件，加载用户信息。
可以使用IFrame嵌入整个页面，或者使用Ajax获取部分HTML片段并插入到Tab中，实现动态加载和局部刷新。 7. **WebApp的最佳实践**：构建这样的Web应用程序时，需要注意性能优化，如减少不必要的网络请求、缓存重复...
通过这段代码，当用户在使用TabPanel时，点击与“系统容量分配”相关的Tab页，浏览器会加载并展示指定URL（***）所指向的报表内容。 在使用ManagedIFrame插件时，需要注意以下几点： 1. 确保已经正确引入了...
通过`addTab`函数可以动态添加新的Tab，并且每个Tab都可以通过iframe加载不同的页面。 通过以上步骤，我们可以有效地部署和使用ExtJs框架，实现丰富的用户界面和交互功能。这对于构建现代化的企业级应用来说是非常...
总的来说，通过ExtJS的TabPanel和`iframe`结合，我们可以轻松地在应用中嵌入其他网页，创建出丰富的多页面视图。同时，灵活运用布局、事件处理等特性，可以进一步定制化TabPanel的行为，满足各种复杂的需求。希望...
然而，有时候我们可能会遇到一个问题：当点击某个tab时，浏览器尝试加载一个新的URL而不是在当前页面内切换。这通常是因为`href`属性指向了完整的URL，而不是内部锚点。为了解决这个问题，确保`href`属性值以`#`开头...
6. **FrameTab.rar**：可能是一种特殊的选项卡实现，比如在每个选项卡内部嵌套了一个iframe，用于加载不同源的内容，比如跨域的数据或者独立的应用片段。 7. **2.rar**：由于名称不明，这个控件的具体功能和特性...
纯粹的客户端JS系统，与服务器的连接永远是一个页面（除非你用IFRAME，但用IFRAME就违背了本程序的初衷），适合作为云计算模式的开发框架。 6．纯粹的JS源代码，无任何封装，我们也曾想将JS封装成net类，这样用起来...
总结来说，Coolite CoolStudy 2框架提供了一种简便的方法来更新和管理Tab页面，但在使用过程中可能会遇到一些特定问题，通过修改URL格式和配置Tab属性可以解决这些问题。在实现多Tab更新功能时，需要注意框架的特性...