PDA

View Full Version : add a gird into TabPanel problem use ext 1.1



jiajiacat
16 Aug 2007, 5:27 AM
hi all:

I have a tabPanel page and a grid page(ext version 1.1), I create a tabPanel js like this:

tabPanel js code:

var navTabs = {

init:function() {

var jtabs = new Ext.TabPanel('jtabs');

var tab1 = jtabs.addTab('jtabs-1', "用户管理");
var updater = tab1.getUpdateManager();
// set load page script
updater.loadScripts = true;
// load gird page
updater.setDefaultUrl('usermanage.html');
tab1.on('activate', updater.refresh, updater, true);
// set activate
//jtabs.activate('jtabs-1');

}
}

Ext.EventManager.onDocumentReady(navTabs.init, navTabs, true);

the tabpanel html page is:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<title></title>
<link rel="stylesheet" type="text/css" href="style/common.css"></link>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-aero.css" />

<!-- include everything after the loading indicator -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<!-- include the locale file -->
<script type="text/javascript" src="ext/locale/ext-lang-zh_CN.js"></script>
<!-- include custom lib -->
<script type="text/javascript" src="script/usermantab.js"></script>

</head>
<body>

<div id="jtabs">
</div>

</body>
</html>

the gird page js code:


Ext.onReady(function() {

var pageSize = 22;
// the gird selected id value
var selectedId;
// the gird select row
var selectedRows;
// the add dialog
var addDialog;
// the update dialog
var updateDialog;
// the add dialog layout
var addDialogLayout;
// the update dialog layout
var updateDialogLayout;

Ext.QuickTips.init();

// setup record type
var recordType = Ext.data.Record.create([
{name:"id", type:"string"},
{name:"uid", type:"string"},
{name:"password", type:"string"},
{name:"name", type:"string"},
]);

// setup datasource
var ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(UserService.getListRange, true),
reader: new Ext.data.ListRangeReader(
{id:'id', totalProperty:'totalSize'}, recordType),
// open remote sort
remoteSort: true
});

// render gird password to be show as '*****'
function renderPassword(value) {
return '******';
}

// create column model
var cm = new Ext.grid.ColumnModel([
{id:'id',header:"序号", width:210, sortable:true, locked:false, hidden:true, dataIndex:'id'},
{header: "姓名", width:120, sortable:true, dataIndex:'name'},
{header: "用户", width:120, sortable:true, dataIndex:'uid'},
{header: "密码", width:160, sortable:true, dataIndex:'password',renderer:renderPassword}
]);
// by default columns are sortable
cm.defaultSortable = true;

// create gird
var grid = new Ext.grid.Grid('gird', {
ds: ds,
cm: cm,
//set gird just has one row select
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true
});

// create a grid layout
var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');

// render grid
grid.render();

// add gird head
var gridHead = grid.getView().getHeaderPanel(true);
// add toolsbar
var tb = new Ext.Toolbar(gridHead);
// add toolsbar button
tb.addButton({
id: 'addButton',
text: '添加',
cls: 'x-btn-text-icon add-opt',
handler : showAddDialog
});
tb.addButton({
id: 'modify',
text: '修改',
cls: 'x-btn-text-icon modify-opt',
handler : showUpdateDialog
});
tb.addButton({
id: 'deleteButton',
text: '删除',
cls: 'x-btn-text-icon delete-opt',
handler : confirmDelete
});

// add gird footer
var gridFoot = grid.getView().getFooterPanel(true);
var pageToolsBar = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: pageSize,
displayInfo: true
});

// datasource load data
// do filter before datasource load
ds.on('beforeload', function() {
ds.baseParams = {
dept: 'testFilter',
viaParam: true
};
});

// datasource load and page variables
ds.load({params:{start:0, limit:pageSize}});

// get select gird row id and name.
grid.on('rowclick', function(grid, rowIndex, e) {
selectedId = ds.data.items[rowIndex].id;
});

// handel gird double click
grid.on('rowdblclick', showUpdateDialog);

// confirm delete enterprise
function confirmDelete() {
// check if row is selected and set the selectId
selectedRows = grid.getSelections();
if(selectedRows <= 0) {
Ext.Msg.alert('错误', '请先选择要操作的记录!');
return;
}
// if row is selected confirm delete
Ext.MessageBox.confirm('确认', '确认删除所选记录?', doDelete);
}

// delete row
function doDelete(btn) {
if(btn == 'yes') {
// set dwr as non async call
DWREngine.setAsync(false);
// call dwr to delete row in database
UserService.deleteItem(selectedId);
// set dwr as async call
DWREngine.setAsync(true);
// reload datasource
ds.reload();
}
}

// create a new dialog
function createAddDialog(dialogName) {
if(addDialog == null) {
var newAddDialog = new Ext.LayoutDialog(dialogName, {
modal:true,
autoTabs:true,
proxyDrag:true,
resizable:false,
width:330,
height:205,
shadow:true,
center: {
autoScroll:true,
tabPosition:'top',
closeOnTab:true,
alwaysShowTabs:false
}
});

newAddDialog.addKeyListener(27, newAddDialog.hide, newAddDialog);
newAddDialog.addButton('取消', function() {
newAddDialog.hide();
});
newAddDialog.addButton('保存', function() {
// if input is valid add the record
var uid = uidTf.getValue();
var name = nameTf.getValue();
var password = passwordTf.getValue();

var user = {uid:uid, name:name, password:password};
if(addForm.isValid()) {
// set dwr call as non async
DWREngine.setAsync(false);
UserService.add(user);
// set dwr call as async
DWREngine.setAsync(true);
//addDialog hide
addDialog.hide();
// set sort column
ds.sort('id','desc');
// reload datasource
ds.load({params:{start:0, limit:pageSize}});
}
});
return newAddDialog;
}
else {
return addDialog;
}
};

// create addDialogLayout
function createAddDialogLayout(dlg) {
if(addDialogLayout == null) {
addDialogLayout = dlg.getLayout();
addDialogLayout.beginUpdate();
addDialogLayout.add('center', new Ext.ContentPanel('a-add-inner', {title: ''}));
addDialogLayout.endUpdate();
}
}

// create a update dialog
function createUpdateDialog(dialogName) {
if(updateDialog == null) {
newUpdateDialog = new Ext.LayoutDialog(dialogName, {
modal:true,
autoTabs:true,
proxyDrag:true,
resizable:false,
width:330,
height:205,
shadow:true,
center: {
autoScroll:true,
tabPosition:'top',
closeOnTab:true,
alwaysShowTabs:false
}
});

newUpdateDialog.addKeyListener(27, newUpdateDialog.hide, newUpdateDialog);
newUpdateDialog.addButton('取消', function() {
newUpdateDialog.hide();
});
newUpdateDialog.addButton('保存', function() {
// get updateForm textField value
var uidValue = uidShow.getValue();
var nameValue = nameShow.getValue();
var passwordValue = passwordShow.getValue();
// create update user object
var uUser = {id:selectedId, uid:uidValue, password:passwordValue, name:nameValue};
// if input is valid add the record
if(updateForm.isValid()) {
// set dwr call as none async
DWREngine.setAsync(false);
// call dwr to delete row in database
UserService.update(uUser);
// set dwr call as async
DWREngine.setAsync(true);
//addDialog hide
newUpdateDialog.hide();
// reload datasource
ds.reload();
}
});
return newUpdateDialog;
}
else {
return updateDialog;
}
};

// create updateDialogLayout
function createUpdateDialogLayout(dlg) {
if(updateDialogLayout == null) {
updateDialogLayout = dlg.getLayout();
updateDialogLayout.beginUpdate();
updateDialogLayout.add('center', new Ext.ContentPanel('a-update-inner', {title: ''}));
updateDialogLayout.endUpdate();
}
}

// show add dialog
function showAddDialog(){
// create addForm
addDialog = createAddDialog("a-add-dlg");
//clear all data in addDialog
resetAddForm();
// create addDialog layout
createAddDialogLayout(addDialog);
// show addDialog
addDialog.show();
}

// show update dialog
var uUid;
var uName;
var uPassword;

// dwr call service to get workLog
function getUserById(id) {
UserService.findById(id, getUserCallBack);
}

// dwr call back to set content value
function getUserCallBack(user) {
uUid = user.uid;
uName = user.name;
uPassword = user.password;
}

function showUpdateDialog() {
// check if user has select the row
selectedRows = grid.getSelections();
if(selectedRows <= 0) {
Ext.Msg.alert('错误', '请先选择要操作的记录!');
return;
}
// set dwr call as async
DWREngine.setAsync(false);
// dwr call to get data
getUserById(selectedId);
// set update dialog data
uidShow.setValue(uUid);
nameShow.setValue(uName);
passwordShow.setValue(uPassword);
// create update from
updateDialog = createUpdateDialog('a-update-dlg');
//create updateDialog layout
createUpdateDialogLayout(updateDialog);
// show update dialog
updateDialog.show();
// set dwr call as async
DWREngine.setAsync(true);
}

// for information
Ext.form.Field.prototype.msgTarget = 'side';
//Ext.form.Field.prototype.msgTarget = 'under';
Ext.form.Field.prototype.height = 20;
Ext.form.Field.prototype.fieldClass = 'text-field-default';
Ext.form.Field.prototype.focusClass = 'text-field-focus';
Ext.form.Field.prototype.invalidClass = 'text-field-invalid';

// custom user uid unique validate
function isUidUnique(uid) {
var _result;
// begin dwr call
DWREngine.setAsync(false);
UserService.isUidUnique(uid, function(result) { _result = result; });
DWREngine.setAsync(true);
// end dwr call
return _result;
}

// create addForm textfiled
var uidTf = new Ext.form.TextField({
fieldLabel: '用户',
name:'uid',
minLength:3,
maxLength:12,
vtype:'alphanum',
validator:isUidUnique,
invalidText:"该用户名已存在",
allowBlank:false
});

var passwordTf = new Ext.form.TextField({
fieldLabel:'密码',
name:'password',
inputType:'password',
minLength:6,
maxLength:12,
allowBlank:false
});

var nameTf = new Ext.form.TextField({
fieldLabel:'姓名',
name:'name',
minLength:2,
maxLength:12,
allowBlank:false
});

// create addForm
var addForm = new Ext.form.Form({
labelAlign:'right',
url:''
});

addForm.column({width: 280, labelWidth:40, style:'margin-left:8px;margin-top:8px'});
addForm.fieldset(
{legend:'用户信息'},
nameTf,
uidTf,
passwordTf

);

addForm.applyIfToFields({width:200});
addForm.render('a-add-form');
addForm.end();

// reset addForm data
resetAddForm = function() {
uidTf.setValue('');
passwordTf.setValue('');
nameTf.setValue('');
};

// create updateForm textfield
var uidShow = new Ext.form.TextField({
fieldLabel:'用户',
name:'uid',
disabled:true
});

var passwordShow = new Ext.form.TextField({
fieldLabel:'密码',
name:'password',
inputType:'password',
minLength:6,
maxLength:12,
allowBlank:false
});

var nameShow = new Ext.form.TextField({
fieldLabel:'姓名',
name:'name',
minLength:2,
maxLength:12,
allowBlank:false
});

// create updateForm
var updateForm = new Ext.form.Form({
labelAlign:'right',
url:''
});

updateForm.column({width: 280, labelWidth:40, style:'margin-left:8px;margin-top:8px'});
updateForm.fieldset(
{legend:'用户信息'},
nameShow,
uidShow,
passwordShow
);

updateForm.applyIfToFields({width:200});
updateForm.render('a-update-form');
updateForm.end();

});



and the gird page html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<title></title>
<link rel="stylesheet" type="text/css" href="style/common.css"></link>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-aero.css" />
<!-- libs --
<script type="text/javascript" src="ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ext/adapter/yui/ext-yui-adapter.js"></script>
-->
<!-- include everything after the loading indicator -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<!-- include the locale file -->
<script type="text/javascript" src="ext/locale/ext-lang-zh_CN.js"></script>
<!-- include dwr lib -->
<script type='text/javascript' src='dwr/interface/UserService.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<!-- include custom lib -->
<script type="text/javascript" src="script/dwrproxy.js"></script>
<script type="text/javascript" src="script/usermanage.js"></script>

</head>
<body>

<!-- gird panel -->
<div id="grid-panel" style="width:100%; height:100%;">
<!-- gird -->
<div id="gird"></div>
</div>

<!-- add dialog -->
<div id="a-add-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">添加用户</div>
<div class="x-dlg-bd">
<div id="a-add-inner" class="x-layout-inactive-content">
<div id="a-add-form"></div>
</div>
</div>
</div>

<!-- update dialog -->
<div id="a-update-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">更新用户</div>
<div class="x-dlg-bd">
<div id="a-update-inner" class="x-layout-inactive-content">
<div id="a-update-form"></div>
</div>
</div>
</div>

</body>
</html>

when i run the gird page along. It works fine. but when i add the gird page in to a tabpanel:

var navTabs = {

init:function() {

var jtabs = new Ext.TabPanel('jtabs');

var tab1 = jtabs.addTab('jtabs-1', "用户管理");
var updater = tab1.getUpdateManager();
// set load page script
updater.loadScripts = true;
// load gird page
updater.setDefaultUrl('usermanage.html');
tab1.on('activate', updater.refresh, updater, true);
// set activate
//jtabs.activate('jtabs-1');

}
}

Ext.EventManager.onDocumentReady(navTabs.init, navTabs, true);

the ie report: Ext.EventObject null and the gird can not be display

I have searched the forum can not find out a result.

what problem is it ?

thanks

wanclark
16 Aug 2007, 7:46 PM
when loading, ext-all.js & css have been loaded already. you should remove them. And your scripts also no need Ext.onReady

devnull
17 Aug 2007, 9:43 AM
Or to be more exact, a tabPanel is not a seperate document, it is just a div inside the existing document. you cannot expect it to load a full page as if it were a new browser window.

jiajiacat
18 Aug 2007, 7:19 AM
thanks

i have found a better way : use layout