Extjs项目中使用总结

对于在EXT项目中遇到的问题总结：

1。向GridPanel中的某行添加双击事件：

// 双击事件 resultTable 是EXT.GridPanel对象
  resultTable.addListener('rowdblclick', rowdblclickFn);
  function rowdblclickFn(grid, rowindex, e)
  {
   showDetailPage();
  }

// 调整到详细页面
  showDetailPage = function()
  {
   var record = resultTable.getSelectionModel().getSelected();
   if (record.data.length == 0)
   {
    alert('未检测到数据!');
   } else{
    // 切换窗口
    var netStatus = record.get('sTATUS');
    var id = record.get('iD');
    var type = record.get('tYPE');

//将某个页面填充到当前页

  window.location = 'skipHandler?id=' + id + encodeURI(encodeURI('&type=' + type));
   }
  }

 

// 组件数组
  var formItems = [
  {
   layout : 'column',
   border : false,
   labelAlign : 'top',
   items : [
   {
    columnWidth : .3,
    layout : 'form',
    border : false,
    items : [
    {
     xtype : 'textfield',
     fieldLabel : '主机名称',
     id : 'hostname',
     readOnly : true, // 只读
     selectOnFocus : true, // 点击即选中
     anchor : '95%'
    },
    {
     xtype : 'textfield',
     fieldLabel : '监控类型',
     id : 'type',
     readOnly : true, // 只读
     selectOnFocus : true, // 点击即选中
     anchor : '95%'
    }]
   },
   {
    columnWidth : .3,
    layout : 'form',
    border : false,
    items : [
    {
     xtype : 'textfield',
     fieldLabel : 'IP地址',
     id : 'ipAddress',
     readOnly : true, // 只读
     selectOnFocus : true, // 点击即选中
     anchor : '95%'
    },
    {
     xtype : 'textfield',
     fieldLabel : '网络状况',
     id : 'netStatus',
     readOnly : true, // 只读
     selectOnFocus : true, // 点击即选中
     anchor : '95%'
    }]
   },
   {
    columnWidth : .3,
    layout : 'form',
    border : false,
    items : [
    {
     xtype : 'textfield',
     fieldLabel : '系统描述',
     id : 'sysDesc',
     readOnly : true, // 只读
     selectOnFocus : true, // 点击即选中
     anchor : '95%'
    },
    {
     xtype : 'textfield',
     fieldLabel : '告警状况',
     id : 'warningStatus',
     readOnly : true, // 只读
     selectOnFocus : true, // 点击即选中
     anchor : '95%'
    }]
   }]
  },
  {
   xtype : 'tabpanel',
   id : 'infoTabPanel',
   name : 'infoTabPanel',
   plain : true,
   activeTab : 0,
   height : 350,
   deferredRender : false,
   labelAlign : 'left',
   defaults :
   {
    bodyStyle : 'padding:10px'
   },
   items : [
   {
    title : 'CPU信息',
    layout : 'form',
    defaults :
    {
     width : 230
    },
    defaultType : 'textfield',
    items : [
    {
     fieldLabel : 'CPU使用率',
     id : 'cpuUsage',
     readOnly : true, // 只读
     selectOnFocus : true
    }]
   },
   {
    title : '内存信息',
    layout : 'form',
    defaults :
    {
     width : 230
    },
    defaultType : 'textfield',
    items : [
    {
     fieldLabel : '告警消息',
     id : 'ramErrorMsg',
     xtype : 'textarea',
     readOnly : true, // 只读
     selectOnFocus : true
    }]
   },
   {
    title : '磁盘信息',
    layout : 'column',
    id : 'diskInfo',
    name : 'diskInfo',
    labelWidth : 70,
    labelAlign : 'right',
    border : false,
    items : []
   },
   {
    title : '数据库信息',
    layout : 'form',
    id : 'dataBaseTab',
    name : 'dataBaseTab',
    defaults :
    {
     width : 230
    },
    defaultType : 'textfield',
    items : [
    {
     fieldLabel : '最大连接数',
     id : 'dataBaseMaxCollection',
     readOnly : true, // 只读
     selectOnFocus : true
    }]
   }],
   listeners :
   {
    'tabchange' : function()
    {

    }
   }
  }];

  // 展示面板
  var infoPanel = new Ext.FormPanel(
  {
   title : '未定义',
   bodyStyle : 'padding: 5px',
   width : '100%',
   height : '100%',
   collapsible : false,
   buttonAlign : 'center',
   items : [formItems],
   buttons : [
   {
    text : '返回',
    iconCls : 'icon_back',
    handler : function()
    {
     window.location = PROJECT_ROOT + "/spring/dms/dmsHostMonitorHandler/page";
    }
   }]
  });
  infoPanel.render('div_body');

页面布局： 上面是一些描述详细信息。下面是多个tabpanel

 

{
   xtype : 'fieldset',
   fieldLabel : '数据库信息',
   title : '数据库信息',
   id : 'dataBaseInfo',
   name : 'dataBaseInfo',
   collapsible : true,
   checkboxToggle : true,
   autoHeight : true,
   disabled : false,
   defaults :
   {
    width : 200,
    height : 30
   },
   defaultType : 'textfield',
   labelAlign : 'left',
   labelWidth : 70,
   items : [
   {
    fieldLabel : '数据库名称',
    name : 'DATABASENAME',
    id : 'DATABASENAME',
    readOnly : false
   },
   {
    fieldLabel : '用户名',
    id : 'USER',
    name : 'USER',
    xtype : 'textfield',
    readOnly : false
   },
   {
    fieldLabel : '密码',
    id : 'PASSWORD',
    name : 'PASSWORD',
    inputType : 'password',
    xtype : 'textfield',
    readOnly : false
   },
   {
    fieldLabel : '数据库端口',
    id : 'DATABASEPORT',
    name : 'DATABASEPORT',
    xtype : 'numberfield',
    readOnly : false,
    value : '1521',
    maxValue : 65535, // 最大值
    minValue : 1
   }]
  }

在textField 后面加上提示信息


listeners : {render : function(obj){
var font = document.createElement(font);
font.setAttribute("color","red");
font.appendChild(document.createTextNode('应用名称,将作为应用标题,如[数据监控管理平台]'));
obj.el.dom.parentNode.appendChild(font);
}}