2012-04-17 4 views
1

мне нужно создать компонент DataView со следующей структуройСоздание DataItem в DataView Сенча Touch, 2

Structure

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

Ext.define('DEMO.view.product.ListItem', { 
extend: 'Ext.dataview.component.DataItem', 
xtype: 'product-list-item', 
config: { 
    cls: 'product-list-item', 
    dataMap: { 
     getName: { 
      setHtml: 'name' 
     } 
    }, 
    name: { 
     cls: 'x-name', 
     flex: 1 
    }, 
    layout: { 
     type: 'hbox', 
     align: 'left' 
    } 
}, 
applyName: function(config){ 
    return Ext.factory(config, Ext.Component, this.getName()); 
}, 
updateName: function(newName, oldName) { 
    if (newName) { 
     this.add(newName); 
    } 

    if (oldName) { 
     this.remove(oldName); 
    } 
} 

});

+0

как я вижу, если вы не собираетесь создавать любые 'Ext.Component' внутри DataView, то вам нужно использовать только список с масштабированным шаблоном HTML –

+1

Но в списке с масштабированным шаблоном HTML я не могу вставлять кнопки или компоненты текстового поля. Мне нужна вставка 2 кнопки, первая для увеличения, вторая для вычитания количества. Как я это делаю? – sneyder05

ответ

1

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

Ext.define('App.view.UserItem', { 
    extend: 'Ext.dataview.component.DataItem', 
    xtype: 'useritem', 
    config: { 
    cls: 'user-item', 
    firstName: { cls: 'first-name', flex: 1 }, 
    lastName: { cls: 'last-name', flex: 2 }, 
    layout: { type: 'hbox', align: 'center' }, 
    dataMap: { 
     getFirstName: { setHtml: 'firstName' }, 
     getLastName: { setHtml: 'lastName' } 
    } 
    }, 

    applyFirstName: function(config) { 
    return Ext.factory(config, Ext.Component, this.getFirstName()); 
    }, 

    updateFirstName: function(newFirstName, oldFirstName) { 
    if(newFirstName) this.add(newFirstName); 
    if(oldFirstName) this.remove(oldFirstName); 
    }, 

    applyLastName: function(config) { 
    return Ext.factory(config, Ext.Component, this.getLastName()); 
    }, 

    updateLastName: function(newLastName, oldLastName) { 
    if(newLastName) this.add(newLastName); 
    if(oldLastName) this.remove(oldLastName); 
    } 
}); 

Для более подробной информации, пожалуйста, посетите http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/

+0

Я использую этот пример, и я разрабатываю шаблон с помощью DataItem, но имею проблему, вы можете увидеть в этом URL-адресе: [Demo Sencha] (http://demosencha.260mb.org), выполнив следующие шаги: 1. Использовать любой текст в «Usuario» и «Contraseña», без проблем 2. Нажмите кнопку «Entrar» 3. Выберите любой элемент списка, может быть «Alpina» 4. Используйте панель инструментов поиска и введите слово: «Красный ' 5. Введите любое число в текстовое поле 6. Сбросьте фильтр, используя правую кнопку или стирая слово. Если все работает хорошо, число, которое написано, будет в первом элементе («Покер»), номер был «Redds», почему бы не работать? – sneyder05

+0

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

+0

И вам нужно переопределить updateRecord() в вашем DataItem. –

Смежные вопросы