2013년 10월 17일 목요일

Rendering the results in a combobox

1. Define an Issue Model:
Ext.define('Issue', {
extend: 'Ext.data.Model',
fields: ['id', 'raisedBy', 'title', 'body', 'status']
});

2. Create a store and add some data for local loading:
var store = Ext.create('Ext.data.Store', {
model: 'Issue',
data: [{
id: 1,
raisedBy: 'Joe',
title: 'Registration Form Not Emailing User',
body: 'The registration email is not being sent to users
upon regisration.',
status: 'Open'
}, {
id: 2,
raisedBy: 'John',
title: 'Account Details Loading Issue',
body: 'The account details page is not loading data from
the server.',
status: 'Closed'
}, {
id: 3,
raisedBy: 'Fred',
title: 'Account Details Missing Email Field',
body: 'The account details page is missing a field to
allow the user to update their email address.',
status: 'Open'
}]
});

3. Add the combobox to a form panel and customize the combo's list through Ext.
view.BoundList (accessible through the listConfig config option):
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Custom ComboBox Results',
width: 500,
autoHeight: true,
bodyPadding: 10,
items: [{
xtype: 'combobox',
fieldLabel: 'Select Issue',
displayField: 'title',
store: store,
queryMode: 'local',
anchor: '100%',
listConfig: {
getInnerTpl: function(){
return '

{title} ({status})

' +
'
Reported by

{raisedBy}
' +'{body}';
}
}
}],
renderTo: Ext.getBody(),
style: 'margin: 50px'
});

댓글 없음:

댓글 쓰기