Доступно два способа получения данных от сервера:

• RPC
• AJAX

Читать далее «Создание запросов к серверу данных»

Для вывода панели с кнопками которые не влезают

Нужно использовать специальные панели IServ.UI.Classic.ListViewToolbar или IServ.UI.Classic.DetailViewToolbar
Все элементы данных панелей могут быть двух видов:

• кнопка с иконкой и текстом
• кнопка с иконкой

Читать далее «Вывод пунктов меню для overflow:menu»

Проверка Ext.data.validator.Bound считает ошибкой ту запись для которой указано, что максимальная длина (2), например равна 10, но при этом эта запись может содержать значение null (1).

Пример:

Ext.define('Core.model.info_columns', { 
    extend: 'Ext.data.Model', 
    ...
    fields: [
         ...
         { name: 'width', type: 'string', allowNull: true }, // (1) может быть null
         { name: 'format', type: 'string', allowNull: true }
         
    ],

    validators: {
        ...
        width: { type: 'length', max: 10 }, // (2) ограничение по длине
        format: { type: 'length', max: 32 }
    }
});

Чтобы исправить такое поведение нужно указать, что минимальное значение равно null (3)

Пример:

Ext.define('Core.model.info_columns', { 
    extend: 'Ext.data.Model', 
    ...
    validators: {
        ...
        width: { type: 'length', max: 10, min: null }, // (3) ограничение по длине
        ...
    }
});

Не всё здесь однозначно, так что разберём эти правила подробнее.

Фигурные скобки

Пишутся на той же строке, так называемый «египетский» стиль. Перед скобкой – пробел.

Если у вас уже есть опыт в разработке, и вы привыкли делать скобку на отдельной строке – это тоже вариант. В конце концов, решать вам. Но в большинстве JavaScript-фреймворков стиль именно такой.

Если условие и код достаточно короткие, например if (cond) return null, то запись в одну строку вполне читаема… Но, как правило, отдельная строка всё равно воспринимается лучше.

Длина строки

Максимальную длину строки согласовывают в команде. Как правило, это либо 80, либо 120 символов, в зависимости от того, какие мониторы у разработчиков.

Более длинные строки необходимо разбивать для улучшения читаемости.

Отступы

Отступы нужны двух типов:

• Горизонтальный отступ, при вложенности – два(или четыре) пробела.Как правило, используются именно пробелы, т.к. они позволяют сделать более гибкие «конфигурации отступов», чем символ «Tab».

  Например, выровнять аргументы относительно открывающей скобки:

  show("Строки" +
       " выровнены" +
       " строго" +
       " одна под другой");

• Вертикальный отступ, для лучшей разбивки кода – перевод строки.Используется, чтобы разделить логические блоки внутри одной функции. В примере разделены инициализация переменных, главный цикл и возвращение результата:

  function pow(x, n) {
    var result = 1;
    //              <--
    for (var i = 0; i < n; i++) {
      result *= x;
    }
    //              <--
    return result;
  }

  Вставляйте дополнительный перевод строки туда, где это сделает код более читаемым. Не должно быть более 9 строк кода подряд без вертикального отступа.

Точка с запятой

Точки с запятой нужно ставить, даже если их, казалось бы, можно пропустить.

Есть языки, в которых точка с запятой не обязательна, и её там никто не ставит. В JavaScript перевод строки её заменяет, но лишь частично, поэтому лучше её ставить, как обсуждалось ранее.

Именование

Общее правило:

• Имя переменной – существительное.
• Имя функции – глагол или начинается с глагола. Бывает, что имена для краткости делают существительными, но глаголы понятнее.

Для имён используется английский язык (не транслит) и верблюжья нотация.

Более подробно – читайте про имена функций и имена переменных.

Уровни вложенности

Уровней вложенности должно быть немного.

Например, проверки в циклах можно делать через «continue», чтобы не было дополнительного уровня if(..) { ... }:

Вместо:

for (var i = 0; i < 10; i++) {
  if (i подходит) {
    ... // <- уровень вложенности 2
  }
}

Используйте:

                             
          for (var i = 0; i < 10; i++) { if (i не подходит) continue; ... // <- уровень вложенности 1 }

Аналогичная ситуация – с if/else и return. Следующие две конструкции идентичны.

Первая:

function isEven(n) { // проверка чётности
  if (n % 2 == 0) {
    return true;
  } else {
    return false;
  }
}

Вторая:

function isEven(n) { // проверка чётности
  if (n % 2 == 0) {
    return true;
  }

  return false;
}

Если в блоке if идёт return, то else за ним не нужен.

Лучше быстро обработать простые случаи, вернуть результат, а дальше разбираться со сложным, без дополнительного уровня вложенности.

В случае с функцией isEven можно было бы поступить и проще:

function isEven(n) { // проверка чётности
  return !(n % 2);
}

…Однако, если код !(n % 2) для вас менее очевиден чем предыдущий вариант, то стоит использовать предыдущий.

Главное для нас – не краткость кода, а его простота и читаемость. Совсем не всегда более короткий код проще для понимания, чем более развёрнутый.

Функции = Комментарии

Функции должны быть небольшими. Если функция большая – желательно разбить её на несколько.

Этому правилу бывает сложно следовать, но оно стоит того. При чем же здесь комментарии?

Вызов отдельной небольшой функции не только легче отлаживать и тестировать – сам факт его наличия является отличным комментарием.

Сравните, например, две функции showPrimes(n) для вывода простых чисел до n.

Первый вариант использует метку:

function showPrimes(n) {
  nextPrime: for (var i = 2; i < n; i++) {

    for (var j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert( i ); // простое
  }
}

Второй вариант – дополнительную функцию isPrime(n) для проверки на простоту:

                              function showPrimes(n) { for (var i = 2; i < n; i++) { if (!isPrime(i)) continue; alert(i); // простое } } function isPrime(n) { for (var i = 2; i < n; i++) { if ( n % i == 0) return false; } return true; }

Второй вариант проще и понятнее, не правда ли? Вместо участка кода мы видим описание действия, которое там совершается (проверка isPrime).

Функции – под кодом

Есть два способа расположить функции, необходимые для выполнения кода.

1. Функции над кодом, который их использует:

   
   
   
   
   
   
   
   
   
   
   
   
   
                                                  // объявить функции function createElement() { ... } function setHandler(elem) { ... } function walkAround() { ... } // код, использующий функции var elem = createElement(); setHandler(elem); walkAround();

2. Сначала код, а функции внизу:

   
   
   
   
   
                                             // код, использующий функции var elem = createElement(); setHandler(elem); walkAround(); // --- функции --- function createElement() { ... } function setHandler(elem) { ... } function walkAround() { ... }

…На самом деле существует еще третий «стиль», при котором функции хаотично разбросаны по коду, но это ведь не наш метод, да?

Как правило, лучше располагать функции под кодом, который их использует.

То есть, предпочтителен 2-й способ.

Дело в том, что при чтении такого кода мы хотим знать в первую очередь, что он делает, а уже затем какие функции ему помогают. Если первым идёт код, то это как раз дает необходимую информацию. Что же касается функций, то вполне возможно нам и не понадобится их читать, особенно если они названы адекватно и то, что они делают, понятно из названия.

Плохие комментарии

В коде нужны комментарии.

Сразу начну с того, каких комментариев быть почти не должно.

Должен быть минимум комментариев, которые отвечают на вопрос «что происходит в коде?»

Что интересно, в коде начинающих разработчиков обычно комментариев либо нет, либо они как раз такого типа: «что делается в этих строках».

Серьёзно, хороший код и так понятен.

Об этом замечательно выразился Р.Мартин в книге «Чистый код»: «Если вам кажется, что нужно добавить комментарий для улучшения понимания, это значит, что ваш код недостаточно прост, и, может, стоит переписать его».

Если у вас образовалась длинная «простыня», то, возможно, стоит разбить её на отдельные функции, и тогда из их названий будет понятно, что делает тот или иной фрагмент.

Да, конечно, бывают сложные алгоритмы, хитрые решения для оптимизации, поэтому нельзя такие комментарии просто запретить. Но перед тем, как писать подобное – подумайте: «Нельзя ли сделать код понятным и без них?»

Хорошие комментарии

А какие комментарии полезны и приветствуются?

• Архитектурный комментарий – «как оно, вообще, устроено».Какие компоненты есть, какие технологии использованы, поток взаимодействия. О чём и зачем этот скрипт. Взгляд с высоты птичьего полёта. Эти комментарии особенно нужны, если вы не один, а проект большой.

  Для описания архитектуры, кстати, создан специальный язык UML, красивые диаграммы, но можно и без этого. Главное – чтобы понятно.

• Справочный комментарий перед функцией – о том, что именно она делает, какие параметры принимает и что возвращает.Для таких комментариев существует синтаксис JSDoc.

  /**
   * Возвращает x в степени n, только для натуральных n
   *
   * @param {number} x Число для возведения в степень.
   * @param {number} n Показатель степени, натуральное число.
   * @return {number} x в степени n.
   */
  function pow(x, n) {
    ...
  }

  Такие комментарии позволяют сразу понять, что принимает и что делает функция, не вникая в код.

  Кстати, они автоматически обрабатываются многими редакторами, например Aptana и редакторами от JetBrains, которые учитывают их при автодополнении, а также выводят их в автоподсказках при наборе кода.

  Кроме того, есть инструменты, например JSDoc 3, которые умеют генерировать по таким комментариям документацию в формате HTML. Более подробную информацию об этом можно также найти на сайте http://usejsdoc.org/.

…Но куда более важными могут быть комментарии, которые объясняют не что, а почему в коде происходит именно это!

Как правило, из кода можно понять, что он делает. Бывает, конечно, всякое, но, в конце концов, вы этот код видите. Однако гораздо важнее может быть то, чего вы не видите!

Почему это сделано именно так? На это сам код ответа не даёт.

Например:

Есть несколько способов решения задачи. Почему выбран именно этот?

Например, пробовали решить задачу по-другому, но не получилось – напишите об этом. Почему вы выбрали именно этот способ решения? Особенно это важно в тех случаях, когда используется не первый приходящий в голову способ, а какой-то другой.

Без этого возможна, например, такая ситуация:

• Вы открываете код, который был написан какое-то время назад, и видите, что он «неоптимален».
• Думаете: «Какой я был дурак», и переписываете под «более очевидный и правильный» вариант.
• …Порыв, конечно, хороший, да только этот вариант вы уже обдумали раньше. И отказались, а почему – забыли. В процессе переписывания вспомнили, конечно (к счастью), но результат – потеря времени на повторное обдумывание.Комментарии, которые объясняют выбор решения, очень важны. Они помогают понять происходящее и предпринять правильные шаги при развитии кода.

Какие неочевидные возможности обеспечивает этот код? Где ещё они используются?

В хорошем коде должно быть минимум неочевидного. Но там, где это есть – пожалуйста, комментируйте.

Руководства по стилю

Когда написанием проекта занимается целая команда, то должен существовать один стандарт кода, описывающий где и когда ставить пробелы, запятые, переносы строк и т.п.

Сейчас, когда есть столько готовых проектов, нет смысла придумывать целиком своё руководство по стилю. Можно взять уже готовое, к которому, по желанию, всегда можно что-то добавить.

Большинство есть на английском, сообщите мне, если найдёте хороший перевод:

• Google JavaScript Style Guide
• jQuery JavaScript Style Guide
• Airbnb JavaScript Style Guide
• Idiomatic.JS (есть перевод)
• Dojo Style Guide

Для того, чтобы начать разработку, вполне хватит элементов стилей, обозначенных в этой главе. В дальнейшем, посмотрев эти руководства, вы можете выработать и свой стиль, но лучше не делать его особенно «уникальным и неповторимым», себе дороже потом будет с людьми сотрудничать.

Автоматизированные средства проверки

Существуют средства, проверяющие стиль кода.

Самые известные – это:

• JSLint – проверяет код на соответствие стилю JSLint, в онлайн-интерфейсе вверху можно ввести код, а внизу различные настройки проверки, чтобы сделать её более мягкой.
• JSHint – вариант JSLint с большим количеством настроек.
• Closure Linter – проверка на соответствие Google JavaScript Style Guide.

В частности, JSLint и JSHint интегрированы с большинством редакторов, они гибко настраиваются под нужный стиль и совершенно незаметно улучшают разработку, подсказывая, где и что поправить.

Побочный эффект – они видят некоторые ошибки, например необъявленные переменные. У меня это обычно результат опечатки, которые таким образом сразу отлавливаются. Очень рекомендую поставить что-то из этого. Я использую JSHint.

Итого

Описанные принципы оформления кода уместны в большинстве проектов. Есть и другие полезные соглашения.

Следуя (или не следуя) им, необходимо помнить, что любые советы по стилю хороши лишь тогда, когда делают код читаемее, понятнее, проще в поддержке.

Оригинал статьи: https://learn.javascript.ru/coding-style#%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%BD%D1%8B%D0%B5-%D1%81%D0%BA%D0%BE%D0%B1%D0%BA%D0%B8

По умолчанию ExtJS не поддерживает применение оператора OR. Для реализации данного механизма были созданы или переопределены ниже описанные классы и методы.

Основным классов отвечающим за выполнение логической фильтрации является IServ.mixin.Logic. Содержит два метода: filters и union.

• filters(any[], any[]): any — основной метод для выполнения локальной логической фильтрации. Принимает первым параметром массив записей, вторым — параметры фильтрации

  new IServ.mixin.Logic([...],[
     new Ext.util.Filter({...}),
     new IServ.util.Logic({name: 'or'}),
     new Ext.util.Filter({...})
  ]);
  

• union(any[]):any[] — вспомогательный метод для объединения результатов выполнения операция. Например чтобы объединить результаты двух фильтров

Добавлены новые классы:

Переопределены поведения следующих классов:

Добавлены дополнительные функции в класс Ext.Array для работы с массивами:

• uniqueWithObject(any[]): any[] — возвращает уникальные объекты из массива. В отличии от функции unique позволяет работать со сложными объектами. Для сериализации объектов используется Ext.encode()
• equalsRecords(any[], any[]): any[] — возвращает одинаковые элементы массивов. Для сравнения применяется метод Ext.encode()
• objectExists(any[], any): boolean — возвращает true если объект присутствует в массиве.

Примеры создания фильтраций:

store.filter([{
    property: 'name',
    value: 'Саша'
}, 'or', {
    property: 'age',
    value: 30
}, 'and', {
    property: 'name',
    value: 'Оксана'
}], null, true);      

или

store.filter([
    [{  // тут массив для группировки
        property: 'name',
        value: 'Саша'
    }, 'or', {
        property: 'age',
        value: 30
    }], 'and', {
        property: 'name',
        value: 'Оксана'
    }
], null, true);

Пример формирования RPC запроса:

[
  {
    "property": "name",
    "value": "Саша"
  },
  "or",
  {
    "property": "age",
    "value": 30
  },
  "and",
  {
    "property": "name",
    "value": "Оксана"
  }
]

или

[
  [ // тут группировка
    {
      "property": "name",
      "value": "Саша"
    },
    "or",
    {
      "property": "age",
      "value": 30
    }
  ],
  "and",
  {
    "property": "name",
    "value": "Оксана"
  }
]

Criteria — это механизм выделения (изменения стиля) строки или ячейки списка при помощи фильтрации.

Базовым, абстрактным классом criteria является

...
filters: [{
   "property": "value",
   "value": "admin"
},{
   "property": "password",
   "value": "test"
}]
...

{
    "xtype": "listviewgrid",
    ...
    columns:[{
        ...,
        plugins: [{
            ptype: 'cellcriteria',
            styles: {
                color: 'red'
            },
            filters: [{
                property: 'value',
                value: function() { // например нужно прочитать настройку
                    return Utilits.getConf('value'); 
                }
            }]
        }]
    }]
}

xtype: 'listview',
plugins: [{
    type: 'listitemcriteria',
    styles: {
        color: 'red'
    },
    filters: [{
        property: 'status', // фильтрация должна производиться по полю которые указано в itemTpl
        value: '0'
    }]
}],
itemTpl: [
    '{message} {status}' // по status производится фильтрация
]
...

Form Criteria

Для дополнительной валидации при сохранении формы добавлен механизм criteria

Пример реализации:

...    
items: [{
            xtype: 'form',
            itemId: 'formpanel',
            header: false,
            defaults: {
                width: '100%',
                labelAlign: 'top',
                readOnly: true
            },
            flex: 1,
            scrollable: true,
            plugins: [{
                ptype: 'formcriteria',
                filters: [{
                    "property": "login",
                    "value": "user"
                }],
                message: "Ошибка сохранения"
            }],
...

Результатом будет невозможность сохранения формы если логин пользователя равен user

Overview

Ext JS ships with hundreds of classes. We have more than 2 million developers to date and they come from various backgrounds and locations. At that scale, we face a big challenge in providing a common code architecture that is:

• Familiar and simple to learn
• Fast to develop, easy to debug, and painless to deploy
• Organized, extensible, and maintainable

Because JavaScript is a classless, prototype-oriented language, one of its most powerful features is flexibility. There are multiple solutions to any problem using many different coding styles and techniques. However, this comes with the cost of being unpredictable. Without a unified structure, JavaScript code can be difficult to understand, maintain, and re-use.

Class-based programming, on the other hand, is still the most popular model of Object Oriented Programming. Class-based languages usually requires strong-typing, encapsulation, and standard coding conventions. By making developers adhere to a large set of principles, code is more likely to be predictable, extensible, and scalable over time. However, this model doesn’t have JavaScript’s dynamic capability.

Each approach has pros and cons, but can we keep the good parts of both while hiding the bad parts? The answer is yes, and you can find the solution with Ext JS.

Naming Conventions

Using consistent naming conventions throughout your code base for classes, namespaces and filenames helps keep your code organized, structured and readable.

Classes

Class names may only contain alphanumeric characters. Numbers are permitted but discouraged, unless they belong to a technical term. Do not use underscores, hyphens, or any other non-alphanumeric character. For example:

• MyCompany.useful_util.Debug_Toolbar is discouraged
• MyCompany.util.Base64 is best

Class names should be grouped into packages when appropriate and properly namespaced using object property dot-notation (.). At a minimum, there should be one unique top-level namespace followed by the class name. For example:

MyCompany.data.CoolProxy
MyCompany.Application

The top-level namespaces and the actual class names should be CamelCased. Everything else should be all lower-cased. For example:

MyCompany.form.action.AutoLoad

Classes that are not distributed by Sencha should never use Ext as the top-level namespace.

Acronyms should also follow CamelCased convention listed above. For example:

• Ext.data.JsonProxy instead of Ext.data.JSONProxy
• MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser
• MyCompany.server.Http instead of MyCompany.server.HTTP

Source Files

The names of the classes map directly to the file paths in which they are stored. As a result, there must only be one class per file. For example:

• Ext.util.Observable is stored in path/to/src/Ext/util/Observable.js
• Ext.form.action.Submit is stored in path/to/src/Ext/form/action/Submit.js
• MyCompany.chart.axis.Numeric is stored in path/to/src/MyCompany/chart/axis/Numeric.js

path/to/src is the directory of your application’s classes. All classes should stay under this common root and should be properly namespaced for the best development, maintenance, and deployment experience.

Methods and Variables

• In a similar fashion to class names, method and variable names may only contain alphanumeric characters. Numbers are permitted but discouraged unless they belong to a technical term. Do not use underscores, hyphens, or any other non-alphanumeric character.
• Method and variable names should always be in camelCased. This also applies to acronyms.

Examples

• Acceptable method names:
  • encodeUsingMd5()
  • getHtml() instead of getHTML()
  • getJsonResponse() instead of getJSONResponse()
  • parseXmlContent() instead of parseXMLContent()
• Acceptable variable names:
  • var isGoodName
  • var base64Encoder
  • var xmlReader
  • var httpServer

Properties

• Class property names follow the exact same convention except when they are static constants.
• Static class properties that are constants should be all upper-cased. For example:
  • Ext.MessageBox.YES = "Yes"
  • Ext.MessageBox.NO = "No"
  • MyCompany.alien.Math.PI = "4.13"

Declaration

You may use a single method for class creation: Ext.define. Its basic syntax is as follows:

Ext.define(className, members, onClassCreated);

• className: The class name
• members is an object that represents a collection of class members in key-value pairs
• onClassCreated is an optional function callback that is invoked when all dependencies of the defined class are ready and the class itself is fully created. Due to the asynchronous nature of class creation, this callback can be useful in many situations. These will be discussed further in Section IV

Example:

Ext.define('My.sample.Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
    }
});

var bob = Ext.create('My.sample.Person', 'Bob');

bob.eat("Salad"); // alert("Bob is eating: Salad");

Note: We created a new instance of My.sample.Person using the Ext.create() method. We could have used the new keyword (new My.sample.Person()). However it is recommended to get in the habit of always using Ext.createsince it allows you to take advantage of dynamic loading. For more info on dynamic loading see the Getting Started guide

Configuration

There is also a dedicated config property that gets processed by the powerful Ext.Class pre-processors before the class is created. Features include:

• Configurations are completely encapsulated from other class members
• Getter and setter methods for every config property are automatically generated into the class prototype during class creation if methods are not already defined.
• The auto-generated setter method calls the apply method (if defined on the class) internally before setting the value. You may override the apply method for a config property if you need to run custom logic before setting the value. If your apply method does not return a value, the setter will not set the value. The update method (if defined) will also be called when a different value is set. Both the apply and update methods are passed the new value and the old value as params.

For Ext classes that use the configs, you don’t need to call initConfig() manually. However, for your own classes that extend Ext.Base, initConfig() still needs to be called.

You can see configuration examples below.

Ext.define('My.own.Window', {
   extend: 'Ext.Component',
   /** @readonly */
   isWindow: true,

   config: {
       title: 'Title Here',

       bottomBar: {
           height: 50,
           resizable: false
       }
   },

   applyTitle: function(title) {
       if (!Ext.isString(title) || title.length === 0) {
           alert('Error: Title must be a valid non-empty string');
       }
       else {
           return title;
       }
   },

   applyBottomBar: function(bottomBar) {
       if (bottomBar) {
           if (!this.bottomBar) {
               return Ext.create('My.own.WindowBottomBar', bottomBar);
           }
           else {
               this.bottomBar.setConfig(bottomBar);
           }
       }
   }
});

/** A child component to complete the example. */
Ext.define('My.own.WindowBottomBar', {
   config: {
       height: undefined,
       resizable: true
   }
});

And here’s an example of how it can be used:

var myWindow = Ext.create('My.own.Window', {
    title: 'Hello World',
    bottomBar: {
        height: 60
    }
});

alert(myWindow.getTitle()); // alerts "Hello World"

myWindow.setTitle('Something New');

alert(myWindow.getTitle()); // alerts "Something New"

myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"

myWindow.setBottomBar({ height: 100 });

alert(myWindow.getBottomBar().getHeight()); // alerts 100

Statics

Static members can be defined using the statics config

Ext.define('Computer', {
    statics: {
        instanceCount: 0,
        factory: function(brand) {
            // 'this' in static methods refer to the class itself
            return new this({brand: brand});
        }
    },

    config: {
        brand: null
    }
});

var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');

alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

Errors Handling & Debugging

Ext JS includes some useful features that will help you with debugging and error handling.

• You can use Ext.getDisplayName() to get the display name of any method. This is especially useful for throwing errors that have the class name and method name in their description:

    throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
  

• When an error is thrown in any method of any class defined using Ext.define(), you should see the method and class names in the call stack if you are using a WebKit based browser (Chrome or Safari). For example, here is what it would look like in Chrome:

  

Оригинал статьи: https://docs.sencha.com/extjs/6.6.0/guides/core_concepts/classes.html