PDA

View Full Version : TreePanel appears different in IE and firefox and modifying css



syl_via38
7 Sep 2011, 12:19 AM
Hello,

In fact I have two questions :

1. I try a treePanel and a header named "Name" appears in IE but not in Firefox (see attachment) . I would like to remove this header. Any Idea ?

2. I would like to find a simple way to change the css of the treePanel (color of lines, height of lines ...) but I didn't find any idea on the web.

Thanks in advance for your replies.

Syl

27912

syl_via38
7 Sep 2011, 11:04 PM
Hello,

I founded a solution for the treeStyle (for line colors in fact not line height) :

for example put this in your css


.customMenu .x-grid-row-selected .x-grid-cell {
color:#474A4A;
}

an this line in your object :



cls : 'customMenu',



BUT .... I already have the problem with the differents appearence of treePanel between IE and firefox !

Thanks

skirtle
8 Sep 2011, 7:35 AM
Please post separate questions in separate threads.

The CSS approach you've found is the correct way to do most styling.

As for the header problem, try hideHeaders: true. If that doesn't work we'll need:


Exact ExtJS version.
Exact browser versions.
The config for your tree. Try cutting out options that aren't required before posting it.

syl_via38
9 Sep 2011, 1:58 AM
Hello,

Yes I use the hideHeaders option, but it doesn't work.



var treeUser = Ext.create('Ext.tree.Panel', {
title: 'myTitle',
cls : 'customMenu',
sortableColumns : false,
folderSort : false,
frameHeader : false,
hideHeaders : true,
useArrows:true,
margin:'30 0 40 0',
rootVisible :false,
listeners: {...}
}

ExtJs version is 4.0.3 and browser version is 8.0.6001.18702

Thanks
Syl

skirtle
9 Sep 2011, 2:06 AM
I think the first step to explaining this is to understand where Name comes from. Do you have the string Name in your code somewhere? I don't see it in the code you've posted.

syl_via38
12 Sep 2011, 1:02 AM
Hello,

Of course, it was one of the first thing that I did, I searched everywhere in my code this "Name", but nothing... it's not in my code...

Mystère, mystère ....

Thanks
Syl

skirtle
12 Sep 2011, 2:14 AM
Have a search through the ExtJS source too, it must be coming from somewhere.

I don't have a copy of 4.0.3 to test. The release notes that come with 4.0.6 mysteriously skip 4.0.3 in the release history so I'm wondering whether 4.0.3 was pulled and you got unlucky downloading it immediately after it was released.

syl_via38
12 Sep 2011, 5:04 AM
Well,

I downloaded et installed the version 4.0.2a (gpl) and there is the same problem

Syl

skirtle
12 Sep 2011, 7:28 AM
OK, I can see where the string 'Name' comes from. If you set hideHeaders: false you'll see it in all browsers. What I can't reproduce is the behaviour you're seeing where it shows up unexpectedly in IE8.

Could you try extracting a complete, minimal test case? I gave it a go with the config you gave previously but it didn't exhibit this problem. Try to create just a tree with nothing else on the page and remove all of the optional settings.

syl_via38
12 Sep 2011, 7:56 AM
Ok, here is a litle source code with a simple tree. ExtJS 4.0.2a and IE 8.0.6001.18702..



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test tree</title>
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="extJS/resources/css/ext-all-gray.css" />
<script type="text/javascript" src="extJS/ext-all-debug.js"></script>

</head>

<body>

<script type="text/javascript">
Ext.require(['*']);
</script>
<!-- INCLUDES -->

<script type="text/javascript">

////////////////// VARIABLES ///////////////////////
var treeAdmin = Ext.create('Ext.tree.Panel', {
title: 'Titre',
useArrows:true,
hideHeaders: true,
root: {
text: 'Comptes utilisateurs',
expanded: true,
children: [{
text: 'Child admin 1',
leaf: true
}, {
text: 'Child admin 2',
leaf: true
}]
}
});

///////////////// APPLICATION WINDOW //////////////////////
Ext.onReady(function(){
Ext.create('Ext.Viewport', {
baseCls:'homePage',
layout: {
type: 'border',
padding: 3
},
defaults: {
split: true
},
items: [
{
region: 'center',
layout: 'border',
margins:'0 3 3 0',
border: false,
frame:true,
items: [{
id:'panelCenter',
split: false,
region: 'center',
items:treeAdmin,
frame:true,
title: '<span class=panelTitle>Center</span>'

}]

}]
});
});
</script>
</body>
</html>


and the result in IE

28020

Thanks for your replies and the time that you spend on my problems

Syl

skirtle
12 Sep 2011, 8:06 AM
OK, managed to reproduce it with that. First observation is that using 4.0.6 doesn't help. Will dig in a bit more and let you know what I find.

skirtle
12 Sep 2011, 8:19 AM
Not sure why it happens but I now know how to fix it. Just move the creation of the tree inside the Ext.onReady().

syl_via38
12 Sep 2011, 11:03 PM
Indeed this solution works, but I have big dynamic application with special code page for menus : switch cases, different trees appears and change switch user actions, I cannot put the creation of all the tree in the index of the application, it's not very clean way ...

I have to search again on this problem

Thanks

skirtle
13 Sep 2011, 3:09 AM
You don't have to. The problem is that you're creating the tree before the page is ready. You don't have to put this logic inside the Ext.onReady() block per se but the code must run after the page is ready. If the tree was created in reaction to a user interaction like a button click then the page would be ready and there wouldn't be a problem.

syl_via38
13 Sep 2011, 4:45 AM
Well,

I putted a fonction at start of onready() where all treePanels are created in advance.

It works, thanks.