Results 1 to 2 of 2

Thread: How to align data in view port properly.

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default How to align data in view port properly.

    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'
    ,storetore
    ,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>

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
      0  

    Default

    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...

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •