PDA

View Full Version : Putting lists into form panels and fieldsets



abierbaum
14 Apr 2011, 7:42 AM
I was trying to find a way to get a list into a form panel and more specifically field sets. I wasn't able to find anything but I think I have it working so I wanted to post the code in case anyone else is trying to do this in the future.

The example shows how to have either an embedded list that is scrollable or to have a non-scrollable list and rely upon the form panel scrolling capability.

I still don't quite like the way the panel looks, it doesn't make it clear that there is a scrollable list in the form. But it seems like a pretty good start.

If anyone has ideas or code to make this better, please let me know.



<html>
<head>
<title>Test App</title>
<link rel="stylesheet" href="../../deps/sencha_touch/resources/css/sencha-touch.css" type="text/css"/>
<script type="text/javascript" src="../../deps/sencha_touch/sencha-touch-debug-w-comments.js"></script>

</head>
<body>
<script type="text/javascript">
/**
* Based upon: http://www.sencha.com/forum/showthread.php?128448
*/

var scrollable_list = false;
var num_contacts = 8;
var num_sections = 4;

Ext.regApplication({
launch: function() {

Ext.regModel('Contact', {
fields: ['name']
});
data = []
for(var x=0; x<num_contacts; x++)
{ data.push({name: String(x)}); }

Ext.regStore('contacts', {
model: 'Contact',
data: data
});
var all_items = [];
for(var i=0; i<num_sections; i++)
{
all_items.push({
xtype: 'fieldset',
title: 'section',
instructions: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet accumsan mauris, vitae suscipit est congue eget.',
items: [
{
xtype: 'textfield',
label: 'name',
placeHolder: 'bob',
flex: 0
},
{
//flex: 1,
scroll: (scrollable_list ? 'vertical' : false),
xtype: 'list',
store: 'contacts',
itemTpl: '{name}',
height: (scrollable_list ? 200 : undefined),
onItemDisclosure: function() {console.log('selected'); }
},
{
xtype: 'togglefield',
label: 'toggle'
}
]
});
}

new Ext.form.FormPanel({
fullscreen: true,
scroll: 'vertical',
layout: {
type: 'vbox',
//padding: '10',
align: 'stretch'
},
items: all_items
});
}
});
</script>
</body>
</html>