Sencha Touch 2 Список макетов с панелью инструментов

Question

У меня есть список, который я использую с панелью инструментов, закрепленной на верхней части. Этот список также содержит indexBar. Панель инструментов, похоже, выталкивает список вниз. Поэтому indexBar не выравнивается по вертикали правильно, и когда я просматриваю список и добираюсь до последнего элемента, он не отображается должным образом. Кто-нибудь знает, как правильно это выложить, поэтому панель инструментов не выводит список вниз? Вот мой код:

app.customerList = Ext.define('CustomerList', { 
    constructor: function() {   
     this.listComponent = Ext.create('Ext.List', { 
      itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
      store: customerListStore, 
      id: 'customer_list', 
      grouped: true, 
      indexBar: true, 
      listeners: { 
       itemtap: { 
        fn: function (list, index, item, evt) { 

        }, 
        element: 'element' 
       } 
      } 
     }); 

     this.listWrapper = Ext.create('Ext.Panel', { 
      fullscreen: true, 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'toolbar', 
        docked: 'top', 
        title: 'Customers', 
        items: [ 
         { 
          xtype: 'button', 
          text: 'Home', 
          ui: 'back', 
          listeners: { 
           tap: { 
            fn: function() { 

            }, 
            element: 'element' 
           } 
          }        
         } 
        ] 
       }, 
       this.listComponent 
      ] 
     }); 

    } 
}); 

Как вы можете видеть, я получаю свои данные из магазина. Я смог исправить это на iPhone, указав в списке правило css внизу: 38px, но я знаю, что это взломать, поэтому я бы предпочел не делать этого таким образом. Я смотрел видео Sencha в списках, и они говорят об этой точной дилемме. Их решение состоит в том, чтобы поместить список в оболочку с панелью инструментов, закрепленной в обертке. Так что я сделал это, но я все еще не могу настроить его так, как должен.

Answer 1

Это, похоже, проблема с вашим кодом, а не ошибка с каркасом.

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

Вот некоторые заметки о том, что вам нужно изменить для того, чтобы это произошло:

1. При определении нового класса с помощью Ext.define, вам не нужно, чтобы установить его в качестве ссылки (app.customerList в вашем case), поскольку ссылка создается автоматически с использованием первой переданной строки. Так что в вашем случае, вы делаете это:

   app.customerList = Ext.define('CustomerList', { ... }); 
   

   Однако, вы должны просто сделать это:

   Ext.define('app.customerList', { ... }); 
   

   После определения, вы можете затем использовать этот класс, где вам нравится, как это:

   `var view = Ext.create('app.customerList'); 
   

   Я хотел бы также отметить, что использование app.customerList не то, что Сенч предлагает вам сделать приветы именования, так что я советую вам взглянуть на их Class System Guide, когда у вас есть время, чтобы узнать, как следует назвать вещи.

2. Когда вы определяете класс, 99% времени, необходимого для расширения другого класса. В вашем случае вы должны расширить Ext. Container, так как мы хотим создать внешний внешний компонент (который вы определили как this.listWrapper), который включает в себя список и закрепленную панель инструментов.

3. При расширении класса в Sencha Touch вы не должны переопределять метод constructor, вместо этого вы должны использовать метод initialize. В этом методе мы добавим добавленную панель инструментов и наш список. Вот то, что он должен выглядеть следующим образом:

   initialize: function() { 
       this.callParent(); 
   
       this.listComponent = Ext.create('Ext.List', { 
        itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
        store: customerListStore, 
        id: 'customer_list', 
        grouped: true, 
        indexBar: true, 
        listeners: { 
         itemtap: { 
          fn: function (list, index, item, evt) { 
   
          }, 
          element: 'element' 
         } 
        } 
       }); 
   
       this.add([ 
        { 
         xtype: 'toolbar', 
         docked: 'top', 
         title: 'Customers', 
         items: [ 
          { 
           xtype: 'button', 
           text: 'Home', 
           ui: 'back', 
           listeners: { 
            tap: { 
             fn: function() { 
   
             }, 
             element: 'element' 
            } 
           } 
          } 
         ] 
        }, 
        this.listComponent 
       ]); 
   } 
   

   Есть несколько вещей, чтобы помнить этот фрагмент:

   • Вам всегда необходимо вызвать родительский класс в initialize, как родитель может быть делая некоторую логику, которая нам нужна. Вы можете сделать это, просто позвонив this.callParent();.
   • Сначала мы определяем наш listComponent, который мы позже вставим в этот контейнер app.customerList.
   • Далее мы вызываем this.add с массивом объектов. Этот метод вставляет наши элементы в наш новый класс контейнера при его инициализации. Первым объектом, который мы передаем, является конфигурация нашей панели инструментов, которая совпадает с вашим кодом. А в качестве второго объекта в массиве мы передаем listComponent.

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

   config: { 
       layout: 'fit' 
   } 
   

   Пожалуйста, помните, что этот конфигурационный блок используется только при определении новых классов с использованием Ext.define. Если вы используете Ext.create или передаете новый компонент в качестве объекта (как это было сделано выше), вам не нужно помещать его в этот специальный объект.

5. И, наконец, вам не нужно использовать конфигурацию fullscreen. Вместо этого мы можем просто создать экземпляр нашего нового класса и добавить его непосредственно в Ext.Viewport.

   var customerList = Ext.create('CustomerList'); 
   Ext.Viewport.add(customerList); 
   
   // add this point you can reference the listComponent without the customerList like this: 
   console.log(customerList.listComponent.getStore()); 
   

И окончательный код для пользовательского класса:

Ext.define('CustomerList', { 
    extend: 'Ext.Container', 

    config: { 
     fullscreen: true, 
     layout: 'fit' 
    }, 

initialize: function() { 
    this.callParent(); 

    this.listComponent = Ext.create('Ext.List', { 
     itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
     store: customerListStore, 
     id: 'customer_list', 
     grouped: true, 
     indexBar: true, 
     listeners: { 
      itemtap: { 
       fn: function (list, index, item, evt) { 

       }, 
       element: 'element' 
      } 
     } 
    }); 

    this.add([ 
     { 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Customers', 
      items: [ 
       { 
        xtype: 'button', 
        text: 'Home', 
        ui: 'back', 
        listeners: { 
         tap: { 
          fn: function() { 

          }, 
          element: 'element' 
         } 
        } 
       } 
      ] 
     }, 
     this.listComponent 
    ]); 
} 
}); 

var customerList = Ext.create('CustomerList'); 
Ext.Viewport.add(customerList); 

// add this point you can reference the listComponent without the customerList like this: 
console.log(customerList.listComponent.getStore()); 

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