extjs实现实时数据显示

extjs实现实时数据显示

Ext.namespace('Ext.ux');
Ext.ux.EmRealtimeDisplayPanel = function(treeNode, panelId, config) {
    this.treeNode = treeNode;
    this.panelId = panelId;
    

    var temhum = new Ext.form.ComboBox({
        name : 'temhunm',
        fieldLabel : '状态',
        allowBlank : false,
        blankText : '请选择温湿度',
        editable : false,
        triggerAction : 'all',//all表示把下拉框列表框的列表值全部显示出来
        store : new Ext.data.ArrayStore({
            fields : [ 'name', 'value' ],
            data : [ [ '温度', '1' ], [ '湿度', '2' ] ]
        }),
        mode : 'local',
        displayField : 'name',
        valueField : 'value',
        width : 60
    });
    var storenode = new Ext.data.JsonStore({   //读配置文件
        autoLoad:true,   
        url : path+"/wenshi/getnode",   
        root : "options",   
        fields : [ {   
            name : 'name'  
        }]   
    });

    var node = new Ext.form.ComboBox({
        fieldLabel : '节点',
        allowBlank : false,
        blankText : '请选择节点',
        editable : false,
        triggerAction : 'all',
        store : storenode,
        mode : 'local',
        displayField : 'name',
        valueField : 'name',
        width : 60
    });
    
    var dataArr = new Array();
    var store = new Ext.data.ArrayStore({
            fields: ['data', 'time'],
            data: dataArr
    });
    

    
    var varNodeId = '';//节点的id值
    var taskStart = false;
    //定时器里面的参数配置
    var task = {
            run: function(){
                gridStore.load({
                    params: {
                    'nodeid' : varNodeId,
                    'tem'    :th
                    },
                    callback:function(r){
                       if(!(typeof(r[0])==='undefined')) {
                         dataArr.push([r[0].data.data, r[0].data.time]);
                         store.loadData(dataArr);
                       }
                    }
                });
            },
            interval: 3000
    };

    var gridStore= new Ext.data.JsonStore({
        fields:['time', 'data'],
        autoLoad:true,  
         baseParams : {
            'nodeid' : "",
            'tem'    :""
        },
        url :path+'/wenshi/getShishiData',   
        root : "data"
    });
    var panel1= new Ext.Panel({
        title: '实时曲线图显示',
        width: 700,
        height: 400,
        smooth: true,
        type: 'circle',
        items: {
            xtype: 'linechart',
            url: 'extjs3/resources/charts.swf',
            store: store,
            xField: 'time',
            yField: 'data',
            xAxis: new Ext.chart.CategoryAxis({
                title: '时间(秒)'//00 09:00 分钟 秒:毫秒
            }),
            yAxis: new Ext.chart.NumericAxis({
                title: '数值'
            })
        },
               tbar : [
                       {
                            xtype    : 'label',
                            text    : '请选择节点: '
                        },
                   node, {
                        xtype    : 'label',
                        text    : '请选择温湿度: '
                    },
                    temhum,
                {    
                    text    : '查询',
                    handler    : function(btn, event) {
                            var nodeid = node.getValue();
                            var tem = temhum.getValue();
                            if (nodeid == undefined || nodeid == ''||tem==''){
                                return;
                            } else {
                                dataArr = new Array();
                                varNodeId = nodeid;
                                th = tem;
                            //    alert(th);
                                if(!taskStart) {
                                    Ext.TaskMgr.start(task);//定时执行代码
                                    taskStart  =true;
                                }
                            }
                    }
                }]
    });
    Ext.ux.EmRealtimeDisplayPanel.superclass.constructor.call(this, {
        id : this.panelId,
        title : this.treeNode.text,
        layout        : 'fit',
        closable : true,
        preventBodyReset : true,
        items : [panel1]
    });

};
Ext.extend(Ext.ux.EmRealtimeDisplayPanel, Ext.Panel, {});

Ext.reg('emEmRealtimeDisplayPanel', Ext.ux.EmRealtimeDisplayPanel);

你可能感兴趣的:(extjs实现实时数据显示)