ExtJs_GridWithProgressBarPager

最新推荐文章于 2017-03-14 10:58:19 发布

cenyebao

最新推荐文章于 2017-03-14 10:58:19 发布

阅读量766

点赞数

分类专栏： 23JS_ExtJs 文章标签： extjs header plugins stylesheet function float

本文链接：https://blog.csdn.net/cenyebao/article/details/6323437

版权

23JS_ExtJs 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

HTML设置为：

->head        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

        
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        
        <script type="text/javascript" src="../../ext-all.js"></script>

        <script type="text/javascript" src="../../examples/ux/ProgressBarPager.js"></script>//进度条
        <script type="text/javascript" src="../../examples/ux/PanelResizer.js"></script>//改变大小
        <script type="text/javascript" src="../../examples/ux/PagingMemoryProxy.js"></script>//数据解析
        <script type="text/javascript" src="gridWithProgressBarPager.js"></script>

->body <div id="grid-example"></div>

JS编写：

Ext.onReady(function() {
    //创建数据。
    var myData = [
        ['大唐集团',99.99,0.9,0.01,'9/1 12:00am']
    ];

    //change列的renderer渲染函数
    function change(value) {
        if(value > 0) {
            return '<span style="color:green;">' + value + '</span>';
        } else if(value < 0) {
            return '<span style = "color:red;">' + value + '</span>';
        }
        return value;
    };

    //pctChange列的renderer渲染函数
    function pctChange(value) {
        if(value > 0) {
            return '<span style = "color:green;">' + value + '%</span>';
        }else if(value < 0) {
            return '<span style = "color:red;">' + value + '%</span>';
        }
        return value;
    };

    //创建store。
    var store = new Ext.data.Store({
        proxy: new Ext.ux.data.PagingMemoryProxy(myData),
        remoteSort: true,
        sortInfo: {field: 'price', direction: 'ASC'},
        reader: new Ext.data.ArrayReader({
            fields: [
                {name: 'company'},
                {name: 'price', type: 'float'},
                {name: 'change' ,type: 'float'},
                {name: 'pctChange', type: 'float'},
                {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]
        })
    });

    //创建gridpanel。
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id: 'company',header: 'company',width: 160,sortable: true,dataIndex: 'company'},
            {header: 'Price', widhth: 75, sortable: true, renderer: 'usMoney',dataIndex: 'price'},
            {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: '% Change', width: 75, sortable: true, renderer: pctChange,dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 320,
        width: 600,
        frame: true,
        title: 'SlidingPager',
        plugins: new Ext.ux.PanelResizer({
            minHeight: 100
        }),
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            plugins: new Ext.ux.ProgressBarPager()
        })
    });

    grid.render('grid-example');
    store.load({params: {start: 0, limit: 10}});

});