Создание представления в Sencha Touch

Question

Я начал работать на Сенча touch неделю назад, и я до сих пор не могу понять, как создать представление. Я хочу создать текстовое поле и listView. Список текстовых полей можно просмотреть ниже. Я могу показать ListView или текстовое поле, поскольку я могу расширить только Ext.panel или Ext.List.

Пожалуйста, помогите. Пожалуйста, поделитесь ссылкой, в которой рассказывается о создании просмотров в Sencha touch.

Ext.define('TrainEnquiry.view.SearchTrains', { 
extend: 'Ext.Panel', 
alias: "widget.searchtrains", 
requires: [ 'Ext.dataview.List','Ext.form.FieldSet','TrainEnquiry.store.Homes'], 
config: { 
    title: 'Train Enquiry', 
    items: [ 
     { 
       xtype: 'fieldset', 
       style:'width:70%; margin:10px', 
       padding: '10px', 
       items: [ 
        { 
         xtype: 'textfield', 
         placeHolder: 'Username', 
         itemId: 'userNameTextField', 
         name: 'userNameTextField', 
         required: true 
        } 
       ] 
      },{ 
         xtype: 'homepagelist', 
         style: 'margin-Top:100px', 
         config: { 
          itemTpl: '<div class="myContent">'+ 
            '<div><b>{status}</b> </div>' + 
            '</div>', 
          store: 'Homes', 

          onItemDisclosure: true 
         } 
       } 
      ] 
     } 





}); 

Answer 1

Показаны list взгляды, когда вы также используете содержащий элемент (вроде panel) является одним из самых сложных вещей в Сенча, на мой взгляд. Это можно сделать, но вы должны установить свойство layout: 'fit' на панели. Вам также понадобится привязать ваш набор полей к вершине (если вы хотите его наверху и, вероятно, превратите этот простой атрибут title в вид titlebar внутри панели. и некоторый код для вас ниже:

Ext.Viewport.add({ 
    xtype: 'panel', 
    layout: 'fit', 
    items: [ 
    { 
     xtype: 'titlebar', 
     title: 'Train Enquiry', 
     docked: 'top' 
    }, 
    { 
     xtype: 'fieldset', 
     docked: 'top', 
     items: [ 
     { 
      xtype: 'textfield', 
      placeHolder: 'Username', 
      itemId: 'userNameTextField', 
      name: 'userNameTextField', 
      required: true 
     } 
     ] 
    }, 
    { 
     xtype: 'list', 
     itemTpl: '<div class="myContent">'+ 
       '<div><b>{name}</b> </div>' + 
       '</div>', 
     data: [ 
     { name: 'Item 1' }, 
     { name: 'Item 2' }, 
     { name: 'Item 3' }, 
     { name: 'Item 4' } 
     ] 
    } 
    ] 
}); 

(Кстати в следующий раз продолжать поиски, это вопрос/ответ, который, скорее всего, помогли бы вам больше всего: sencha don't seeing the list in a panel)

Answer 2

1. Избегайте использования inline styling.

2. Если вы хотите, чтобы полевой набор всегда находился в верхней части основной панели и список для прокрутки, используйте layout:'fit' в конфигурации основной панели и добавьте docked: 'top' в конфигурацию fieldset.

3. Если вы хотите, оба из них для прокрутки, удалить основную раскладку панели (которая будет принимать layout:'auto'), положить scrollable:true в главной панели конфигурации и добавить scrollable:false в списке конфигурации. Как это:

   config: { 
       title: 'Train Enquiry', 
       scrollable : true, 
       items: [{ 
        xtype: 'fieldset', 
        items: [{ 
         xtype: 'textfield', 
         placeHolder: 'Username', 
         itemId: 'userNameTextField', 
         name: 'userNameTextField', 
         required: true 
        }] 
       },{ 
         xtype: 'homepagelist', 
         scrollable: false, // no scrolling for the list 
         config: { 
         itemTpl: '<div class="myContent">'+ 
            '<div><b>{status}</b> </div>' + 
            '</div>', 
         store: 'Homes', 
         onItemDisclosure: true 
         } 
        }] 
       } 
   

Получить код здесь: http://www.senchafiddle.com/#x8rZo#fRzwt