Мне дали проект, который использует фреймворк Sencha ExtJS, без передачи и документации. Я пытаюсь разобраться в этом и понять следующий синтаксис и ищу сайты / ресурсы для новичков в этой структуре.

Я просматривал код и не уверен, что именно он делает, а именно:

if(val==1) {
        Ext.getCmp('status').setText('AWAITING APPROV');
    }
    switch(flag) {
        case 1: if(val==0) {
                    Ext.getCmp('complex_first').el.replaceCls('x-form-complex', 'x-form-simplex');
                } else {
                    Ext.getCmp('complex_first').el.replaceCls('x-form-simplex', 'x-form-complex');
                }
                break;
        case 2: if(val==0) {
                    Ext.getCmp('complex_second').el.replaceCls('x-form-complex', 'x-form-simplex');
                } else {
                    Ext.getCmp('complex_second').el.replaceCls('x-form-simplex', 'x-form-complex');
                }
                break;
    default: break;
    }

Теперь я достаточно хорошо знаю jQuery, поэтому его можно использовать для сравнения с ExtJS, но что именно делают следующие:

  1. Ext.getCmp('status')
  2. Ext.getCmp('complex_first').el.replaceCls('x-form-complex', 'x-form-simplex');
  3. Ext.getCmp('complex_first').el.replaceCls('x-form-simplex', 'x-form-complex');

Являются ли эти идентификаторы классов / div и что-то в коде или файлах CSS, которые предоставят дополнительную информацию?

0
tonyf 25 Июл 2017 в 17:44
Не могли бы вы опубликовать, на какой версии Ext написано ваше приложение? Это могло быть важно. Вы можете проверить это с помощью Ext.versions в консоли приложения.
 – 
pagep
25 Июл 2017 в 17:46

2 ответа

В приложении Ext JS все на странице, которая является дочерней для Ext.Component (сетки, панели, элементы форм и т. Д.) Регистрируется с помощью static Ext.ComponentManager.

Это обеспечивает простой способ программного извлечения ссылок на эти компоненты и выполнения над ними действий без необходимости выполнять потенциально сложные запросы DOM.

Ext.getCmp () - это псевдоним Ext .ComponentManager.get (), и поэтому в вашем примере Ext.getCmp ('status') получит компонент, который был создан с идентификатором status . Вы сможете найти ссылку на это в кодовой базе.

Компонент только после рендеринга получает Ext.dom.Element, позволяющий взаимодействовать с элементом DOM. Доступ к нему можно получить через .getEl () или напрямую через свойство .el. Объект Element предоставляет дополнительные методы для взаимодействия с DOM, обеспечения кроссбраузерности и т. Д. (В целом эквивалент элемента jQuery)

replaceCls () будет поменяйте местами или добавьте классы в DOM.

Я бы рекомендовал создать пример приложения, чтобы понять основные концепции Ext JS, прежде чем пытаться расшифровать потенциально сложную кодовую базу.

2
jdp80 25 Июл 2017 в 19:21

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

Ext.getCmp ищет Ext.Component по id. Это возвращает экземпляр компонента, который является объектом Ext. Строки, которые ваш код передает этому методу ('status', 'complex_first', 'complex_second'), должны соответствовать id передается компоненту в коде JS. Также это будет идентификатор, присвоенный базовому элементу DOM при рендеринге.

В документации текущей версии для компонента не указано свойство el, однако вы найдете его, если вернетесь к версия 3.4. Он возвращает экземпляр Ext.dom.Element , который является оболочкой для элемента DOM верхнего уровня, представляющего компонент. В настоящее время поддерживаемый способ получить это - вызвать getEl. Но если вы посмотрите на source для текущей версии, вы увидите, что он возвращает свойство .el. Так что это свойство все еще остается за кадром.

replaceCls - это метод Ext.dom.Element, который заменяет один или несколько классов CSS в этом элементе другими классами.

1
Kevin Collins 25 Июл 2017 в 19:23