PDA

View Full Version : Form/Post list data



gp40
26 Jan 2011, 8:58 AM
I have a list of products that the user will be able to add/remove from a list. I need to POST that list back to the server. I don’t see any FormPanel elements that will allow me to do this. Is there something that I’m missing or do I have to dynamically add product elements to the form before POST. Thanks!!! /Greg

gp40
27 Jan 2011, 8:36 AM
I could really use some help on this. If I was building a page by hand my list would look something like what is shown below. Any help pointing me in the right direction would be greatly appreciated. Thanks!!! /Greg




<input type="text" name="product[0].name" value="some_val"/>
<input type="text" name="product[0].qty" value="some_val"/>
<input type="text" name="product[1].name" value="some_val"/>
<input type="text" name="product[1].qty" value="some_val"/>
<input type="text" name="product[2].name" value="some_val"/>
<input type="text" name="product[2].qty" value="some_val"/>

gcallaghan
27 Jan 2011, 9:22 AM
It seems you could accomplish this just by posting the products ID's. So you have a list of product models. Each product model has an id, preferably this should be a primary key of the product on the server database. when you post, via a FormPanel or a custom button on a List component (the way I would do it), all you need to do is send the list of id's, The server side code can then get all the product information from those ids.

gp40
27 Jan 2011, 12:26 PM
I understand your point regarding passing product ids verses all product details. I'll need to pass at least product_id and quantity. Your response is encouraging that it can be done. I've been working the FormPanel and I'm unable to get the contents of my list to post. Below is a simplified example that I've been working with. I appologize if I'm a little "thick" but I can't seem to get my head around this. Thanks!!!! /Greg



<script language="javascript">
Ext.regModel('Product', {
fields: ['product', 'quantity']
});

var _store = new Ext.data.Store({
model: 'Product',
data: [
{product: 'Product A', quantity: '5'},
{product: 'Product B', quantity: '10'},
{product: 'Product C', quantity: '15'}
]
});

var _list = new Ext.List( {
activeCls: 'search-item-active',
itemTpl : [
'<div class="search-item">',
'<span>{product} x{quantity}</span>',
'</div>'
],
grouped : false,
indexBar: false,
store: _store
} );

Ext.setup({

onReady: function(){

var _form = new Ext.form.FormPanel( {
scroll: 'vertical',
url: 'index.jsp',
fullscreen: true,
standardSubmit: true,
xtype: 'fieldset',
title: 'XXXX',
dockedItems: [{ xtype:'toolbar',
items: [{
text: 'Submit',
handler: function() {
_form.submit({
url: 'showPost.jsp'
})
}
}]
}],
items:[{
xtype: 'textfield',
name: 'first',
label: 'First Name',
value: 'Joe',
autoCapitalize : true,
required: true,
useClearIcon: true
}, {
xtype: 'textfield',
name: 'last',
label: 'Last Name',
value: 'Someguy',
useClearIcon: true
}, _list ]
} )
}
});
</script>

gp40
27 Jan 2011, 12:36 PM
So, thinking about my issue further I can get my list to post if I make the changes below. Essentially, creating a product index and creating <input type="text" .../> elements in the itemTpl of my list. The result is what I need -- however it still feels like there is a better way. Thanks!!! /Greg



var _store = new Ext.data.Store({
model: 'Product',
data: [
{product: 'Product A', quantity: '5', idx: '0'},
{product: 'Product B', quantity: '10', idx: '1'},
{product: 'Product C', quantity: '15', idx: '2'}
]
});

var _list = new Ext.List( {
activeCls: 'search-item-active',
itemTpl : [
'<div class="search-item">',
'<input type="text" name="products[{idx}].product" value="{product}"/>',
'<input type="text" name="products[{idx}].quantity" value="{quantity}"/>',
'</div>'
],
grouped : false,
indexBar: false,
store: _store
} );