Extjs4 Grid分页与自动刷新

1.布局组合
var viewport = Ext.create('Ext.Viewport', {
            id: 'border-example',
            layout: 'border',
            items: [
            Ext.create('Ext.Component', {
                region: 'north',
                height: 60, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<p><img src="../image/north.png"></img></p>'
                }
            }), {
                // lazily created panel (xtype:'panel' is default)
                region: 'south',
                contentEl: 'south',
                split: true,
                height: 100,
                minSize: 100,
                maxSize: 200,
                collapsible:true,
                collapsed: true,
                title: 'South',
                margins: '0 0 0 0'
            },tabs]
}]
2.创建可增加的tabs
    //中间部分
    var tabs= Ext.create('Ext.tab.Panel', {
    id:'centerpanel',
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [{
                    contentEl: 'center1',
title: '传感中心',
                    closable: true,
                    autoScroll: true
}, {
                    contentEl: 'center2',
                    title: '公司简介',
                    autoScroll: true
                }]  
});
3.在tabs上增加子项
function addTab (closable,s) {
       var flags="#Tab"+index;//注意#号部分
       var user = tabs.child(flags);
           if(user){//去除重复加载
       user.tab.show();  
tabs.setActiveTab(user);
      }


else if(index==32){//天气灾害预警
tabs.add({
            title: s,
            iconCls: 'tabs',
            itemId:'#Tab' + index,
            html:'<iframe src="http://www.baidu.com/" width="100%" height="100%"></iframe>',
closable: !!closable  
        }).show();
});
4.数据加载
var store = Ext.create('Ext.data.Store', {
        pageSize: 10,
        model: 'ForumThread',
        remoteSort: true,
        proxy: new Ext.data.HttpProxy({
            type: 'jsonp',
            url:'order/exceptionAction',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true
        }),
        sorters: [{
            property: 'deviceno',
            direction: 'DESC'
        }]
    });
先写到这里 慢慢完善

你可能感兴趣的:(extjs4)