PDA

View Full Version : How to align data in view port properly.



MMKUMAR
26 Dec 2012, 9:12 AM
Team,
How to align data in to view port. I have several panels inside panel and unable to achive desired. I am using extjs 3.4
Following problem I am facing.
1) Border are over lapping and it is coming very thick. 2) Not able to set height and it is expanding upto whole page. 3) Grid and panel width should be reduced I have only three columns

code.

<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<style type="text/css">
.add24 {
background-image: url(images/fiber_Cable.jpg) !important;
}
</style>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>

<script type="text/javascript">
Ext.onReady(function() {
var baseParamsv = {
"pager":""
};

Ext.QuickTips.init();

var searchFormPanel = new Ext.FormPanel({
id: 'searchForm'
,region:'north'
,layout:'table'
,height:65
,layoutConfig: {columns: 2}
,defaults: {ctCls:'padding3'}
});
searchFormPanel.add({xtype: 'label', text:'Search User:'});
searchFormPanel.add({xtype: 'label', text: ''});
searchFormPanel.add({xtype: 'textfield', id: 'search1', name: 'search1', value: '',enableKeyEvents: true});
searchFormPanel.add({xtype: 'button', id: 'go', cls: 'spacing3', text: 'Go!', handler:function() {} });

var gridColumnModel = new Ext.grid.ColumnModel([
{ header: "checked",sortable:true, menuDisabled:true,dataIndex:'checked',width:20,renderer:checkBoxRenderer},
{ header: "username",sortable:true, menuDisabled:true, dataIndex:'username',width:40,renderer:UserNameRenderer},
{ header: "emailid",sortable:true, menuDisabled:true, dataIndex:'status',width:30, renderer:emailidRenderer}
]);
var store = new Ext.data.JsonStore({
baseParams:baseParamsv,
fields: [
{name:'checked'},
{name:'username'},
{name:'emailid'}
],
root:'data',
totalProperty: 'total',
url:'data.json',
id:'offlineDataStoreId'
});






var dataGrid = new Ext.grid.GridPanel({
colModel:gridColumnModel
,region:'center'
,store:store
,stripeRows:true
,viewConfig: { autoFill:true, emptyText : 'No data found to display', forceFit: true, scrollOffset: 2 }
,layout:'fit'
,listeners: {
render: function(){
var initParams = Ext.apply({},baseParamsv);
Ext.apply(initParams, {
start:0,
limit:10
});
this.store.load({params:initParams});
}
}
});



function checkBoxRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {
return '<input type=checkbox name="check_box" value="'+record.get('emailid')+'">';
}

function UserNameRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {
return val;
}

function emailidRenderer(val, meta, record, rowIndex, colIndex, offlineStore) {

return val;
}


var innerPanel = {
xtype: 'panel',
id: 'inner-panel',
layout: 'border',
region: 'center',
height:150,
items :[dataGrid]
};

var rightPanel = {
xtype: 'panel',
layout: 'border',
region: 'center',
items :[searchFormPanel,innerPanel]
};

var mainPanel = {
xtype: 'panel',
id: 'main-panel',
layout: 'border',
region: 'center',
height:150,
title:'Select Users',
items :[rightPanel]
};

var viewPort = new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items:[mainPanel],
renderTo:Ext.getBody()
});
viewPort.doLayout();


});


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

willigogs
26 Dec 2012, 12:26 PM
I'm really struggling to understand what you're trying to achieve.

I think in this instance, an image / diagram of what sort of layout you're trying to create would help us to help you...