IT虾米网

FitLayout详解

itxm 2018年07月11日 编程语言 280 0
<HTML>  
<HEAD>  
<TITLE>布局</TITLE>  
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />  
<script type="text/javascript" src="Ext/ext-base.js"></script>  
<script type="text/javascript" src="Ext/ext-all.js"></script>  
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>  
</HEAD>  
<script type="text/javascript">  
    Ext.onReady(function(){ 
        var store = new Ext.data.SimpleStore({ 
            fields: ['id', 'name', 'desc'], 
            data: [ 
                ['1', 'name1', 'desc1'], 
                ['2', 'name2', 'desc2'], 
                ['3', 'name3', 'desc3'], 
                ['4', 'name4', 'desc4'], 
                ['5', 'name5', 'desc5'], 
                ['6', 'name6', 'desc6'], 
                ['7', 'name7', 'desc7'], 
                ['8', 'name8', 'desc8'], 
                ['9', 'name9', 'desc9'], 
                ['10', 'name10', 'desc10'] 
            ] 
        }); 
        var grid = new Ext.grid.GridPanel({ 
            title: 'grid', 
            viewConfig: {forceFit: true}, 
            store: store, 
            columns: [ 
                {header:'id', dataIndex: 'id'}, 
                {header:'名称', dataIndex:'name'}, 
                {header:'描述', dataIndex:'desc'} 
            ], 
            tbar: new Ext.Toolbar(['添加','修改','删除']), 
            bbar: new Ext.PagingToolbar({ 
                pageSize: 15, 
                store: store 
            }) 
        }); 
        //grid.store.load(); 
 
        var viewport = new Ext.Viewport({ 
            layout: 'fit', 
            items: [grid] 
        }); 
    }); 
</script>  
<BODY>  
    <script type="text/javascript" src="Ext/examples/shared/examples.js"></script> 
</BODY>  
</HTML>

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

ExtJS BorderLayout详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。