来自 前端技术 2019-09-04 19:43 的文章
当前位置: 六合联盟网 > 前端技术 > 正文

Ext图表的动态变化,request批量提交表单

依赖公司的陈设性,要落到实处四个自定义的查询组件,个中满含了自定义图表,基本须要是:

介绍一下批量交到grid中多少的难点

 

js文件中的提交方法如下:

1、  图表能够自定义,定义达成后保存到数据库中

listeners: {
click: function btnClick(button) {
var win = button.up('window');
var form = win.down("form");
var loadMarsk = new Ext.LoadMask(win, {//元素、DOM节点或id, {
msg: '正在实践,请稍候...',
removeMask: true// 达成后移除
});
loadMarsk.show();
var grid = form.down("grid");
var store = grid.getStore();
//
//var store = win.down("grid").getStore();
var m = store.getRange(0, store.getTotalCount()); //store.getModifiedRecords().slice(0);
var jsonArray = [];
Ext.each(m, function (item) {
jsonArray.push(item.data);
});
Ext.Ajax.request({
method: 'POST',
url: '/FoolProof/Savelist',
success: function (response) {
var o = Ext.decode(response.responseText.toString());
var center_store = Ext.ComponentQuery.query("Ali_FoolProofCenterList")[0].getStore();
center_store.loadPage(1);
console.log(o);
Ext.Msg.alert('提示', o.data.message);
loadMarsk.hide();
},
failure: function () {
Ext.Msg.alert("错误", "与后台联系的时候出了难题。");
loadMarsk.hide();
},
params: 'data=' + encodeURIComponent(Ext.encode(jsonArray))
});
win.close();
}

 

}

controller中的方法如下:

public JsonResult Savelist(string data)
{
return this.ReturnAjaxResultJson(() =>
{

try
{
string list = HttpUtility.UrlDecode(data);
if (list.StartsWith("[") == false)
{
list = "[" + list;
}
if (list.EndsWith("]") == false)
{
list = list + "]";
}
List<FoolProofCenter> instanceList = JsonConvert.DeserializeObject<List<FoolProofCenter>>(list);
int result = nService.Savelist(instanceList, CurrentUser.USER_ID);
if (result > 0)
{
return SingleReturnObject.BuildSingleInfo(true, "保存成功!", null);
}
else
{
return SingleReturnObject.BuildSingleInfo(true, "保存战败!", null);
}
}
catch (Exception e)
{
return SingleReturnObject.BuildSingleInfo(false, e.Message, null);
}
});
}

--------------向grid中插入l不经常数据--------------------------------

---------------查找记录是不是留存,不设有插入store中-------------------
{
text: "Add",
action: "Add",
listeners: {
click: function (btn) {
var form = btn.up("form");
if (!form.isValid()) {
return;
}
var obj = form.getValues();
var fct_name = form.down("combo[name=FactoryCode]").getRawValue();
var line_name = form.down("combo[name=Line]").getRawValue();
var grid = form.down("grid");
var myStore = grid.getStore();
var pk_value = obj.FactoryCode + obj.Line + obj.GBMCode + obj.ApplyArticleCode + obj.ApplyLocation;
var existRecord = myStore.findRecord("pk", pk_value, 0, false, false, true);
//console.log(existRecord);
if (existRecord == null) {
var s = Ext.String.format(
'([{"FCT_CODE":"{0}", "LINE_CODE":"{1}", "GBM_CODE":"{2}", "FPRF_APLY_ART_CODE":"{3}", "APLY_LOC_CODE":"{4}", "RMK":"{5}","DEL_YN":"{6}", "USE_YN":"{7}", "FCT_NM":"{8}", "LINE_NM":"{9}","pk":"{10}"}])'
, obj.FactoryCode, obj.Line, obj.GBMCode, obj.ApplyArticleCode, obj.ApplyLocation, obj.Remark, "N", obj.ResultYN, fct_name, line_name,pk_value);
//console.log(s);
var record = eval(s);
myStore.insert(0, record);
myStore.sort();
grid.getView().refresh();
}

}
}
},

-------------grid中定义store---------------------------
xtype: "grid",
store: Ext.create('Ext.data.Store', {
fields: ["FCT_CODE", "LINE_CODE", "GBM_CODE", "FPRF_APLY_ART_CODE", "APLY_LOC_CODE", "RMK",
"DEL_YN", "USE_YN", "FCT_NM", "LINE_NM", "pk"],
data: {
'items': [
//{ 'FileName': '', "FilePath": "", "Result": "" }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}

2、  依照保存到数据库的图样定义正确的表现出图表,包含样式、轴、种类、查询条件、查询按键等。

}),

 

store: Ext.data.StoreManager.lookup('employeeStore'),

 

3、  数据源通过配备获取,再依据数据源,查询出多少(大概不在同一个数据库中)。

 

 

 

此处不关怀图表定义、数据出自和图纸表现时的查询条件与查询开关等,只关切如何用Ext正确表现自定义图表的一对。

 

透过查看ext文书档案、探究、尝试,知道Ext的图纸重要不外乎七个难题:图表自个儿(首借使样式)、轴、类别和store,并且轴、体系和store的装置要合作(主倘若字段要合营)。

 

 

 

当今得以初始创立图表了,创制图表从前要先创建出来轴、体系和store(未有种种):

 

创建轴:

 

[javascript]  

createAxes:function(axisRecords){  

    var axes = [];  

    var axis;  

    for(var idx = 0; idx<axisRecords.length;idx++)  

    {  

        var gridStr = axisRecords[idx].get('grid');  

        var grid  = gridStr==""?false:Ext.JSON.decode(gridStr);  

        var labelStr = axisRecords[idx].get('label');  

        var label = labelStr==''?"":Ext.JSON.decode(labelStr);  

        var axisField = axisRecords[idx].get('fields');  

        axis = {  

            type: axisRecords[idx].get('axisType'),  

            position: axisRecords[idx].get('position'),  

            fields: axisField,  

            title: axisRecords[idx].get('title'),  

            dashSize:axisRecords[idx].get('dashSize'),  

            label : label,  

            grid : grid  

        };  

        axes.push(axis);  

    }  

    return axes;  

}  

创建连串:

 

[javascript] 

createSeries:function(seriesRecords){  

    var series = [];  

    var ser, labelStr, label, tipStr, tips, sourceName, xfield;  

    var fField ;  

    for(var idx=0;idx<seriesRecords.length;idx++){  

        fField = seriesRecords[idx].get('yField');  

        labelStr = seriesRecords[idx].get('label');  

        label = labelStr==''?"":Ext.JSON.decode(labelStr);  

        tipStr = seriesRecords[idx].get('tips');  

        tips = tipStr==''?'':Ext.JSON.decode(tipStr);  

        sourceName = seriesRecords[idx].get('sourceName');  

        xfield = seriesRecords[idx].get('xField');  

        xfield = xfield==null ? '' : xfield.toUpperCase();  

        ser = {              

            type: seriesRecords[idx].get('seriesType'),  

            axis: seriesRecords[idx].get('axis'),  

            highlight: true,  

            title : sourceName,  

            tips : tips,  

            showMarkers:true,  

            markerConfig:{  

                color: '#F00'  

            },  

            fill:seriesRecords[idx].get('fill'),  

            showInLegend : seriesRecords[idx].get('showLegend'),  

            stacked: seriesRecords[idx].get('stacked'),  

            xField: xfield,  

            yField: fField,  

            angleField: fField  

        };  

        if(label)  

            ser.label = label;  

        series.push(ser);  

    }  

    return series;  

}  

由代码能够看到,各类轴或种类都是多少个json格式的指标,全体轴或体系就贰个数组。

 

创建store:

 

[javascript]  

createChartStore:function(){  

    var seriesRecords = Ext.getStore('ChartSeries').getRange();  

    var axisRecords = Ext.getStore('ChartAxes').getRange();  

    var fieldArr = [];  

    var idx, fields;  

    // 根据轴和类别获得要store应该饱含怎么样内容  

    for(idx = 0;idx<axisRecords.length;idx++){  

        fields = axisRecords[idx].get('fields');  

        if(fields != null)  

            fieldArr = Ext.Array.merge( fieldArr, fields.toUpperCase().split(','));  

    }  

    for(idx = 0;idx<seriesRecords.length;idx++){  

        fields = seriesRecords[idx].get('xField');  

        if(fields != null)  

            fieldArr = Ext.Array.merge( fieldArr,fields.toUpperCase().split(','));  

        fields = seriesRecords[idx].get('yField');  

        if(fields != null)  

            fieldArr = Ext.Array.merge( fieldArr,fields.toUpperCase().split(','));  

    }  

      

// 创建store  

    var store = Ext.create('Ext.data.Store', {  

        //pageSize :pageSize,  

        fields:fieldArr,  

        proxy: {  

            type : 'ajax',  

            url : '/hummer/application/controller/run/FindChartData.action',  

            reader  : {  

                type : 'json',  

                root : 'rows',  

                totalProperty : 'totalCount'  

            }  

        },  

        autoLoad : false  

        });  

        var pageNum = this.getOptionValue('每页数据条数');  

        //  加载前,获取页面参数值,配置的查询参数   

    store.on('beforeload', function (store, options) {  

        var conditionValues =  Ext.getCmp('conditionForm').getForm().getValues();  

        var constantValue = [currentUser,currentUnit,currentYearMonth, pageNum];  

        var params = {queryId:queryId,paramsValue:conditionValues,constantValue:constantValue};  

        Ext.apply(store.proxy.extraParams, params);  

    });  

  

    return store;  

}  

结余的主题材料就比较简单了,依据轴、体系和store把图纸组装一下就能够了:

 

[javascript] 

createChartPanel:function(btns){  

    var axisModels = Ext.getStore('ChartAxes').getRange();  

       var axes = this.createAxes(axisModels);  

       var mySeries = this.createSeries(Ext.getStore('ChartSeries').getRange());  

       var chartStyle = Ext.getStore("ChartStyle").getRange();  

         

       var pieXfield = '';  

       if(mySeries.length>=1 && mySeries[0]['type']=='pie'){  

        pieXfield = mySeries[0]['xField'];  

       }  

         

       var store = this.createChartStore(mySeries);  

       var seriesLegend = false;  

         

       var myLegend = chartStyle[0].get("legend") ;  

       for(var idx in mySeries){  

        seriesLegend = seriesLegend || (mySeries[idx]['showInLegend'] );  

    }  

    // 当未有出示地点或享有的队列都不出示图示时,不出示图示  

       if(myLegend == null || myLegend == 'false' || myLegend == false||myLegend=='{"position":""}' || (seriesLegend == false)){  

        myLegend = false;  

       }  

       else{  

        myLegend = (myLegend == null ||myLegend == 'null' || myLegend == '') ? {position: 'bottom'} : Ext.JSON.decode(myLegend.toLowerCase());  

        if(!myLegend['position'])  

            myLegend['position'] = 'bottom';  

       }  

       //排序的管理  

       var sortFields = [], sortField;  

       for(idx in axisModels){  

        fieldName = axisModels[idx].get('fields');  

        if(axisModels[idx].get('sortType')){ // 排序  

            for(var i in fieldName){  

                sortField = {};  

                sortField['property'] = fieldName[i];  

                sortField['direction'] = axisModels[idx].get('sortType');  

                sortFields.push(sortField);  

            }  

        }  

    }  

       store.sort(sortFields);  // 排序  

         

    var background = chartStyle[0].get("background");  

    // 边框的管理  

       var border = chartStyle[0].get("border");  

       var myStyle = chartStyle[0].get("style");  

       var myChart = Ext.create("Ext.chart.Chart",{  

           id: 'chartCmp',  

           width:Ext.Number.from(chartStyle[0].get("width")),  

           height:Ext.Number.from(chartStyle[0].get("height")),  

           xtype: 'chart',  

           //autoSize:true,  

           background : background,  

           border : border,   

           style: myStyle ,  

           //tpl:'图表标题',  

           legend: myLegend,  

           theme:chartStyle[0].get("theme"),  

           animate: chartStyle[0].get("animate"),  

           resizable : chartStyle[0].get("resizable"),  

           //shadow: true,  

           store: store,  

           axes: axes,  

           series: mySeries//,  

       });  

    return myChart;  

}  

到今后停止,叁个完整的动态图表已经创设完毕了,至于放到哪个地点呈现,就由你来定了。

 

 

 

通过那个自定义图表的创制,可以看看,Ext的目的基本都以布局格式,和json格式很像,也许说就是json格式,但这几个主题材料自身从没尖锐进去查看Ext的源码。

 

1、 图表能够自定义,定义实现后保存到数据库中...

本文由六合联盟网发布于前端技术,转载请注明出处:Ext图表的动态变化,request批量提交表单

关键词: