Untitled
By: a guest | Mar 18th, 2010 | Syntax: JavaScript | Size: 12.36 KB | Hits: 47 | Expires: Never
- /**
- * User Interface Engine for IPMS. Used for UI objects definition purpose.
- *
- * @author Aprian Diaz Novandi (aprian.diaz.novandi@gmail.com)
- * @version 1.0
- * @since March 14th, 2010
- *
- */
- //global variables
- var baseUrl = '';
- IpmsUIEngine = function() {
- /*
- * -----------------
- * Basic properties
- * -----------------
- */
- //this.baseUrl = '';
- /*
- * ---------------------
- * Property definitions
- * ---------------------
- */
- this.loginForm = new Ext.FormPanel({
- id: 'formpanel',
- labelWidth: 75,
- url: this.baseUrl,
- frame: true,
- title: 'IPMS » Login Form',
- bodyStyle:'padding:5px 5px 0',
- width: '100%',
- method: 'POST',
- defaults: {
- width: '95%'
- },
- defaultType: 'textfield',
- items: [{
- fieldLabel: 'Username',
- name: 'username',
- id: 'username',
- allowBlank: false
- //enableKeyEvents: true
- },{
- fieldLabel: 'Password',
- name: 'password',
- id: 'password',
- xtype: 'textfield',
- inputType: 'password',
- allowBlank: false,
- enableKeyEvents: true,
- //event listeners
- listeners: {
- specialkey: function(field, el) {
- /*
- * This is to add enter key press event handler for users
- * after typing their username and password.
- * ExtJS doesn't provide this behavior by default.
- */
- if(el.getKey() == Ext.EventObject.ENTER) {
- Ext.getCmp('submitButton').fireEvent('click');
- }
- }
- }
- }],
- buttons: [{
- text: '<strong>Login</strong>',
- id: 'submitButton',
- formBind: true,
- listeners: {
- click: function() {
- var loginUrl = baseUrl + '/users/login';
- Ext.getCmp('formpanel').getForm().submit({
- waitMsg: 'Processing...',
- url: loginUrl,
- success: function(form, action) {
- if(action.result.success == "true") {
- window.location = action.result.url;
- } else {
- Ext.Msg.alert('Failure', action.result.msg);
- }
- },
- failure: function(form, action) {
- switch (action.failureType) {
- case Ext.form.Action.CLIENT_INVALID:
- Ext.Msg.alert('Failure',
- 'Form fields may not be submitted with invalid values');
- break;
- case Ext.form.Action.CONNECT_FAILURE:
- Ext.Msg.alert('Failure', 'Ajax communication failed ' + loginUrl);
- break;
- case Ext.form.Action.SERVER_INVALID:
- Ext.Msg.alert('Failure', action.result.msg);
- break;
- default:
- Ext.Msg.alert('Failure', action.result.msg);
- break;
- }
- }
- });
- }
- }
- }, {
- text: 'Clear',
- id: 'resetButton',
- handler: function() {
- Ext.getCmp('formpanel').getForm().reset();
- }
- }]
- });
- this.logoutButton = new Ext.Button({
- text: 'Logout',
- listeners: {
- click: function() {
- Ext.Msg.show({
- title: 'Logout confirmation',
- msg: 'Are you sure to log out from application?',
- buttons: Ext.Msg.YESNO,
- fn: function(buttonId) {
- if(buttonId == 'yes') {
- Ext.Ajax.request({
- url: baseUrl + '/users/logout',
- success: function(response) {
- var data = Ext.util.JSON.decode(response.responseText);
- var success = data.success;
- var url = data.url;
- if(success == 'true') {
- window.location = url;
- } else {
- Ext.Msg.alert('Failure', 'Failed to log out');
- }
- },
- failure: function() {
- Ext.Msg.alert('Failure', 'Ajax communication failed');
- }
- });
- }
- }
- });
- }
- }
- });
- this.tespanel = new Ext.FormPanel({
- id: 'formpanel2',
- labelWidth: 75,
- url: this.baseUrl,
- frame: true,
- title: 'tes panel',
- bodyStyle:'padding:5px 5px 0',
- width: '100%',
- });
- ///////////GRID ALARM///////////////
- var doWinPopUp = function(rec){
- var nid = rec.get('node_id');
- var nname = rec.get('node_name');
- var dvc = rec.get('device_name');
- var almName = rec.get('alarm_name');
- var almParam = rec.get('alarm_parameter');
- var almVal = rec.get('value');
- var almValIdeal = rec.get('ideal_value');
- var almUnit = rec.get('unit');
- var almPrio = rec.get('priority');
- var numTicket = rec.get('num_tickets');
- var fieldSet = new Ext.form.FieldSet({
- id : "fldSet"
- ,title : "Info"
- ,defaultType : "textfield"
- ,defaults : {
- readOnly : true
- }
- ,items : [{
- fieldLabel : "Node ID"
- ,name : "fldNodeId"
- ,width : 200
- ,value : nid
- },{
- fieldLabel : "Node"
- ,name : "fldNode"
- ,width : 200
- ,value : nname
- },{
- fieldLabel : "Alarm Name"
- ,name : "fldAlarmName"
- ,width : 200
- ,value : almName
- },{
- fieldLabel : "Alarm Parameter"
- ,name : "fldAlarmParameter"
- ,width : 200
- ,value : almParam
- },{
- fieldLabel : "Device"
- ,name : "fldDevice"
- ,width : 200
- ,value : dvc
- },{
- fieldLabel : "Value"
- ,name : "fldValue"
- ,width : 50
- ,value : almVal
- },{
- fieldLabel : "Priority"
- ,name : "fldPriority"
- ,width : 50
- ,value : almPrio
- },{
- fieldLabel : "# tickets"
- ,name : "fieldNumTickets"
- ,width : 50
- ,value : numTicket
- }]
- });
- var formPanel = new Ext.form.FormPanel({
- id : "frmPanel"
- ,title : "Selected Event"
- ,frame : true
- ,labelAlign : 'right'
- ,waitMsgTarget : true
- ,items : fieldSet
- ,buttonAlign : "center"
- });
- var winPop = new Ext.Window({
- id : "winpop"
- ,height : 400
- ,width : 400
- ,layout : "fit"
- ,plain : true
- ,border : false
- ,resizable : false
- ,draggable : true
- ,closable : true
- ,closeAction : "close"
- ,modal : true
- ,items : formPanel
- });
- winPop.show();
- }
- this.dataRec = Ext.data.Record.create([
- {name: 'id'}
- ,{name: 'tstamp', type: 'date'}
- ,{name: 'node_id'}
- ,{name: 'node_name'}
- ,{name: 'alarm_name'}
- ,{name: 'alarm_parameter'}
- ,{name: 'device_name'}
- ,{name: 'value', type: 'float'}
- ,{name: 'ideal_value', type: 'float'}
- ,{name: 'unit'}
- ,{name: 'priority'}
- ,{name: 'hidden'}
- ,{name: 'num_tickets'}
- ]);
- this.dataReader = new Ext.data.XmlReader({
- record : "event"
- ,idProperty : "id"
- }
- ,this.dataRec
- );
- this.dataStore = new Ext.data.Store({
- url : baseUrl + '/data/events'
- ,reader : this.dataReader
- });
- this.columnModel = new Ext.grid.ColumnModel(
- [{
- header : "Id"
- ,dataIndex : "id"
- ,width : 60
- ,hidden : true
- },{
- header : "Time"
- ,dataIndex : "tstamp"
- ,width : 60
- ,sortable : true
- },{
- header : "Node Id"
- ,dataIndex : "node_id"
- ,width : 60
- ,hidden : true
- },{
- header : "Node"
- ,dataIndex : "node_name"
- ,width : 70
- },{
- header : "Alarm Name"
- ,dataIndex : "alarm_name"
- ,width : 180
- ,sortable : true
- },{
- header : "Alarm Parameter"
- ,dataIndex : "alarm_parameter"
- ,width : 180
- ,sortable : true
- ,hidden : true
- },{
- header : "Device"
- ,dataIndex : "device_name"
- ,width : 100
- ,sortable : true
- },{
- header : "Value"
- ,dataIndex : "value"
- ,width : 50
- ,readonly : true
- },{
- header : "Ideal Value"
- ,dataIndex : "ideal_value"
- ,width : 50
- ,readOnly : true
- },{
- header : "Unit"
- ,dataIndex : "unit"
- ,width : 50
- ,readOnly : true
- },{
- header : "Priority"
- ,dataIndex : "priority"
- ,width : 30
- ,sortable : true
- ,hidden : true
- },{
- header : "Hidden"
- ,dataIndex : "hidden"
- ,width : 30
- ,hidden : true
- },{
- header : "Num tickets"
- ,dataIndex : "num_tickets"
- ,width : 30
- ,hidden : true
- }]
- );
- this.selectionModel = new Ext.grid.RowSelectionModel({
- singleSelect : true
- });
- this.pagingToolbar = new Ext.PagingToolbar({
- pageSize : 25
- ,store : this.dataStore
- ,displayInfo : true
- ,displayMsg : 'Displaying events {0} - {1} of {2}'
- ,emptyMsg : "No Alarms to display"
- });
- var doRowClick = function(thisGrid, rowIndex){
- var rec = thisGrid.getStore().getAt(rowIndex);
- doWinPopUp(rec);
- }
- var gridView = new Ext.grid.GridView({
- //forceFit: true,
- getRowClass : function (row, index) {
- var cls = '';
- var data = row.data;
- var d = data.priority.toLowerCase();
- switch (data.priority) {
- case 'minor' :
- cls = 'yellow-row'
- break;
- case 'release' :
- cls = 'green-row'
- break;
- case 'major' :
- cls = 'blue-row'
- break;
- case 'critical' :
- cls = 'red-row'
- break;
- }
- return cls;
- }
- });
- this.gridAlarm = new Ext.grid.GridPanel({
- store : this.dataStore
- ,cm : this.columnModel
- ,sm : this.selectionModel
- ,title : "Event - Alarm"
- ,width : 600
- ,height : 400
- ,stripeRows : true
- ,loadMask : true
- ,bbar : this.pagingToolbar
- ,view : gridView
- ,listeners : {
- rowclick : doRowClick
- ,load : this.dataStore.load()
- }
- });
- ///////////GRID ALARM END///////////
- //////////////TAB ALARM ///////////
- this.tabAlarm = new Ext.TabPanel({
- id : "tabAlarm"
- ,activeTab : 0
- ,width : 700
- ,height : 400
- ,plain : false
- ,defaults : {
- autoScroll : true
- }
- ,layoutOnTabChange : true
- ,defferedRender : true
- ,items : this.gridAlarm
- });
- ///////////TAB ALARM END///////////
- /*
- * -------------------------
- * Method implementations
- * -------------------------
- */
- this.getBaseUrl = function() {
- return baseUrl;
- }
- this.setBaseUrl = function(_base_url) {
- baseUrl = _base_url;
- }
- this.getLoginForm = function() {
- return this.loginForm;
- }
- this.getLogoutButton = function() {
- return this.logoutButton;
- }
- this.objAlarm = function(){
- return this.tabAlarm;
- }
- this.loadDataGridAlarm = function(){
- this.dataStore.load();
- }
- //this must be applied to a renderable object
- this.renderObject = function(object, id) {
- object.render(id);
- }
- this.showErrorMessageBox = function(_message) {
- Ext.MessageBox.show({
- title: '',
- msg: _message,
- buttons: Ext.MessageBox.OK,
- icon: Ext.MessageBox.ERROR
- });
- }
- };
create new paste | create new version of this paste
RAW Paste Data
Our Sites: