澳门新莆京手机网站-新蒲京娱乐场 > 计算机 > Extjs4.0.7 tree 布局读取json文件(在框架viewport中)

Extjs4.0.7 tree 布局读取json文件(在框架viewport中)

写在前头,版本库:Ext JS Library 3.3.1 做图表的时候纵坐标非常多值都是均等的,无意中发觉上边包车型地铁消除方法,本人测验是足以了,写出来以备后查,以便外人查看。其余版本没测量试验过。风乐趣的心上人能够本身测量检验。 复制代码 代码如下: var chartStore;//图表数据 Ext.onReady{ //使用当前服务器的文书,若无那句话,暗中同意会去adobe的站点取 Ext.chart.Chart.CHART_URL = 'extjs/resources/charts.swf'; var json_reader = new Ext.data.JsonReader( { idProperty : "pointName", root : 'rows', totalProperty : "results", fields : [ { name : 'pointName' }, { name : 'faultCount', type : "int" }] }State of Qatar; //从后台取多少 chartStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : 'loadColumnChart.do', method : 'POST' }卡塔尔国, reader : json_reader }卡塔尔国; chartStore.reload(卡塔尔(قطر‎; //柱状图面板 var columnchartPanel = new Ext.Panel({ border :false, autoScroll : true, //title : '设备测点故障记录总括图', frame : true, renderTo : document.body, width: 800, height: 240, layout : 'fit', items : { xtype : 'columnchart', // 类型 store : chartStore, xField : 'pointName', // X轴取值 yField : 'faultCount', // Y轴取值 yAxis : new Ext.chart.NumericAxis({ displayName : 'faultCount' //labelRenderer : Ext.util.Format.numberRenderer//关键难题是那句,作者把那句注释了就如常了 }卡塔尔(قطر‎, tipRenderer : function { return record.data.pointName + '的故障次数为:' + Ext.util.Format.number(record.data.faultCount, '0,0'State of Qatar; }, series : [ {//列 type : 'column', //类型能够改变line displayName : 'faultCount', yField : 'faultCount', style : { color : 0x99BBE8 } }] } }卡塔尔; //柱状图面板 var leftPanel = new Ext.Panel({ title: '柱状图', region:'west', margins: '5 0 0 0', cmargins: '5 5 0 0', width: 850, minSize: 700, maxSize: 850, autoScroll:true,//设为true则内容溢出的时候爆发滚动条,默以为false collapsible: true,//允许收缩 items: columnchartPanel }卡塔尔国; }卡塔尔(قطر‎; 1.减轻前: 2.缓慢解决后:

Ext.onReady(function(){
//定义store
var chartStore = new Ext.data.JsonStore({
root:'root',
fields:[
{name:'ne',type:'string'},//网元
{name:'confine',type:'int'},//阀值
{name:'bill',type:'string'}//工单数
],
sortInfo:{field: 'bill', direction: 'ASC'}
});
//测验数据
var obj={
root:[
{ne:'网元一',confine:80,bill:150},
{ne:'网元二',confine:150,bill:140},
{ne:'网元三',confine:180,bill:160},
{ne:'网元五',confine:120,bill:180},
{ne:'网元六',confine:165,bill:13},
{ne:'网元七',confine:54,bill:12},
{ne:'网元八',confine:55,bill:44},
{ne:'网元九',confine:33,bill:113},
{ne:'网元十',confine:122,bill:77}
]
}
//载入数据
chartStore.loadData(obj);
//pushlet 回调函数
window.onData = function (event) {
//alert(event.get("data1"));
var obj1 = eval('('+event.get("data1")+')');
//obj=obj1;
//chartStore.loadData(obj);
}
// 系统性子定义列数据模型
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{header:'网元',dataIndex:'ne'},
{header:'工单量',dataIndex:'bill',renderer:function(value, cellMeta, record, rowIndex, columnIndex, store){
var confine = record.data['confine'];
/*if(value>=confine){
//cellMeta.css='x-grid-back-red';
var row = cm.findColumnIndex(rowIndex);
row.css='x-grid-back-red';
}*/
return value;
}},
{header:'阀值',dataIndex:'confine'}
//{header:'操作',dataIndex:'state',renderer:renderOperate}
]);
var grid = new Ext.grid.EditorGridPanel({
title:'工单积压监察和控制总括',
cm:cm,
store:chartStore,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
stripeRows:true,
loadMask:true,
clicksTo艾德it : 2,//双击触发,
enableColumnMove : false,
trackMouseOver : false,
stripeRows:true,
frame:true,
loadMask:{
msg:"数据加载中....."
},
viewConfig:{
forceFit:true,
columnsText:'显示列',
scrollOffset:25,
sortAscText:'升序',
sortDescText:'降序'
},
autoExpandColumn:'desc',
bbar:new Ext.PagingToolbar({
pageSize:24,
store:chartStore,
displayInfo:true,
displayMsg:'显示第 {0} 条到第 {1} 条记录,总共 {2} 条',
emptyMsg:'无记录'
}),
viewConfig:{forceFit:true,sortAscText:'正序',sortDescText:'降序',
getRowClass : function(record,rowIndex,rowParams,store){
if(record.data.bill>=record.data.confine){
return 'x-grid-back-red';
}
}
}
});
var linechart = new Ext.chart.LineChart({
title:'工单积压图表',
xtype:'linechart',
url: AIUPP_ROOT+'/css/resources/charts.swf',
store:chartStore,
//xField: 'label',
//yField:'alarmCount',
//定义tip内容
tipRenderer : function(chart, record){
//alert(record.get('startTime'));
var ne = record.get('ne');
var str = String.format('网元:{0}n工单量:{1}n阀值:{2}',ne,record.get('bill'),record.get('confine'))
return str;
},
//定义四个图表,三个是柱状图,二个是折线图
series: [{
type: 'column',
displayName: '工单个数',
id:"billId",
xField: 'ne',
yField: 'bill',
style: {
color:0x99BBE8,
size: 20
}
},{
type:'column',
displayName: '阀值',
xField: 'ne',
yField: 'confine',
style: {
color: '#ff0000',
size: 20
}
}],
listeners:{
"show":function(){
var c = linechart.series;
//alert(c[1].store);
//c[1].style.color='#00ff00';
}
},
//定义图表样式
chartStyle: {
legend:{
display: "top"
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length:4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines:{size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
}
});
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
closable:false,
split : false,
collapsible : false,
layoutOnTabChange:true,
items:[linechart,grid]
});
// 间距时间
var interval = new Ext.form.TextField({
name:'interval',
田野同志Label:'间距时间',
id:"searchInterval"
});
// 分组织承办法
var groupType = new Ext.form.RadioGroup({
name:'groupType',
田野先生Label:'分组格局',
id:"searchGroupType",
items:[
new Ext.form.Radio({
name:"groupType",
inputValue:"1",
boxLabel:"地区"
}),
new Ext.form.Radio({
name:"groupType",
inputValue:"2",
boxLabel:"地区+网元"
}),
new Ext.form.Radio({
name:"groupType",
inputValue:"3",
boxLabel:"地区+网元+业务代码"
})
]
});
// 开首按键
var startBtn = new Ext.Button({
text:'开始',
minWidth:80,
handler:function(){
//store.load();
}
});
// 结束按键
var stopBtn = new Ext.Button({
text:'停止',
minWidth:80,
handler:function(){
//store.load();
}
});
var searchPanel = new Ext.form.FormPanel({
labelAlign:'left',
labelWidth:60,
frame:true,
layout:'column',
items:[
{columnWidth:.28,layout:'form',items:[interval]},
{columnWidth:.38,layout:'form',items:[groupType]},
{columnWidth:.10,layout:'form',items:[startBtn]},
{columnWidth:.16,layout:'form',items:[stopBtn]}
]
});
var vp = new Ext.Viewport({
layout:'border',
border:false,
hideBorders:true,
bufferResize:100,
items:[
//{region:'north',title:'::监控条件',autoHeight:true,margins:'5 5 10 5',collapsible:true,items:[searchPanel]},
{region:'center',layout:'fit',margins:'5 5 5 5',items:[contentPanel]}
]
});
vp.show();
});

//------------------------------------------程序最先-------------------------------------
Ext.onReady(function () {
    //定义树形组件
    //Ext.Msg.alert('提醒新闻', '学习EXTJS'卡塔尔;

var west=new Ext.Panel({
                        collapsible:true,   //自动降低开关
                        split: true,
                        border:false,
                        width:225,
                        layout:"accordion",
                        //extraCls:"roomtypegridbbar",  //增添动漫效果
                        layoutConfig: {
                               animate: true
                         },
                        region:"west",
                        title:'威威系统',
                        items:[{
                            title:"<b>临蓐体系模块</b>",
                            autoScroll:true,
                            items:[treepanel2],
                            iconCls:"hotelmanageicon"
                        },{
                            title:"<b>人事薪金系统模块</b>",
                            autoScroll:true,
                            iconCls:"hotelmanageicon"
                            //items:[treenode]
                        },{
                            title:"<b>OA系统模块</b>",
                            autoScroll:true,
                            iconCls:"hotelmanageicon"
                            //items:[treenode]
                        },{
                            iconCls:"gonggao",
                            title:"<b><span style='color:red';>Hotel Notice</span></b>"
                            //items:[publishinfosgrid]
                        }]
    });

文件 {children:[ {id:01,text:a01,children:[ {id:01-01,text:a01-01,leaf:true}, {id:01-02,text:a01-02,children:[ {id:01-02-01,text:b01-02-01,leaf:true}, {id:01-02-02,text...

var south=new Ext.Panel({
                        title: 'south',
                        region: 'south',
                        split: false,
                        border: true,
                        height:80,
                        collapsible: true
    });

Copyright © 2015-2019 http://www.carrefourstation.com. 澳门新莆京手机网站-新蒲京娱乐场有限公司 版权所有