PDA

View Full Version : [2.0a1][SOLVED] problems with GroupingView



galdaka
10 Oct 2007, 6:59 AM
Environment:

windows 2000
ext-base.js
IE 6.0

Problem:

1) GroupinView not expnads the columns to all width of her container (GridPanel).

2) Problems with collapsible mini mode.

View image.

Thanks in advance,

mystix
10 Oct 2007, 9:06 AM
pls post your test code. thanks.

jack.slocum
10 Oct 2007, 10:16 AM
Are you telling it to expand? e.g. forceFit:true in the views config or an autoExpandColumn.

galdaka
10 Oct 2007, 10:17 AM
Put this code in "...\ext-2.0-beta1\examples\grid" and run. Sorry I have not host for live example.

[CODE]<html>
<head>
<title>Estructura est

jack.slocum
10 Oct 2007, 10:19 AM
You are passing the configs to the grid, when you need to pass them to the view. Please take a look at grouping.js sample included in the download for an example.

galdaka
10 Oct 2007, 10:24 AM
Solved point 1):


...
view: new Ext.grid.GroupingView({forceFit:true}),
...

Thanks for quick reply! ;)

This problem persist:

2) Problems with collapsible mini mode. (View image for details)

Thanks in advance,

galdaka
10 Oct 2007, 10:48 AM
I

jack.slocum
10 Oct 2007, 10:58 AM
Please explain your problem. Those images are tiny and I can't see what the issue it.

galdaka
10 Oct 2007, 11:39 AM
Sorry for my bad English,

I have a layout with 3 regions: north, center and south.

North for toolbar. center for a groupview and south for a iframe where opens a entrie that clicked in a groupview. (View createPage() function for Layout).

The problem is that the collapsible mini image is not correctly positioned in top of center region.

View another big image.

The three above situations ocurrs when I playing with options. In one case the header dissapers, In other case the footer of groupView crash. In all of situations the
"collapsible mini" image positioned worng.

Thanks in advance and sorry for my explanations,

jsakalos
10 Oct 2007, 12:03 PM
I was trying to run you code but ux/PageSizePlugin.js is missing. BTW, cannot the problem lie in that plugin?

galdaka
10 Oct 2007, 12:43 PM
Thanks for your reply, I attach the UX.

jsakalos
10 Oct 2007, 12:57 PM
Hmm, title of this thread reads [CLOSED]. Is any further action required?

mystix
10 Oct 2007, 7:00 PM
Hmm, title of this thread reads [CLOSED]. Is any further action required?

changed the thread title (removed the [CLOSED] tag). :)

galdaka
11 Oct 2007, 12:02 AM
Hi,

Is not a problem of UX.

I attach more simple example for test.

I test the code in IE6 and FF2.

I test the code with alpha1 and beta1. The problem persist.

Thanks in advance,

jsakalos
11 Oct 2007, 1:28 PM
I'm trying to run your grid2.html and I'm getting an error cause by this line:



function createGrid(){

var ds = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url:'http://XXXXXXXXXX' // <-- going cross domain to something not existing
}),

galdaka
12 Oct 2007, 5:00 AM
I have not host for live example, sorry.

But the error exists. In IE6 if you press "STOP" you can play with the interface, in FF2 not.

But the load data is not important, the problem is in layout.

FuryVII
12 Oct 2007, 8:17 AM
galdaka linked this post from my original post: http://extjs.com/forum/showthread.php?t=14530

I don't believe the problem is the same. I have code an an image posted. I would appreciate any guidance that could be given.

jsakalos
12 Oct 2007, 12:00 PM
I have not host for live example, sorry.

But the error exists. In IE6 if you press "STOP" you can play with the interface, in FF2 not.

But the load data is not important, the problem is in layout.


I understand, however there is no Firebug in IE and it's extremely difficult for me to find a bug w/o it. You could maybe add some static records to enable me to run the code to the point where I can reproduce the bug.

benwg
12 Oct 2007, 5:33 PM
When i was't set the width property of gridpanel,and seted the "autoExpandColumn=columnid" property or "forceFit:true" in the viewconfig ,the column's width will incorrect in IE.I think this is a bug.I changed grouping.js to show this bug.I just comment the line width:700.

frame:true,
// width: 700,
height: 450,
collapsible: true,

jack.slocum
12 Oct 2007, 8:09 PM
Ben setting some kind of dimensions is not optional.

benwg
12 Oct 2007, 10:00 PM
I want the grid to fill all width of browser.I guest the bug in Ext.Element.getWidth().the function return 10000 in IE.

Ben setting some kind of dimensions is not optional.

jack.slocum
13 Oct 2007, 10:12 AM
There is no bug Ben. You cannot have auto browser width in a component that requires layout. If you want to have 100% width than you need to use the appropriate Ext layout classes to acheive it.

benwg
13 Oct 2007, 5:30 PM
Thanks jack,i will try to put gridpanel into a viewport.

There is no bug Ben. You cannot have auto browser width in a component that requires layout. If you want to have 100% width than you need to use the appropriate Ext layout classes to acheive it.

benwg
13 Oct 2007, 8:27 PM
I have solved this problem,the gridpanel should be put into viewport and set the gridpanel's region option to center.Thank jack very much.

galdaka
14 Oct 2007, 9:31 AM
Definitive example for reproduce the bug.

Try to expand / collapse south region. The bottom toolbar dissapers

jsakalos
14 Oct 2007, 1:17 PM
It's not bug, it's misconfiguration. Try this code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
<script type="text/javascript">
// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];

var ds = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'}
,{name: 'price', type: 'float'}
,{name: 'change', type: 'float'}
,{name: 'pctChange', type: 'float'}
,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
,{name: 'industry'}
,{name: 'desc'}
])
,data: Ext.grid.dummyData
,sortInfo:{field: 'company', direction: "ASC"}
,groupField:'industry'
});
function serverGrouping(){
ds.groupField = 'industry';
ds.load
};
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'border'
,items:[new Ext.grid.GridPanel({
region:'center'
,split:true
,layout:'fit'
,ds:ds
,columns:[
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'}
,{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}
,{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney}
,{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'}
,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
,view: new Ext.grid.GroupingView({
forceFit:true
,groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
,bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 15
})
}),{
title:'South'
,region:'south'
,height:160
,split:true
,collapsible:true
,collapseMode:'mini'
}]

});
});
</script>
<title>Grid in Border Layaout</title>
</head>
<body>
</body>
</html>

benwg
14 Oct 2007, 5:04 PM
Thanks,the extjs is great jobs!

It's not bug, it's misconfiguration. Try this code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
<script type="text/javascript">
// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];

var ds = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'}
,{name: 'price', type: 'float'}
,{name: 'change', type: 'float'}
,{name: 'pctChange', type: 'float'}
,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
,{name: 'industry'}
,{name: 'desc'}
])
,data: Ext.grid.dummyData
,sortInfo:{field: 'company', direction: "ASC"}
,groupField:'industry'
});
function serverGrouping(){
ds.groupField = 'industry';
ds.load
};
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'border'
,items:[new Ext.grid.GridPanel({
region:'center'
,split:true
,layout:'fit'
,ds:ds
,columns:[
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'}
,{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}
,{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney}
,{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'}
,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
,view: new Ext.grid.GroupingView({
forceFit:true
,groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
,bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 15
})
}),{
title:'South'
,region:'south'
,height:160
,split:true
,collapsible:true
,collapseMode:'mini'
}]

});
});
</script>
<title>Grid in Border Layaout</title>
</head>
<body>
</body>
</html>

galdaka
15 Oct 2007, 12:19 AM
It's not bug, it's misconfiguration. Try this code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
<script type="text/javascript">
// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];

var ds = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'}
,{name: 'price', type: 'float'}
,{name: 'change', type: 'float'}
,{name: 'pctChange', type: 'float'}
,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
,{name: 'industry'}
,{name: 'desc'}
])
,data: Ext.grid.dummyData
,sortInfo:{field: 'company', direction: "ASC"}
,groupField:'industry'
});
function serverGrouping(){
ds.groupField = 'industry';
ds.load
};
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'border'
,items:[new Ext.grid.GridPanel({
region:'center'
,split:true
,layout:'fit'
,ds:ds
,columns:[
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'}
,{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}
,{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney}
,{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'}
,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
,view: new Ext.grid.GroupingView({
forceFit:true
,groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
,bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 15
})
}),{
title:'South'
,region:'south'
,height:160
,split:true
,collapsible:true
,collapseMode:'mini'
}]

});
});
</script>
<title>Grid in Border Layaout</title>
</head>
<body>
</body>
</html>




Thanks for your reply,

My case is diferent, you create a diferent example and works fine.

In my case, I need to create grid and layout in diferent functions, and you example is not valid for me. You Know what is the error in my example? or how to solve it?

Thanks in advance,

jsakalos
15 Oct 2007, 1:39 AM
Hi galdaka,

I'm not saying that you can take the example and you have your application ready. All what I was trying to achieve with it was to show you how to put grid to a border layout region. Grid that resizes with the region and that fills the region. I meant it as a workable starting point that you can adapt to your needs.

You see, if it can work in my example it shows that it is not bug in Ext so the development team doesn't need to hunt something that does not exist.

galdaka
15 Oct 2007, 4:02 AM
Hi galdaka,

I'm not saying that you can take the example and you have your application ready. All what I was trying to achieve with it was to show you how to put grid to a border layout region. Grid that resizes with the region and that fills the region. I meant it as a workable starting point that you can adapt to your needs.

You see, if it can work in my example it shows that it is not bug in Ext so the development team doesn't need to hunt something that does not exist.

Thanks again,

I modify my code for this. View Image.

jsakalos
15 Oct 2007, 9:41 AM
Does it work now?

galdaka
15 Oct 2007, 9:46 AM
Does it work now?

Yes, thanks very much. http://extjs.com/forum/attachment.php?attachmentid=2111&d=1192449736

Now I have other problem

jsakalos
15 Oct 2007, 9:49 AM
I'm glad it works and I wish you success with your iframe. :)