Copy codeThe Code is as follows:
Ext. onReady (function (){
// Define the store
Var chartStore = new Ext. data. JsonStore ({
Root: 'root ',
Fields :[
{Name: 'ne ', type: 'string'}, // Network Element
{Name: 'confine ', type: 'int'}, // Threshold Value
{Name: 'Bill ', type: 'string'} // ticket count
],
SortInfo: {field: 'Bill ', direction: 'asc '}
});
// Test Data
Var obj = {
Root :[
{Ne: 'net meta', confine: 80, bill: 150 },
{Ne: 'net dollar 2', confine: 150, bill: 140 },
{Ne: 'net element 3', confine: 180, bill: 160 },
{Ne: 'net dollar 5', confine: 120, bill: 180 },
{Ne: 'net dollar 6', confine: 165, bill: 13 },
{Ne: 'net element 7', confine: 54, bill: 12 },
{Ne: 'net dollar 8', confine: 55, bill: 44 },
{Ne: 'net $ 9', confine: 33, bill: 113 },
{Ne: 'net dollar 10', confine: 122, bill: 77}
]
}
// Load data
ChartStore. loadData (obj );
// Pushlet callback function
Window. onData = function (event ){
// Alert (event. get ("data1 "));
Var obj1 = eval ('+ event. get ("data1") + ')');
// Obj = obj1;
// ChartStore. loadData (obj );
}
// System attribute definition column data model
Var cm = new Ext. grid. ColumnModel ([new Ext. grid. RowNumberer (),
{Header: 'net meta', dataIndex: 'ne '},
{Header: 'ticket qty ', 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: 'valid', dataIndex: 'conf '}
// {Header: 'operation', dataIndex: 'state', renderer: renderOperate}
]);
Var grid = new Ext. grid. EditorGridPanel ({
Title: 'ticket backlog monitoring statistics ',
Cm: cm,
Store: chartStore,
Sm: new Ext. grid. RowSelectionModel ({
SingleSelect: true
}),
StripeRows: true,
LoadMask: true,
ClicksToEdit: 2, // double-click trigger,
EnableColumnMove: false,
TrackMouseOver: false,
StripeRows: true,
Frame: true,
LoadMask :{
Msg: "loading data ....."
},
ViewConfig :{
ForceFit: true,
ColumnsText: 'Show column ',
Scroloffset: 25,
SortAscText: 'ascending url ',
SortDescText: 'descending Order'
},
AutoExpandColumn: 'desc ',
Bbar: new Ext. PagingToolbar ({
PageSize: 24,
Store: chartStore,
DisplayInfo: true,
DisplayMsg: 'display records from {0} to {1}, total records from {2 ',
EmptyMsg: 'No records'
}),
ViewConfig: {forceFit: true, sortAscText: 'forward sequence', sortDescText: 'descending sequence ',
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: 'ticket backlog chart ',
Xtype: 'linechart ',
Url: AIUPP_ROOT + '/css/resources/charts.swf ',
Store: chartStore,
// XField: 'label ',
// YField: 'armcount ',
// Define the tip content
TipRenderer: function (chart, record ){
// Alert (record. get ('starttime '));
Var ne = record. get ('ne ');
Var str = String. format ('network element: {0} \ n ticket quantity: {1} \ n threshold: {2} ', ne, record. get ('bill '), record. get ('conf '))
Return str;
},
// Define two charts. One is a column chart and the other is a line chart.
Series :[{
Type: 'column ',
DisplayName: 'number of tickets ',
Id: "billId ",
XField: 'ne ',
YField: 'Bill ',
Style :{
Color: 0x99BBE8,
Size: 20
}
},{
Type: 'column ',
DisplayName: 'threshold ',
XField: 'ne ',
YField: 'conf ',
Style :{
Color: '# ff0000 ',
Size: 20
}
}],
Listeners :{
"Show": function (){
Var c = linechart. series;
// Alert (c [1]. store );
// C [1]. style. color = '#00ff00 ';
}
},
// Define the chart Style
ChartStyle :{
Legend :{
Display: "top"
},
XAxis :{
Color: 0x69aBc8,
MajorTicks: {color: 0x69aBc8, length: 4 },
MinorTicks: {color: 0x69aBc8, length: 2 },
MajorGridLines: {size: 1, color: 0 xeeeeee}
},
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]
});
// Interval
Var interval = new Ext. form. TextField ({
Name: 'interval ',
FieldLabel: 'interval time ',
Id: "searchInterval"
});
// Grouping method
Var groupType = new Ext. form. RadioGroup ({
Name: 'grouptype ',
FieldLabel: 'grouping method ',
Id: "searchGroupType ",
Items :[
New Ext. form. Radio ({
Name: "groupType ",
InputValue: "1 ",
BoxLabel: "region"
}),
New Ext. form. Radio ({
Name: "groupType ",
InputValue: "2 ",
BoxLabel: "region + network element"
}),
New Ext. form. Radio ({
Name: "groupType ",
InputValue: "3 ",
BoxLabel: "region + network element + business code"
})
]
});
// Start button
Var startBtn = new Ext. Button ({
Text: 'start ',
MinWidth: 80,
Handler: function (){
// Store. load ();
}
});
// Stop button
Var stopBtn = new Ext. Button ({
Text: 'stop ',
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: ': monitoring condition', autoHeight: true, margins: '5 5 10 5', collapsible: true, items: [searchPanel]},
{Region: 'center', layout: 'fit', margins: '5 5 5 5', items: [contentPanel]}
]
});
Vp. show ();
});