Блог

Главная - Вопросы по программированию - Оптимизация кода ExtJS HTML / DOM

Оптимизация кода ExtJS HTML / DOM

#html #extjs4.2

#HTML #extjs4.2

Вопрос:

Потратил уже много ресурсов, чтобы выяснить, как оптимизировать HTML-код ExtJS. У меня есть простой выпадающий список с меткой, и extjs выкидывает на страницу это:

 <tr role="presentation" id="inputs[1].TypeId-inputRow" class="x-form-item-input-row">
    <td role="presentation" id="inputs[1].TypeId-labelCell" style="" valign="top" halign="left" width="88" class="x-field-label-cell">
        <label 
        id="inputs[1].TypeId-labelEl" 
        for="inputs[1].TypeId-inputEl" 
        class="x-form-item-label x-unselectable x-form-item-label-left" 
        style="width:83px;margin-right:5px;" unselectable="on">

        Placement ID:
    </label>
    </td>
    <td role="presentation" class="x-form-item-body x-form-trigger-wrap-focus" id="inputs[1].TypeId-bodyEl" colspan="2">
    <table id="inputs[1].TypeId-triggerWrap" class="x-form-trigger-wrap" cellpadding="0" cellspacing="0" style="table-layout: auto;">
        <tbody>
        <tr>
            <td id="inputs[1].TypeId-inputCell" class="x-form-trigger-input-cell">
                    <div class="x-hide-display x-form-data-hidden" role="presentation" id="ext-gen1311">
            </div>
            <input 
                id="inputs[1].TypeId-inputEl" 
                type="text" 
                class="x-form-field x-form-required-field x-form-text x-trigger-noedit x-form-focus x-field-form-focus x-field-default-form-focus" 
                autocomplete="off" 
                            name="inputs[1].TypeId" 
                placeholder="DATA SOURCE" 
                readonly="readonly" 
                aria-invalid="false" 
                data-errorqtip="" 
                style="width: 137px;">
            </td>
                    <td valign="top" class=" x-trigger-cell x-unselectable" style="width:22px;" id="ext-gen1310">
            <div class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-first" role="button" id="ext-gen1309">
            </div>
            </td>
        </tr>
        </tbody>
    </table>
    </td>
</tr>

Как я мог бы изменить таблицы внутри таблиц только для простого xtype: ‘combobox’?
У меня сотни таких на странице, это сильно замедляет работу, потому что очень тяжелый HTML-код.

это можно было бы сделать с помощью простого div с плавающим на нем, почему ExtJS отображает весь этот табличный код?

Комментарии:

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

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

Ответ №1:

Если вам нужна / нужна более простая разметка в Ext, единственный способ — это закодировать свой собственный компонент, где вы можете определить более простой.

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