PDA

View Full Version : Grid show different in Firefox and IE/Opera



ecsun
2 Dec 2007, 6:17 AM
When I use data gride to display my data,they show different in firefox and IE(vista)/opera

In my design,there is a tree,when The node is clicked,thd data will show at the center as a gride.

First is The welcome page(with tree and content panel,follow by the example of column.html)



/**
*Common Java Scripts
*/

var Home={
init : function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout:'border',
items:[new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [
{
title:'Home Navigation',
autoScroll:true,
border:false,
iconCls:'nav',
html:'<div id="tree-viewer" style="overflow:auto;height:400px;border:0px solid #c3daf9;"></div>'
}
,{
title:'Settings',
html: '<p>Set The System Property</p>',
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
region:'center',
margins:'35 5 5 0',
layout:'fit',
autoScroll:false,
items:[{
baseCls:'x-plain',
layout:'fit',
// columnWidth:1,
bodyStyle:'padding:5px 5px 5px 5px',
items:[{
autoScroll:false,
title: 'Content',
html: '<iframe id="content-iframe" frameborder="no" style="width:100%;height:94%"></iframe>'
// <p><iframe id="content-iframe" frameborder="no" style="width:100%;height:100%"></iframe></p>
}]
}]

}]
});
/**
*----------------------------------------------------------
*Start Tree Define
*Define tree Struct
*Tree Define By Song Hai Peng
*----------------------------------------------------------
*/
var Tree = Ext.tree;
var tree = new Tree.TreePanel(
{
el:'tree-viewer',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'/zaodian/treeAction.do?method=tree'
})
}
);
//Defint node click event,when node is clicked,send data to inner 'div' and show data in
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Common Platform',
draggable:false,
id:'source'
});
tree.setRootNode(root);
/**
*Open node URL in a target contanier
*/
tree.on('click', function (node){
if(node.isLeaf()){
Ext.get('content-iframe').dom.src = node.attributes.link+'&node='+node.id;
//define grid;
return true;
}else{
/**
*open node by single click,not double click.
*/
node.toggle();
}
});
// render the tree
tree.render();
root.expand();
}
}

And I use it in JSP like this: Ext.onReady(Home.init,Home);
and It display well.

when Click the node,call these scripts(Follow the example of paging.html):


var DataType={
init:function(){
// create the Data Store
var store = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: '/zaodian/dataTypeAction.do?method=generatorJSONList&entityClass=com.zaodian.core.componentsupport.dao.model.DataType'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'root',
totalProperty: 'total',
id: 'v0v',
fields: [
'v0v','v1v'
]
})

// turn on remote sorting
// remoteSort: true
});
// store.setDefaultSort('lastpost', 'desc');

// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'v0v', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "ID",
dataIndex: 'v0v'
//renderer: renderTopic
},{
header: "Name",
dataIndex: 'v1v',
hidden: false
}]);

// by default columns are sortable
cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
el:'topic-grid',
title:'Entity',
autoHeight:true,
layoutConfig:{
autoWidth:true
},
//autoExpandMax:1000,
//width:900,
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true
// getRowClass : function(record, rowIndex, p, store){
// if(this.showPreview){
// p.body = '<p>'+record.data.v1v+'</p>';
// return 'x-grid3-row-expanded';
// }
// return 'x-grid3-row-collapsed';
// }
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails
}]
})
});

// render it
grid.render();

// trigger the data store load
store.load({params:{start:0, limit:25}});
function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}
};
It show in Firfox is like this,the image that I have upload.please help me.
thank you very much!