[
  {
    name: 'scrollarea',
    type: 'ScrollArea',
    property: { widget_resizable: true, frame_shape: 'NoFrame' },
    child: [
      {
        name: 'formlayout',
        type: 'FormLayout',
        property: { label_alignment: 'AlignTop | AlignRight', horizontal_spacing: 20, vertical_spacing: 10, margin: 20 },
        child: [
          {
            name: 'title',
            type: 'LineEdit',
            pack: { label: self.ttr('GroupName') },
          },
          {
            name: 'title_en',
            type: 'LineEdit',
            pack: { label: self.ttr('GroupName(English)') },
            state: function () {
              return APP.isDefinedLanguage('en') ? 'Show' : 'Hide';
            },
          },
          {
            name: 'title_zhcn',
            type: 'LineEdit',
            property: {},
            pack: { label: self.ttr('GroupName(Chinese Simplified)') },
            state: function () {
              return APP.isDefinedLanguage('zhcn') ? 'Show' : 'Hide';
            },
          },
          {
            name: 'title_zhtw',
            type: 'LineEdit',
            property: {},
            pack: { label: self.ttr('GroupName(Chinese Tranditional)') },
            state: function () {
              return APP.isDefinedLanguage('zhtw') ? 'Show' : 'Hide';
            },
          },
          {
            name: 'icon',
            type: 'IconSelector',
            property: { iconBgColor: 'blue' },
            pack: { label: self.ttr('Icon Name') },
          },
          {
            name: 'titleColor',
            type: 'ComboBox',
            property: {
              editable: true,
            },
            pack: { label: self.ttr('Title Color') },
            initCallback: function (obj, self) {
              self.setTitleColorList(obj);
            },
            getter: function (obj, self) { return obj.currentText },
            setter: function (obj, value, self) { obj.setCurrentName(value); obj.setCurrentText(value) },
          },
          {
            name: 'background',
            type: 'ComboBox',
            property: {
              editable: true,
            },
            pack: { label: self.ttr('Background Color') },
            initCallback: function (obj, self) {
              self.setColorList(obj);
            },
            getter: function (obj, self) { return obj.currentText },
            setter: function (obj, value, self) { obj.setCurrentName(value); obj.setCurrentText(value) },
          },
          {
            name: 'sizewidget',
            type: 'Widget',
            pack: { stretch: 1, label: self.ttr('Size') },
            child: {
              name: 'sizelayout',
              type: 'HBoxLayout',
              property: { margin: 0, spacing: 0 },
              pack: { label: self.ttr('Size') },
              child: [
                {
                  name: 'colSpan',
                  type: 'SpinBox',
                },
                {
                  name: 'sizeformatLabel',
                  type: 'Label',
                  state: function () {
                    this.getObject('sizeformatLabel').setText('X');
                    self.setLabelAdjustSize(this.getObject('sizeformatLabel'));
                    return 'Show';
                  },
                },
                {
                  name: 'rowSpan',
                  type: 'SpinBox',
                },
              ]
            },

          },
          {
            name: 'position',
            type: 'LineEdit',
            initCallback: function (obj, self) {
              obj.hide();
            }
          },
          {
            name: 'dockArea',
            type: 'RadioBox',
            property: {
              sizePolicy: 'Expanding,Fixed',
              item_list: [
                { name: 'topLeft', text: self.ttr('Top Left') }, { name: 'top', text: self.ttr('Top') }, { name: 'topRight', text: self.ttr('Top Right') },
                { name: 'left', text: self.ttr('Left') }, { name: 'center', text: self.ttr('Center') }, { name: 'right', text: self.ttr('Right') },
                { name: 'bottomLeft', text: self.ttr('Bottom Left') }, { name: 'bottom', text: self.ttr('Bottom') }, { name: 'bottomRight', text: self.ttr('Bottom Right') },
                { name: 'position', text: self.ttr('Absolute Position') },
              ],
              column_count: 3,
            },
            pack: { label: self.ttr('Dock Area') },
            value: 'position',
            validate: function (obj, val, title, moment) {
              if (val == 'position') {
                self.showDockSequence(this.getObject('formlayout'), this.getObject('dockSequence'), false);
              } else {
                self.showDockSequence(this.getObject('formlayout'), this.getObject('dockSequence'), true);
              }
            }
          },
          {
            name: 'dockSequence',
            type: 'SpinBox',
            property: { maximum: 100, minimum: 1, placeholder_text: 'Search' },
            pack: { label: self.ttr('Dock Sequence') },
          }
        ]
      },
    ]
  }

]