1

团队，

如何将数据对齐到视口。我有两个面板，无法达到预期的效果。我正在使用 extjs 3.4

我面临以下问题：

  1. 边框重叠，非常厚。无法从顶部和左侧留下空间。
  2. 无法设置高度，它正在扩展到整个页面。
  3. 网格和面板宽度应该减少我只有三列

代码。

<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'
            ,title:'Heading'
            ,layout:'table'
            ,bodyStyle:'padding:10px;'
            ,height:100
            ,width:200
            ,padding: '5 5 5 5' 
            ,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:'emailid',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',
        title:'Heading',
        width:200,
        bodyStyle:'padding:10px;',
        padding: '5 5 5 5' ,
        items :[dataGrid]
        };


         var viewPort = new Ext.Viewport({
            layout: 'border',
            title: 'Ext Layout Browser',
            items:[searchFormPanel,innerPanel],
            bodyStyle:'padding:10px;margin-top:10px',
            renderTo:Ext.getBody()
        });
        viewPort.doLayout();


    });


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

1 回答 1

0

如果您不想使用整个页面，只需使用面板而不是 Viewoprt：

var viewPort = new Ext.Panel({
    layout: 'border',
    width: 400,
    height: 300,
    title: 'Ext Layout Browser',
    items:[searchFormPanel,innerPanel],
    bodyStyle:'padding:10px;margin-top:10px',
    renderTo:Ext.getBody()
});

在这里你可以看到结果：http: //jsfiddle.net/3CabN/6/

于 2012-12-27T01:23:13.363 回答