PDA

View Full Version : [CLOSED] How to submit the DropDownField value in formpanel?



macroe
Aug 19, 2014, 11:16 AM
Hi,
I have a question about DropDownField: I want the dropdownfield which in a FormPanel to submit the value to my controller, but it always submit the Text, how can I do?

Here is the project: EDIT: removed link to .zip file. Please post code samples inline.

And here is the code.



Index.cshtml


@using Ext.Net;
@using Ext.Net.MVC;

@model DropdownFieldTest.Models.ExtNetModel

@{
Layout = null;
var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
<title>Ext.NET MVC Sample</title>

</head>
<body>
@(Html.X().ResourceManager())

<script>
function submitData(sender) {
console.log(arguments);
var me = this;
var form = sender.up('form');
if (!form.isValid()) {
return;
}
form.submit({
waitTitle: 'wait',
waitMsg: 'msg',
method: 'POST',
success: function (form, action) {
alert(action.result && (action.result.msg || action.result.message));
}
});
Ext.net.Notification.show({
title: 'test',
html: 'want to submit the value:<br />' + App.message.getValue()
});
}
</script>


@(Html.X().FormPanel()
.Title(Model.Title)
.Height(215)
.Width(350)
.Frame(true)
.Collapsible(true)
.Cls("box")
.BodyPadding(5)
.DefaultButton("Button1")
.Layout(LayoutType.Anchor)
.DefaultAnchor("100%")
.Url(Url.Action("SampleAction"))
.Items(
Html.X().DropDownField()
.ID("message")
.FieldLabel("Tree")
.Mode(DropDownMode.ValueText)
.Editable(false)
.Width(300)
.Padding(10)
.TriggerIcon(TriggerIcon.SimpleArrowDown)
.Component(cp =>
{
cp.Add(
Html.X().TreePanel()
.Store(
X.TreeStore()
.Proxy(
Html.X().AjaxProxy().Url(Url.Action("GetTree"))
)
)
.ID("tpTree")
.Height(300)
.Shadow(false)
.UseArrows(true)
.AutoScroll(true)
.Header(false)
.RootVisible(false)
.Listeners(ls =>
{
ls.ItemClick.Handler = @"this.dropDownField.setValue(record.data.id, record.data.text, true);";
})
);
})
)
.Buttons(Html.X().Button()
.ID("Button1")
.Text("Submit")
.Icon(Icon.Accept)
.OnClientClick("submitData")
)
)

</body>
</html>


Controller


using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using DropdownFieldTest.Models;

namespace DropdownFieldTest.Controllers
{
public class ExtNetController : Controller
{
public ActionResult Index()
{
ExtNetModel model = new ExtNetModel()
{
Title = "Welcome to Ext.NET",
TextAreaEmptyText = ">> Enter a Message Here <<"
};

return this.View(model);
}

public StoreResult GetTree(string node)
{
NodeCollection nodes = new Ext.Net.NodeCollection();

if (!string.IsNullOrEmpty(node))
{
for (int i = 1; i < 6; i++)
{
Node asyncNode = new Node();
asyncNode.Text = "text-"+node + i;
asyncNode.NodeID = "value-" + node + i;
//asyncNode.Checked = false;
nodes.Add(asyncNode);
}

for (int i = 6; i < 11; i++)
{
Node treeNode = new Node();
treeNode.Text = "text-" + node + i;
treeNode.NodeID = "value-" + node + i;
treeNode.Leaf = true;
//treeNode.Checked = false;
nodes.Add(treeNode);
}
}

return this.Store(nodes);
}

public ActionResult SampleAction(string message)
{
X.Msg.Notify(new NotificationConfig
{
Icon = Icon.Accept,
Title = "Working",
Html = message
}).Show();

return this.Direct();
}
}
}

Daniil
Aug 19, 2014, 1:45 PM
Hi @macroe,

Please try this setting for the FormPanel.

.JsonSubmit(true)

macroe
Aug 20, 2014, 3:14 AM
Yes! It's worked! But, why diffrent value get form jsonsubmit and normal submit ? It makes me confused.

Daniil
Aug 20, 2014, 4:36 AM
Yes, the name of that config option also confuses me. Looking at the ExtJS sources I see that it is passed to a .getValues() call as a "useDataValues" parameter.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-method-getValues

Maybe, just a wrong name for the config option. Not sure.

macroe
Aug 20, 2014, 12:56 PM
OK, thank you very much. The thead can be close now.