PDA

View Full Version : How to get add/remove buttons next to field items but outside fieldset styling



abierbaum
22 Dec 2010, 5:34 AM
I want to create a form panel that is similar to what you see in contacts on the iPhone. Where you can see a list of fields and then right beside them there is a button to click on to remove or add the item referenced by that field. I have gotten close, but I can't seem to get the button to be beside the field. The best I can do puts it inside the styling.

This is what I get:

http://www.webpagescreenshot.info/img/652363-1222201033233pm.png

Here is the code I am using:



<html>
<head>
<title>Del Form</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">
Ext.setup({
onReady: function() {

var name_field = {
xtype: 'textfield',
label: 'name',
name: 'name',
placeHolder: 'name here',
flex: 3
};
var del_btn = {
xtype: 'button',
text: 'Delete',
ui: 'decline-small',
margin: 5
};

var field_item = {
xtype: 'panel',
layout: {
type: 'hbox',
pack: 'justify',
},
items: [del_btn, name_field ]
}

var panel = new Ext.form.FormPanel({
fullscreen: true,
scroll: 'vertical',
items: [
{
xtype: 'fieldset',
instructions: "Edit the stuff in this set of fields",
title: 'Key Fields',
items: [ field_item, field_item, field_item, field_item, field_item]
},
{
xtype: 'fieldset',
instructions: "Edit the stuff in this set of fields",
title: 'Key Fields',
items: [ field_item, field_item, field_item, field_item, field_item]
},
{
xtype: 'fieldset',
instructions: "Edit the stuff in this set of fields",
title: 'Key Fields',
items: [ field_item, field_item, field_item, field_item, field_item]
}
],
});
}
});
</script>
</body>
</html>


Any ideas how to make this look better and get the button on the outside?