PDA

View Full Version : MinHeight, MaxHeight for groups in Panel takes user to the top of panel



shrinkul
23 Aug 2012, 5:51 AM
Hi All,
I am attaching a example where we have set the maxheight, minheight property for panel. With these two properties it takes user to the top row of the panel. As we would like to have dynamic height we need to use these two properties. If we use only height property then it does work properly. Please let me know if there is any way to resolve this issue. We are using ext-js 4.1.0.



var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Cuisine: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true
});
Ext.define('Restaurant', {
extend: 'Ext.data.Model',
fields: ['name', 'cuisine']
});


var Restaurant = Ext.create('Ext.data.Store', {
storeId: 'restaraunts',
model: 'Restaurant',
groupField: 'cuisine',
sorters: ['cuisine','name'],
data: [{
name: 'Cheesecake Factory',
cuisine: 'American'
},{
name: 'University Cafe',
cuisine: 'American'
},{
name: 'Slider Bar',
cuisine: 'American'
},{
name: 'Shokolaat',
cuisine: 'American'
},{
name: 'Gordon Biersch',
cuisine: 'American'
},{
name: 'Crepevine',
cuisine: 'American'
},{
name: 'Creamery',
cuisine: 'American'
},{
name: 'Old Pro',
cuisine: 'American'
},{
name: 'Nola\'s',
cuisine: 'Cajun'
},{
name: 'House of Bagels',
cuisine: 'Bagels'
},{
name: 'The Prolific Oven',
cuisine: 'Sandwiches'
},{
name: 'La Strada',
cuisine: 'Italian'
},{
name: 'Buca di Beppo',
cuisine: 'Italian'
},{
name: 'Pasta?',
cuisine: 'Italian'
},{
name: 'Madame Tam',
cuisine: 'Asian'
},{
name: 'Sprout Cafe',
cuisine: 'Salad'
},{
name: 'Pluto\'s',
cuisine: 'Salad'
},{
name: 'Junoon',
cuisine: 'Indian'
},{
name: 'Bistro Maxine',
cuisine: 'French'
},{
name: 'Three Seasons',
cuisine: 'Vietnamese'
},{
name: 'Sancho\'s Taquira',
cuisine: 'Mexican'
},{
name: 'Reposado',
cuisine: 'Mexican'
},{
name: 'Siam Royal',
cuisine: 'Thai'
},{
name: 'Krung Siam',
cuisine: 'Thai'
},{
name: 'Thaiphoon',
cuisine: 'Thai'
},{
name: 'Tamarine',
cuisine: 'Vietnamese'
},{
name: 'Joya',
cuisine: 'Tapas'
},{
name: 'Jing Jing',
cuisine: 'Chinese'
},{
name: 'Patxi\'s Pizza',
cuisine: 'Pizza'
},{
name: 'Evvia Estiatorio',
cuisine: 'Mediterranean'
},{
name: 'Cafe 220',
cuisine: 'Mediterranean'
},{
name: 'Cafe Renaissance',
cuisine: 'Mediterranean'
},{
name: 'Kan Zeman',
cuisine: 'Mediterranean'
},{
name: 'Gyros-Gyros',
cuisine: 'Mediterranean'
},{
name: 'Mango Caribbean Cafe',
cuisine: 'Caribbean'
},{
name: 'Coconuts Caribbean Restaurant & Bar',
cuisine: 'Caribbean'
},{
name: 'Rose & Crown',
cuisine: 'English'
},{
name: 'Baklava',
cuisine: 'Mediterranean'
},{
name: 'Mandarin Gourmet',
cuisine: 'Chinese'
},{
name: 'Bangkok Cuisine',
cuisine: 'Thai'
},{
name: 'Darbar Indian Cuisine',
cuisine: 'Indian'
},{
name: 'Mantra',
cuisine: 'Indian'
},{
name: 'Janta',
cuisine: 'Indian'
},{
name: 'Hyderabad House',
cuisine: 'Indian'
},{
name: 'Starbucks',
cuisine: 'Coffee'
},{
name: 'Peet\'s Coffee',
cuisine: 'Coffee'
},{
name: 'Coupa Cafe',
cuisine: 'Coffee'
},{
name: 'Lytton Coffee Company',
cuisine: 'Coffee'
},{
name: 'Il Fornaio',
cuisine: 'Italian'
},{
name: 'Lavanda',
cuisine: 'Mediterranean'
},{
name: 'MacArthur Park',
cuisine: 'American'
},{
name: 'St Michael\'s Alley',
cuisine: 'Californian'
},{
name: 'Cafe Renzo',
cuisine: 'Italian'
},{
name: 'Osteria',
cuisine: 'Italian'
},{
name: 'Vero',
cuisine: 'Italian'
},{
name: 'Cafe Renzo',
cuisine: 'Italian'
},{
name: 'Miyake',
cuisine: 'Sushi'
},{
name: 'Sushi Tomo',
cuisine: 'Sushi'
},{
name: 'Kanpai',
cuisine: 'Sushi'
},{
name: 'Pizza My Heart',
cuisine: 'Pizza'
},{
name: 'New York Pizza',
cuisine: 'Pizza'
},{
name: 'California Pizza Kitchen',
cuisine: 'Pizza'
},{
name: 'Round Table',
cuisine: 'Pizza'
},{
name: 'Loving Hut',
cuisine: 'Vegan'
},{
name: 'Garden Fresh',
cuisine: 'Vegan'
},{
name: 'Cafe Epi',
cuisine: 'French'
},{
name: 'Tai Pan',
cuisine: 'Chinese'
}]
});


Ext.define('com.gm.nvls.view.SampleGridView', {
extend: 'Ext.panel.Panel',
alias : 'widget.sampleGridView',

layout: {
type: 'column'
},
title: 'Sample',
id:'searchID',
bodyPadding :10,
collapsible : true,
defaults :{autoWidth : true},
initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
renderTo: Ext.getBody(),
collapsible: true,
iconCls: 'icon-grid',
frame: true,
store: Restaurants,
width: 600,
minheight: 100,
maxheight: 400,
title: 'Restaurants',
resizable: true,
features: [groupingFeature],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Cuisine',
flex: 1,
dataIndex: 'cuisine'
}],
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
groupingFeature.disable();
}
}]
}
]
});


me.callParent(arguments);
}
});



Thanks,
Shrinivas

shrinkul
24 Aug 2012, 12:01 AM
Hello, anyone out there who can help us in this issue. Appreciate your help.

Thanks,
Shrinivas

scottmartin
24 Aug 2012, 2:55 PM
We are using ext-js 4.1.0.
Do you see this behavior in 4.1.1?

Scott.

shrinkul
24 Aug 2012, 7:51 PM
Hi Scott,
Not sure about ext-js 4.1.1. But we can upgrade to this version as we see some of alignment issues. We already tried. Lets know if we have any other solution for this. Appreciate your guidance here.

Thanks,
Shrinivas

shrinkul
27 Aug 2012, 1:13 AM
Hi Scott,
We tried with upgrade to ext-js 4.1.1 but it is giving alignment issues for component so reverted back. Appreciate your guidance for patch on ext-js 4.1.0.

Thanks,
Shrinivas

scottmartin
27 Aug 2012, 4:23 AM
Can you isolate the problem to see if 4.1.1 corrected the original issue reported?
Do you have more detail on the alignment issue so we can address this?

Scott.

shrinkul
27 Aug 2012, 5:48 AM
Hi Scott,
No, our application is huge we can not migrate it to 4.1.1 to resolve this issue, it is working with sample code for 4.1.1. Please let me know what is work around in 4.1.0. Appreciate your help in this.

Thanks,
Shrinivas

scottmartin
27 Aug 2012, 6:04 AM
I understand your point, but I would like to know if you could create a test case for 4.1.1 to see if it corrects your problem so we can determine if that can be used to provide a fix for 4.1.0
(if possible)

Scott.

shrinkul
27 Aug 2012, 6:12 AM
Sorry Scott, its not working with 4.1.1, by mistake I have said it is working with 4.1.1.

shrinkul
28 Aug 2012, 6:34 AM
Hi Scott,
Did you find any resolution for mentioned issue? Kindly let me know.

Thanks,
Shrinivas

shrinkul
29 Aug 2012, 6:52 PM
Hi Scott,
Any resolution? Kindly let me know.

Thanks,
Shrinivas

scottmartin
29 Aug 2012, 8:56 PM
I will look at this tomorrow .. busy week.

Scott.

scottmartin
30 Aug 2012, 10:12 AM
With these two properties it takes user to the top row of the panel

I have your test case up and running ..
Can I get you to clarify what I am looking for .. you info seems a little vague.

How do I duplicate the problem and what is expected exactly.

Scott

shrinkul
30 Aug 2012, 7:37 PM
Hi Scott,
Let me explain once again we need to use minHeight & maxheight so that after 10 records displayed and if it has more records to display the the scroll bar should come. if we minimize groups in grid then focus should remain their but it is not happening. The focus is going on top of the grid. We need to get use the grouping so that use can use it very much extensively. if you remove these two property and use only height then the focus remain there where we minimize the group. if you use these two property then the focus goes on top of the grid. Hope its clear now. Let me know if you are looking for some more explanation.

Thanks,
Shrinivas

scottmartin
30 Aug 2012, 7:56 PM
Thanks ... will get on this first thing in the morning ... long day ;)

Scott.

scottmartin
31 Aug 2012, 5:40 AM
The issue with the height is that you did not have the values camel cased:

Should be:


minHeight: 100,
maxHeight: 400,


You had:


minheight: 100,
maxheight: 400,


As for the record issue.. if you select a record down in the list, it does scroll backup.
I will continue to see about this.

Scott.

scottmartin
31 Aug 2012, 6:01 AM
The following will disable the scrolling when you collapse/expand the group




Ext.override(Ext.grid.feature.Grouping, {

expand: function(groupName, focus, preventSizeCalculation) {
var me = this,
view = me.view,
groupHeader,
groupBody,
lockingPartner = me.lockingPartner;


if (Ext.isString(groupName)) {
groupBody = Ext.fly(me.getGroupBodyId(groupName), '_grouping');
}

else {
groupBody = Ext.fly(groupName, '_grouping')
groupName = me.getGroupName(groupBody);
}
groupHeader = Ext.get(me.getGroupHeaderId(groupName));


if (me.collapsedState[groupName]) {
groupBody.removeCls(me.collapsedCls);
groupBody.prev().removeCls(me.hdCollapsedCls);

if (preventSizeCalculation !== true) {
// view.refreshSize();
}
view.fireEvent('groupexpand', view, groupHeader, groupName);
me.collapsedState[groupName] = false;


if (lockingPartner) {
lockingPartner.expand(groupName, focus, preventSizeCalculation);
}
if (focus) {
groupBody.scrollIntoView(view.el, null, true);
}
}
},

collapse: function(groupName, focus, preventSizeCalculation) {
var me = this,
view = me.view,
groupHeader,
groupBody,
lockingPartner = me.lockingPartner;


if (Ext.isString(groupName)) {
groupBody = Ext.fly(me.getGroupBodyId(groupName), '_grouping');
}

else {
groupBody = Ext.fly(groupName, '_grouping')
groupName = me.getGroupName(groupBody);
}
groupHeader = Ext.get(me.getGroupHeaderId(groupName));


if (!me.collapsedState[groupName]) {
groupBody.addCls(me.collapsedCls);
groupBody.prev().addCls(me.hdCollapsedCls);

if (preventSizeCalculation !== true) {
// view.refreshSize();
}
view.fireEvent('groupcollapse', view, groupHeader, groupName);
me.collapsedState[groupName] = true;


if (lockingPartner) {
lockingPartner.collapse(groupName, focus, preventSizeCalculation);
}
if (focus) {
groupHeader.scrollIntoView(view.el, null, true);
}
}
}

});


Scott.