{
  xtype: 'panel'
	,title:ip2.i18n('users')
	,closable: true
	,autoScroll: false
	,labelAlign: 'top'
  ,layout:{
    type:'fit'
  }
  ,onInitialize: function(myPanel) {
    var dbName = 'navusr';
    var userGroupIdArray = [];
    var userGroupTextArray = [];

    if (!Ext.ClassManager.isCreated(dbName)) {
      Ext.define(dbName, {
        extend: 'Ext.data.Model'
        ,proxy:{
          type:'ajax'
          ,url:ip2.navigator.setUrl('database', {dbName:dbName, action:'list'})
          ,reader:{
            type:'json'
            ,rootProperty:'rows'
            ,totalProperty:'totalRows'
          }
        }
      });
    }

    var rowMenu = Ext.create('Ext.menu.Menu', {
      items: [
        {text:ip2.i18n('update'), cls:'ip2-default', iconCls:'ip2-icon-edit ip2-default', handler:function() { updateRow(); }}
        ,{text:ip2.i18n('delete'), iconCls:'ip2-icon-delete', handler:function() { deleteRow(); }}
      ]
    });

    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });

    var renderUserGroupIdsToText = function(value, meta, record, rowIndex, colIndex, store) {
      if (Ext.isArray(value) ) {
        // make string with user groups
        var string = '';
        var comma = '';
        for (var i = 0; i < value.length; i++) {
          if (typeof(value[i]) != 'undefined' && value[i] != -1) {
            string += comma + ' ' + userGroupTextArray[Ext.Array.indexOf(userGroupIdArray,value[i])];
            comma = ',';
          }
        }
        return string;
      } else {
        return value;
      }
    }

    var store = Ext.create('Ext.data.Store', {
      model:dbName
      ,autoLoad:true
      ,listeners:{
        update: function(store, record, operation) {
          var params = {}
          params.rrn = record.data.RRN;
          params.userGroups = record.data.userGroups;
          Ext.Ajax.request({
            url:ip2.navigator.setUrl('database', {dbName:dbName, action:'updateUserGroups'})
            ,params: params
            ,method: 'POST'
          })
        }
      }
    });

    var grid = Ext.create('Ext.grid.Panel', {
      flex: 1
      ,autoScroll: true
      ,store:store
      ,columns: [
        {header: ip2.i18n('USRID'),  dataIndex: 'USRID', width:200}
        ,{header: ip2.i18n('USRNAM'), dataIndex: 'USRNAM', flex: 1}
        ,{header: ip2.i18n('userGroups4user'), dataIndex: 'userGroups', flex: 2, renderer:renderUserGroupIdsToText
          ,field: {
            xtype:'ip2NavigatorUserGroupWithMultiSelectionAutoComboBox'
            ,hideLabel:true
          }
        }
      ]
      ,listeners: {
        itemdblclick:function(view, record, item, index, e) {
          updateRow();
        }
        ,itemcontextmenu:function(view, record, item, index, e) {
          e.stopEvent();
          var coords = e.getXY();
          rowMenu.showAt([coords[0], coords[1]]);
        }
      }
		  ,tbar:[{
        xtype:'button'
        ,text:ip2.i18n('addNew')
        ,iconCls:'ip2-icon-add'
        ,handler:function() {
          createRow();
        }
      },{
        xtype:'button'
        ,text:ip2.i18n('refresh')
        ,iconCls:'ip2-icon-refresh'
        ,handler:function() {
          grid.store.load();
          grid.getView().refresh();
        }
      }]
      ,plugins: [cellEditing]
    });

    store.on('load', function() {
      var a = this.proxy.reader.rawData.userGroupTextArray;
      for (var i = 0; i < a.length; i++) {
        userGroupIdArray[i] = a[i][0];
        userGroupTextArray[i] = a[i][1];
      }
      var columns = grid.headerCt.getGridColumns();
      for (var i = 0; i < columns.length; i++) {
        if (columns[i].dataIndex == 'userGroups') {
          columns[i].field.value = {"value":[],"records":a}
          continue;
        }
      }

      myPanel.add(grid);
    });

    var createRow = function() {
      var dataModel = grid.store.proxy.getModel();
      var record = new dataModel();
      detailForm('create', record);
    }
    var updateRow = function() {
      var records = grid.getSelectionModel().getSelection();
      for (var i = 0; i < records.length; i++) {
        var record = records[i];
        detailForm('update', record);
      }
    }
    var deleteRow = function() {
      Ext.MessageBox.show({
        title:ip2.i18n('confirmDeleteTitle')
        ,msg:ip2.i18n('confirmDelete')
        ,buttons: Ext.MessageBox.OKCANCEL
        ,fn:doDelete
        ,icon: Ext.MessageBox.WARNING
      });
    }

    var detailForm = function(action, gridRow) {
      var rrn = (action == 'create') ? 0 : gridRow.data.RRN;
      if (!Ext.ClassManager.isCreated('userDetail')) {
        Ext.define('userDetail', {
          extend: 'Ext.data.Model'
          ,proxy:{
            type:'ajax'
            ,url:ip2.navigator.setUrl('database', {dbName:dbName, action:'get'})
            ,reader:{
              type:'json'
              ,rootProperty:'data'
            }
          }
        });
      }
      var userStore = Ext.create('Ext.data.Store', {
        model:'userDetail'
      });
      userStore.proxy.extraParams = {rrn:rrn};
      userStore.load();
      var form = Ext.create('Ext.form.Panel', {
         url:ip2.navigator.setUrl('database', {dbName:dbName, action:action, rrn:rrn})
        ,border: false
        ,bodyStyle:'padding:10px;'
        ,defaults:{
            xtype:'textfield'
          ,labelAlign:'left'
          ,labelWidth:200
          ,width:400
        }
        ,items:[{
            xtype:'hidden'
          ,name:'USRTOK'
          ,dataIndex:'USRTOK'
        },{
            fieldLabel:ip2.i18n('USRID')
          ,name:'USRID'
          ,dataIndex:'USRID'
          ,allowBlank:false
        },{
            fieldLabel:ip2.i18n('USRPWD')
          ,name:'USRPWD'
          ,dataIndex:'USRPWD'
          ,allowBlank:true
          ,inputType:'password'
        },{
            fieldLabel:ip2.i18n('USRNAM')
          ,name:'USRNAM'
          ,dataIndex:'USRNAM'
          ,allowBlank:false
        },{
            fieldLabel:ip2.i18n('userGroups4user')
          ,name:'userGroups'
          ,dataIndex:'userGroups'
          ,xtype:'ip2NavigatorUserGroupWithMultiSelectionAutoComboBox'
        },{
            fieldLabel:ip2.i18n('USRSTS')
          ,name:'USRSTS'
          ,dataIndex:'USRSTS'
          ,xtype:'ip2NavigatorUserStatusComboBox'
        },{
            fieldLabel:ip2.i18n('USRLNG')
          ,name:'USRLNG'
          ,dataIndex:'USRLNG'
          ,xtype:'ip2NavigatorLanguageAutoComboBox'
          ,allowBlank:false
        },{
            fieldLabel:ip2.i18n('USREML')
          ,name:'USREML'
          ,dataIndex:'USREML'
        },{
            fieldLabel:ip2.i18n('USRTHM')
          ,name:'USRTHM'
          ,dataIndex:'USRTHM'
          ,xtype:'ip2NavigatorExtThemeComboBox'
          ,listeners:{
              select:function(box, value) {
                  var form = this.up('form').getForm();
                  if (form.findField('USRID').getValue() == ip2.navigator.user.id) {
                      ip2.navigator.user.settings.extTheme = value[0].data.path;
                      Ext.util.CSS.swapStyleSheet('extTheme', ip2.navigator.user.settings.extTheme);
                  }
              }
          }
        }]
        ,buttons:[{
            text:ip2.i18n('ok')
          ,type: 'submit'
          ,handler: function() {
              var form = this.up('form').getForm();
              if (form.isValid()) {
                  form.submit({
                      success: function(form, response) {
                          grid.store.suspendEvents(false); // suspend store events, else these will be fire for eash .set
                          if (action == 'create') {
                              grid.store.insert(0, gridRow);
                              gridRow.set('RRN', response.result.rrn);
                          }
                          var values = form.getFieldValues();
                          for(var field in form.getValues()) {
                              if (field == 'userGroups') {
                                  gridRow.set(field, response.result.userGroups);
                              } else {
                                  gridRow.set(field, values[field]);
                              }
                          }
                          grid.store.resumeEvents(); // resume store events, and these will be fired once by .commit
                          gridRow.commit();
                          window.hide();
                      }
                    ,failure: function(form, response) {
                        ip2.navigator.displayDBerror(response.result);
                    }
                  });
              }
          }
          ,listeners:{
              afterrender:function(button) {
                  ip2.setDefaultButtonStyle(button);
                  ip2.mapButton2key(this.up('form').getForm().owner.el, button, 'ENTER');
              }
          }
        },{
            text:ip2.i18n('cancel')
          ,type: 'button'
          ,handler: function() {
              window.hide();
          }
        }]
      });

      userStore.on('load', function() {
          var record = userStore.getAt(0);
          form.getForm().loadRecord(record);
          form.getForm().findField('USRID').focus();
      });

      var window = Ext.create('Ext.window.Window', {
          id:'win'+ip2.unique()
         ,title:ip2.i18n('userInformation')
         ,closeAction: 'hide'
         ,width: 550
         ,height: 335
         ,layout: 'fit'
         ,resizable: true
         ,modal: true
         ,items: form
         ,constrain : true,
      });
      window.show();
    }

    var doDelete = function(btn) {
      if (btn != 'ok') { return; }

      var result = {};
      var records = grid.getSelectionModel().getSelection();
      for (var i = 0; i < records.length; i++) {
        var record = records[i];
        Ext.Ajax.request({
          url:ip2.navigator.setUrl('database', {dbName:dbName, action:'delete', rrn:record.data.RRN})
          ,success:function(response) {
            eval('result =' + response.responseText);
            if (result.success) {
              grid.store.remove(record);
            } else {
              ip2.navigator.displayDBerror(response.result);
            }
          }
        })
      }
    }
  }
}
