PDA

View Full Version : extjs grid autoscroll is not visible inside the html tabs



sreenath886
7 Dec 2011, 8:32 AM
i have 2 html tabs and 2 js grids files.first html tab cantain js grid working fine but my second tab js grid autoscroll is not working . sry for my bad english.can u help me

////////////////////////////////////////////////////////////////////////////////////////////////////////////
my php file
//////////////////////////////////////////////////////////////////////////////////

<!


DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">


<


html><head><metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1">


<


title>Charts</title><scriptsrc="SpryAssets/SpryTabbedPanels.js"type="text/javascript"></script><linkhref="SpryAssets/SpryTabbedPanels.css"rel="stylesheet"type="text/css" />
<linkrel="stylesheet"type


="text/css"href="ext-all.css" />my grid 1my//////////////<linkrel="stylesheet"type="text/css"href="examples.css"
/><linkrel="stylesheet"type="text/css"href="forms.css" /><linkrel="stylesheet"type="text/css"href="example.css" /><scripttype="text/javascript"src="ext-base.js"></script><scripttype="text/javascript"src="ext-all.js"></script><scripttype="text/javascript"src="examples.js"></script>


<


scripttype="text/javascript"src="chart-series.js"></script>
<scripttype="text/javascript"src="db-gridtwo.js"></script><scripttype="text/javascript"src="reggridedit.js"></script><scripttype="text/javascript"src="db-grid.js"></script>


</


head>


<


body><divid="TabbedPanels1"class="TabbedPanels">
<ulclass="TabbedPanelsTabGroup">
<liclass="TabbedPanelsTab"tabindex="0">License Management</li>
<liclass="TabbedPanelsTab"tabindex="0">User Management</li>
</ul>
<divclass="TabbedPanelsContentGroup" >


<!-- -->


<divclass="TabbedPanelsContent"><divid='grid'></div></div>
<divclass="TabbedPanelsContent"><divid='form-ct'></div><divid='db-grid'></div></div>


</


div><scripttype="text/javascript">


var


TabbedPanels1 =new Spry.Widget.TabbedPanels("TabbedPanels1");


</


script></body></html>
////////////////////////////////////////

my 1st js file is
////////////////////////////

Ext.onReady(function(){
// create the data store
var store = new Ext.data.JsonStore({url: 'datagrid.php',fields: [{name: 'id', type: 'int'},'name', 'username', 'password','email']});
// load data from the url ( data.php )
store.load();var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();// create the Grid
var grid = new Ext.grid.GridPanel({selModel : checkBoxSelMod,store: store,columns: [{id:'id',header: 'ID', width: 30, sortable: true, dataIndex: 'id'},{header: 'Name', width: 100, sortable: true, dataIndex: 'name'},{header: 'Username', width: 100, sortable: true, dataIndex: 'username'},{header: 'EmailID', width: 100, sortable: true, dataIndex: 'email'},{header: 'Password', width: 100, sortable: true, dataIndex: 'password'},
// {
// xtype : 'booleancolumn',header : 'Active',dataIndex : 'active', align : 'center',width : 50,trueText : 'Yes',falseText : 'No',
// editor : {
// xtype : 'checkbox'
// },
// }
checkBoxSelMod],border : true,autoScroll:true,fitToFrame:true,autoHeight: false,autoWidth: false,layout: 'fit',height:300,width:500,});
// render grid
grid.render('db-grid')
});

sreenath886
7 Dec 2011, 8:35 AM
my 1st js file is
///////////////////////////////////////

Ext.onReady(function(){
// create the data store
var store = new Ext.data.JsonStore({url: 'datagrid.php',fields: [{name: 'id', type: 'int'},'name', 'username', 'password','email']});
// load data from the url ( data.php )
store.load();var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();// create the Grid
var grid = new Ext.grid.GridPanel({selModel : checkBoxSelMod,store: store,columns: [{id:'id',header: 'ID', width: 30, sortable: true, dataIndex: 'id'},{header: 'Name', width: 100, sortable: true, dataIndex: 'name'},{header: 'Username', width: 100, sortable: true, dataIndex: 'username'},{header: 'EmailID', width: 100, sortable: true, dataIndex: 'email'},{header: 'Password', width: 100, sortable: true, dataIndex: 'password'},
// {
// xtype : 'booleancolumn',header : 'Active',dataIndex : 'active', align : 'center',width : 50,trueText : 'Yes',falseText : 'No',
// editor : {
// xtype : 'checkbox'
// },
// }
checkBoxSelMod],border : true,autoScroll:true,fitToFrame:true,autoHeight: false,autoWidth: false,layout: 'fit',height:300,width:500,});
// render grid
grid.render('db-grid')
});