JS 实现I P地址分配 二

SubnetCalMgr = Ext.extend(Ext.Panel, {
 subnetInfoPanel: null,
 subnetId: null,
 
 initComponent: function() {
  SubnetCalMgr.superclass.initComponent.call(this);
  this._initialize();
 },
 _initialize: function() {
//  this.setLayout(new Ext.layout.FitLayout());
  this.initSubnetInfoPanel();
  this.add(this.subnetInfoPanel);
 },
 getContentPanel: function() {
  return this.contentPanel;
 },
 loadSubnetInfoData: function(storeData) {
  var grid = this.subnetInfoPanel;
  var el = grid.getEl();
  el.mask("数据加载中...");
     var task = new Ext.util.DelayedTask(function() {
   grid.getStore().loadData(storeData);
//   grid.el.unmask();
   el.unmask();
  }, this);
  task.delay(100);
 },
 initSubnetInfoPanel: function() {
  var scope = this;
  var createStore = function(arraydatasource) {
   var store = new Ext.data.SimpleStore({
    fields: [{
     name: "subnetAddress", type: "string"
    }, {
     name: 'maskLength', type: 'int'
    }, {
     name: 'networkAddress', type: 'string'
    }, {
     name: 'broadcastAddress', type: 'string'
    }, {
     name: 'hostSegArrange', type: 'string'
    }]
   });
   store.loadData(arraydatasource);
   return store;
  };
  var createColumnModel = function(plugins, header) {
   return new Ext.grid.ColumnModel([
          //plugins,
          //new Ext.grid.CheckboxSelectionModel(),
          //new Ext.grid.RowSelectionModel({
    // singleSelect: true
    //}),
          {id: 'subnetAddress', header: "子网地址", width: 160, sortable: true, dataIndex: 'subnetAddress', hidden: false},
    {header: '掩码长度', width: 160, sortable: true, dataIndex: 'maskLength'},
    {header: '网络地址', width: 160, sortable: true, dataIndex: 'networkAddress'},
    {header: '广播地址', width: 160, sortable: true, dataIndex: 'broadcastAddress'},
    {header: '主机范围', width: 160, sortable: true, dataIndex: 'hostSegArrange'}
      ]);
  };
  var createRightGridPanel = function(groupId) {
   var acl = [];
   var store = createStore(acl);
   
   var cm = createColumnModel(null, '');
  
   var selects = [[-1, '请选择掩码长度(默认为24)'],
    [8, '8'], [9, '9'], [10, '10'], [11, '11'], [12, '12'],
    [13, '13'], [14, '14'], [15, '15'], [16, '16'], [17, '17'],
    [18, '18'], [19, '19'], [20, '20'], [21, '21'], [22, '22'],
    [23, '23'], [24, '24'], [25, '25'], [26, '26'], [27, '27'],
    [28, '28'], [29, '29'], [30, '30'], [31, '31'], [32, '32']];
   var grid = new Ext.grid.GridPanel({
//    title: '子段信息',
//    sm: new Ext.grid.CheckboxSelectionModel(),
    sm: new Ext.grid.RowSelectionModel(/*{
     singleSelect: true
    }*/),
          store: store,
          cm: cm,
          stripeRows: true,
          viewConfig: {
              forceFit: true
          },
          region: 'center',
//          plugins: expander,
          border: true,
          margins: '0 0 0 0',
          bodyStyle: 'padding:　0px;',
          animCollapse: false,
          buttonAlign: 'center',
          tbar: new Ext.Toolbar(["网段地址：", {
           xtype: 'textfield',
           id: 'byte1',
           width: 50
          }, '.', {
           xtype: 'textfield',
           id: 'byte2',
           width: 50
          }, '.', {
           xtype: 'textfield',
           id: 'byte3',
           width: 50
          }, '.', {
           xtype: 'textfield',
           id: 'byte4',
           width: 50
          }, '    &nbsp', {
           xtype: 'combo',
           id: 'subnetMaskLength',
           typeAhead: true,
           triggerAction: 'all',
           store: new Ext.data.SimpleStore({
               fields: ['keyitem', 'valueitem'],
               data: selects
           }),
           displayField: 'valueitem',
           forceSelection: true,
           name: 'valueitem',
           valueField: 'keyitem',
           value: -1,
           mode: 'local',
           editable: false
          }, {
           xtype: 'button',
     text : "确定",
     iconCls : "icon-yes",
     handler : function(button, eventObject) {
      scope.onBtnOk();
     }
    }])
      });
      return grid;
  };
  this.subnetInfoPanel = createRightGridPanel();
 },
 onBtnOk: function() {
  var address = '';
  for (var i = 1; i <= 4; i++) {
   var bytei = Ext.getCmp('byte' + i).getValue();
   address = address + bytei + '.';
  }
  address = address.substr(0, address.length - 1);
  var subnetMaskLength = Ext.getCmp('subnetMaskLength').getValue();
  if (subnetMaskLength == -1)
   subnetMaskLength = 24;
  
  var networkMgr = new NetworkMgr();
  var networkMaskLength = networkMgr.getNetworkMaskLength(address);
  var availables = networkMgr.availableSubnetAddress(
    address,
    networkMaskLength,
    subnetMaskLength);
  var storeData = [];
  for (var i = 0; i < availables.length; i++) {
   var subnetAddress = availables[i];
   var subnetIpAddress = networkMgr.toIpAddr(subnetAddress);
   storeData[i] = [
    subnetIpAddress,
    subnetMaskLength,
    subnetIpAddress,
    networkMgr.getEndIpAddress0(subnetAddress, subnetMaskLength),
    networkMgr.getHostAddressArrange(subnetAddress, subnetMaskLength)
   ]
  }
  this.loadSubnetInfoData(storeData);
 },
 getSubnetInfoPanel: function() {
  return this.subnetInfoPanel;
 }
});