How to handle Browser Vertical and Horizontal Scrollbar as GridPanel Scrollbar

[siddmuk2005]

Hello,

I have tried to make Browser vertical and horizontal scroll bar as GridPanel Vertical and horizontal Scroll bar. But not able to do. Please help urgently. any Help appreciated

[scottmartin]

Please describe in more detail what you are trying to do .. If you place the grid in a viewport and make the layout: fit and add a grid ?

There is a lot of room in your comment.

Scott.

[siddmuk2005]

Hello Dear,

Thanks for promopt response.

I have gridpanel with 1000 rows. so vertical scroll bar is there to navigate the rows within gridpanel. I want that my browser vertical scroll bar sould have control for gridpanel row navigation and i don't want panel scrollbar. My Code is as follows:

state.js is as follows:


Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.window.Window',
'Ext.container.Viewport',
'Ext.layout.container.Border',
'Ext.state.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller',
'Ext.ux.grid.FiltersFeature',
]);



Ext.onReady(function(){

// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

var store = Ext.create('Ext.data.Store', {
storeId: 'myGridStore',
id:'myGridStore',
remoteSort: false,
autoDestroy: true,
pageSize: 100,
//buffered: true,
purgePageCount: 0,
remoteFilter: true,//need to configure for locakable grid
sorters: [{
property: 'first',
direction: 'ASC'
}],
fields: [
{name: 'first'},
{name: 'last'},
{name: 'age', type: 'int'},
{name: 'review'},
{name: 'Prasent'},
{name: 'Permanent'},
{name: 'College'},
{name: 'Father'},
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

],
data: myData,
proxy: {
type: 'memory',
reader: {
type: 'json',
totalProperty: 'totalCount'
}
}

});


var gridHeaderFilters = Ext.create('Ext.ux.grid.GridHeaderFilters', {
// set any properties here GridHeaderFilters.js
});



// create the Grid
var myGridPanel = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('myGridStore'),//store,
columnLines: true,
cls: 'grid',
/*verticalScroller: {
xtype: 'paginggridscroller',
activePrefetch: false
},*/
loadMask: true,
disableSelection: false,//changed here from true to false
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false
},
plugins: [gridHeaderFilters],
headerFilters: {},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Reset Filters',
handler: function(){
myGridPanel.resetHeaderFilters();
}
},
{
xtype: 'button',
text: 'Clear Filters',
handler: function(){
myGridPanel.clearHeaderFilters();
}
},
{
xtype: 'button',
text: 'Apply Filters',
handler: function(){
myGridPanel.applyHeaderFilters();
}
}
]
}
],

columns: [
/*{
xtype: 'rownumberer',
width: 50,
sortable: false
},*/
{
text: 'First Name',
dataIndex: 'first',
width: 70,
flex: 1.3,
allowBlank: false,
locked : true,
field: {
type: 'textfield',
allowBlank: false
},
filter:{
encode: false,
local: true,
xtype: 'textfield',
filterName: 'first',
filterLabel: 'First Name'
}
},
{
text : 'Last Name',
dataIndex: 'last',
width: 70,
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "last",
filterLabel: 'Last Name'
}
},{
text : 'Age',
dataIndex: 'age',
width: 40,
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "age"
}

},{
text : 'Review',
dataIndex: 'review',
width: 100,
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},

filter: {
xtype: "textfield",
filterName: "review"
}

},{
text : 'Prasent Address',
dataIndex: 'Prasent',
width: 125,
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "Prasent"
}

},{
text : 'Permanent Address',
dataIndex: 'Permanent',
width: 100,
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "Permanent"
}

},{
text : 'College',
dataIndex: 'College',
width: 70,
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "College"
}

},{
text : 'Father Name',
dataIndex: 'Father',
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "Father"
}
},{
text : 'Company Name',
dataIndex: 'company',
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "company"
}

},{
text : 'Fee',
renderer : 'usMoney',
dataIndex: 'price',
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "price"
}

},{
text : 'Change',
renderer : change,
dataIndex: 'change',
flex: 1,
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: "textfield",
filterName: "change"
}

},{
dataIndex: 'pctChange',
flex: 0.8,
text: '% Change',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false,
vtype: 'alphaSpace'
},
filter: {
xtype: 'textfield',
filterName: 'Change',
filterLabel: 'Change'
}
},{
dataIndex: 'lastChange',
flex: 1,
text: 'Name',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
},
filter: {
xtype: 'textfield',
filterName: 'lastChange',
filterLabel: 'lastChange'
}
}

],
//height: document.body.clientHeight,
width: document.body.clientWidth
//title: 'Locking Grid Column with ext-js 4.1'
});

myGridPanel.on('edit', function(e) {
e.record.save();
});
//store.guaranteeRange(0, 50); don't apply this other wise data will not come
myGridPanel.getStore().on('load', function anonym(){
myGridPanel.setHeight(this.getCount() * 16); // to be calculated
});


var centerPanel=new Ext.Panel({
id: 'centerPanel',
region: 'center', // a center region is ALWAYS required for border layout
layout: 'card',
activeItem:0,
height: document.body.clientHeight,
width: document.body.clientWidth,
items: [
myGridPanel
]
//,renderTo:'myViewPortDiv'
});

/*var win = new Ext.Window({
applyTo:'myViewPortDiv',
layout:'fit',
//height: document.body.clientHeight,
//width: document.body.clientWidth,
closeAction:'hide', //'close' - destroy the component
plain: true,
items: myGridPanel
});
win.show();*/
var htmlData='<div>hello</div>';

Ext.create('Ext.container.Viewport', {
layout:'border',
renderTo:'myViewPortDiv',
items: [
{
region: 'center',
id: 'mainPanel',
layout: 'border',
frame: false,
border:false,
items: [centerPanel]
}
]
});
});

HTMl file is as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Maintaining Component State Sample</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<style type="text/css">
.grid {
margin: 0 auto;
position: relative;
width: 700px;
margin-top: 5px;
}
.add {
background: url('../writer/images/add.png');
}
.delete {
background: url('../writer/images/delete.png');
}
.save {
background: url('../writer/images/save.gif');
}

</style>


<!-- GC -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="GridHeaderFilters.js"></script>
<script type="text/javascript" src="griddata.js"></script>
<script type="text/javascript" src="state.js"></script>
</head>
<body>
</body>
</html>

griddata.js file is as follows:

var myData= [{
first: 'John',
last: 'Smith',
age: 32,
review: 'Solid performance, needs to comment code more!',
Prasent:'Noida',
Permanent:'Obra',
College:'Bhopal University',
Father:'Albert Aienstien',
company:'3m Co',
price:71.72,
change: 0.02,
pctChange: 0.03,
lastChange:'9/1 12:00am'


}, {
first: 'Jane',
last: 'Brown',
age: 56,
review: 'Excellent worker, has written over 100000 lines of code in 3 months. Deserves promotion.',
Prasent:'Noida',
Permanent:'Obra',
College:'Bhopal University',
Father:'Albert Aienstien',
company:'3m Co',
price:71.72,
change: 0.02,
pctChange: 0.03,
lastChange:'9/1 12:00am'


}, {
first: 'Kevin',
last: 'Jones',
age: 25,
review: 'Insists on using one letter variable names for everything, lots of bugs introduced.',
Prasent:'Noida',
Permanent:'Obra',
College:'Bhopal University',
Father:'Albert Aienstien',
company:'3m Co',
price:71.72,
change: 0.02,
pctChange: 0.03,
lastChange:'9/1 12:00am'


}, {
first: 'Will',
last: 'Zhang',
age: 41,
review: 'Average. Works at the pace of a snail but always produces reliable results.',
Prasent:'Noida',
Permanent:'Obra',
College:'Bhopal University',
Father:'Albert Aienstien',
company:'3m Co',
price:71.72,
change: 0.02,
pctChange: 0.03,
lastChange:'9/1 12:00am'


}, {
first: 'Sarah',
last: 'Carter',
age: 23,
review: 'Only a junior, but showing a lot of promise. Coded a Javascript parser in Assembler, very neat.',
Prasent:'Noida',
Permanent:'Obra',
College:'Bhopal University',
Father:'Albert Aienstien',
company:'3m Co',
price:71.72,
change: 0.02,
pctChange: 0.03,
lastChange:'9/1 12:00am'

}, {
first: 'Sarah',
last: 'Carter',
age: 23,
review: 'Only a junior, but showing a lot of promise. Coded a Javascript parser in Assembler, very neat.',
Prasent:'Noida',
Permanent:'Obra',
College:'Bhopal University',
Father:'Albert Aienstien',
company:'3m Co',
price:71.72,
change: 0.02,
pctChange: 0.03,
lastChange:'9/1 12:00am'

}];

GirdHeaderFileter is extjs plugin

[siddmuk2005]

Still waiting for reply.

[siddmuk2005]

Hello Dear,

I have changed the code now i want: Please give some example to make floating Grid header so that when i will scroll down with browser i can see the rows and floating header for column rows data on top on browser.

PLS REPLY.