PDA

View Full Version : Problem On Scoll Grid Panel



wonderway
14 Jun 2013, 2:06 AM
Guys, i have problem in scroll grid panel, autoScroll doesn't worked. Here's the code:



Ext.define('MyProject.view.MyTab', {
extend: 'Ext.tab.Panel',

id: 'MyTab',
width: 1355,
height: 628,
border: false,


initComponent: function() {

var me = this;


Ext.applyIf(me,
{
items:
[
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'gridpanel',
title: 'Tab 2'
title: '2G',
height: 600,
autoScroll: true,
forceFit: true,
columnLines: true,
// store: storeData,
// features: [filtersData],
emptyText: 'No Matching Records',
columns: [
{
text : 'REGIONAL',
flex : 1,
dataIndex: 'region'
},
{
text : 'Area',
flex : 1,
dataIndex: 'area'
},
{
text : 'VENDOR',
flex : 1,
dataIndex: 'vendor'
},
{
text : 'BSC NAME',
flex : 1,
dataIndex: 'bcn_name'
},
{
text : 'SITE NAME',
flex : 1,
dataIndex: 'site_name'
},
{
text: 'CELL NAME /',
flex: 1,
columns:
[
{
text : 'BTSM',
flex: 1,
dataIndex: 'btsm'
}
]
},
{
text : 'NE ID',
flex : 1,
dataIndex: 'ne_id'
},
{
text : 'SITE ID',
flex : 1,
dataIndex: 'site_id'
},
{
text : 'LAC',
flex : 1,
dataIndex: 'lac'
},
{
text : 'CELL ID',
flex : 1,
dataIndex: 'cell_id'
},
{
text: 'BSIC',
flex: 1,
columns:
[
{
text : 'NCC',
flex: 1,
dataIndex: 'ncc'
},
{
text : 'BCC',
flex: 1,
dataIndex: 'bcc'
}
]
},
{
text: 'TRX FREQUENCY',
flex: 1,
columns:
[
{
text : 'f0',
flex: 1,
dataIndex: 'f0'
},
{
text : 'f1',
flex: 1,
dataIndex: 'f1'
},
{
text : 'f2',
flex: 1,
dataIndex: 'f2'
},
{
text : 'f3',
flex: 1,
dataIndex: 'f3'
},
{
text : 'f4',
flex: 1,
dataIndex: 'f4'
},
{
text : 'f5',
flex: 1,
dataIndex: 'f5'
},
{
text : 'f6',
flex: 1,
dataIndex: 'f6'
},
{
text : 'f7',
flex: 1,
dataIndex: 'f7'
},
{
text : 'f8',
flex: 1,
dataIndex: 'f8'
},
{
text : 'f9',
flex: 1,
dataIndex: 'f9'
},
{
text : 'f10',
flex: 1,
dataIndex: 'f10'
},
{
text : 'f11',
flex: 1,
dataIndex: 'f11'
}
]
},
{
text: 'TOTAL TRX',
flex: 1,
columns:
[
{
text : 'TRX / SEC',
flex: 1,
dataIndex: 'trx_sec'
}
]
},
{
text : 'TRX / SITE',
flex : 1,
dataIndex: 'trx_site'
},
{
text : 'SITE',
flex : 1,
dataIndex: 'site'
},
{
text : 'BTS',
flex : 1,
dataIndex: 'bts'
},
{
text : 'CELL',
flex : 1,
dataIndex: 'cell'
},
{
text : 'BSC',
flex : 1,
dataIndex: 'bsc'
},
{
text : 'TYPE BTS',
flex : 1,
dataIndex: 'type_bts'
},
{
text : 'CLASS (A/B/C/D/E)',
flex : 1,
dataIndex: 'class'
},
{
text : 'STATUS (Lock/Unlock)',
flex : 1,
dataIndex: 'status'
},
{
text : 'Type Freq (GSM/DCS)',
flex : 1,
dataIndex: 'type_freq'
},
{
text : 'New Site (N)',
flex : 1,
dataIndex: 'new_site'
},
{
text : 'ON AIR ( YES/NO )',
flex : 1,
dataIndex: 'on_air'
},
{
text : 'Date ON AIR',
flex : 1,
dataIndex: 'date_on_air'
},
{
text : 'KPI PASS ( YES/NO )',
flex : 1,
dataIndex: 'kpi_pass'
},
{
text : 'Date KPI PASS',
flex : 1,
dataIndex: 'date_kpi_pass'
},
{
text : 'Date KPI PASS',
flex : 1,
dataIndex: 'date_kpi_pass'
},
{
text : 'REMARK (OTHER INFO)',
flex : 1,
dataIndex: 'remark'
},
{
text : 'DEPARTEMENT',
flex : 1,
dataIndex: 'dept'
},
{
text : 'TECHNICAL AREA',
flex : 1,
dataIndex: 'tech_area'
},
{
text : 'LONGITUDE',
flex : 1,
dataIndex: 'longitude'
},
{
text : 'LATITUDE',
flex : 1,
dataIndex: 'latitude'
}
],
dockedItems:
[
{
xtype: 'toolbar',
dock: 'top',
items:
[
{
xtype: 'combobox',
fieldLabel: 'Type:',
width: 100,
labelWidth: 25
}
]
},
{
xtype: 'pagingtoolbar',
dock: 'bottom',
}
]
}
]
});


me.callParent(arguments);
}
})


what i'm doing wrong? i'm use Ext.JS v4.20

slemmon
16 Jun 2013, 10:53 PM
When you define your panel here you have a child item of a tabpanel. It doesn't appear you need that parent panel. So, instead of extending Ext.panel.Panel with a child of tab.Panel just extend tab.Panel directly.

Then for the items of tabPanel the one with the grid in it is a panel with a child item of grid. Instead, just have the grid be the tab items itself - not nested inside of another panel as its tab.

You're over-nesting components - too many panels owning child components where they don't need to.

wonderway
17 Jun 2013, 1:25 AM
When you define your panel here you have a child item of a tabpanel. It doesn't appear you need that parent panel. So, instead of extending Ext.panel.Panel with a child of tab.Panel just extend tab.Panel directly.

Then for the items of tabPanel the one with the grid in it is a panel with a child item of grid. Instead, just have the grid be the tab items itself - not nested inside of another panel as its tab.

You're over-nesting components - too many panels owning child components where they don't need to.

Ok, I've fixed the code, but scrollbar still doesn't appear, any suggestion??

slemmon
17 Jun 2013, 12:38 PM
Do you mean that you don't see a horizontal scrollbar when you have your grid rendered, but no data loaded to it?

If so, that was a bug in 4.2, but was fixed in 4.2.1.

wonderway
17 Jun 2013, 7:29 PM
Do you mean that you don't see a horizontal scrollbar when you have your grid rendered, but no data loaded to it?

If so, that was a bug in 4.2, but was fixed in 4.2.1.

Yeah i think like that. When my Grid is rendered and have so much column, horizontal scrollbar must automatically show, isn't it?

ok, i will try to use 4.2.1

slemmon
18 Jun 2013, 6:09 PM
If the store is empty and the columns overflow you won't see a horizontal scrollbar in 4.2.0, but will in 4.2.1 (bugfix).