More accessible dropdowns menus?

[justsomeguy]

Simple variable? You mean where it posts to?

I mean what is it, where is it defined? You have this: simple.getForm().getEl().dom.action = '/JSPFront/DeviceServlet'; simple.getForm().getEl().dom.method = 'POST'; simple.getForm().submit();But I don't see simple defined anywhere. getForm is a method on a formpanel though.

[Kingy]

getform? is that a way I can get the drop downs to submit but also treat the form as a normal form?Because I'd like it to work without having to do an entire form from scratch and retain what I have. I have the code at work. Is it neccessary to have an extjs form to submit them?

[justsomeguy]

getForm is a method on the Ext.form.FormPanel class. It returns the form that the formpanel contains.

getForm() : Ext.form.BasicFormProvides access to the Form which this Panel contains.Parameters:None.Returns:Ext.form.BasicFormThe Ext.form.BasicForm Form which this Panel contains.

This conversation is going in a weird direction though. You originally posted this code:

simple.getForm().getEl().dom.action = '/JSPFront/DeviceServlet';simple.getForm().getEl().dom.method = 'POST';simple.getForm().submit();

My first question was what is the simple variable that you're using in that code. There is an object there called simple that you're trying to use, and I don't see that object defined anywhere. Since you're trying to call simple.getForm I thought that simple might be a FormPanel, because FormPanel has a method defined called getForm. So I'm wondering how you are trying to use the code above. I'm not trying to suggest anything at this point, I'm just trying to understand how you're using the code you posted.Ext does have great support for forms. It makes both client-side and server-side validation easy, error messages show up using tooltips or highlighting the fields with errors, etc. I have a login form for an application that I create with this:

var login_frm = new Ext.FormPanel({	  labelWidth: 75,	  labelAlign: "right",	  bodyStyle: "background: transparent; margin-bottom: 10px;",	  border: false,	  autoHeight: true,	  anchor: "100%",	  url: "io.php",	  id: "login_form",	  defaults: {		xtype: "textfield",		allowBlank: false,		width: 150	  },	  items: [		{		  xtype: "panel",		  border: false,		  anchor: "100%",		  bodyStyle: "background: transparent; margin-bottom: 20px;",		  html: "<div>Please enter your username and password below to log in.</div>"		},		{		  id: "username",		  fieldLabel: "Username",		  name: "username"		},		{		  id: "password",		  fieldLabel: "Password",		  inputType: "password",		  name: "password"		}	  ],	  buttons: [		{		  text: "Log In",		  formBind: true,		  scope: this,		  handler: submit_login		},		{		  text: "Register",		  scope: this,		  handler: show_reg		}	  ]	});

The submit_login function looks like this. This code will check if the form is valid (client-side, if it's not valid it will automatically highlight invalid fields), it will send an AJAX submission to the page I specified (io.php), and specifies what to do if the submission succeeds or fails. If it succeeds then my application just refreshes the page, if it fails then it runs a common failure function to show the error message from the server. It will also show a little popup box with a progress bar while it sends the AJAX request. And to top that off, the form itself is in a little floating window that you can drag around the page or resize or whatever.

var submit_login = function()  {	var login_frm = Ext.getCmp("login_form");	if (login_frm.getForm().isValid())	  login_frm.getForm().submit({		method: "POST",		waitTitle: "Connecting",		waitMsg: "Sending Credentials...",		url: "io.php",		scope: this,		params: {page_mode: "login"},		success: function(frm, act)		{		  window.location.reload();		},		failure: this.submit_failure	  });	else	{	  Ext.Msg.alert("Warning", "Please fill out all required fields.");	}  }

[Kingy]

Right I see I think that 'simple' variable is me trying a little snippet from an example for forgetting to edit that out at the time. =_=But I see you suggest that remaking the form in extjs is probably an ideal idea if I want to get this working at least right? :)So it'll be quite quick for me to build it up from scratch applying it with the jsp I had before?

[justsomeguy]

With some things in Ext you can create an Ext component from existing HTML markup, like you can create the ComboBox with an existing <select> element. You can't do the same with forms, forms are too complex to do that. Ext wouldn't be able to figure out fields and labels and buttons and things with an existing structure, there are too many possibilities. It would be best to create a form from scratch with Ext and go from there. If you want your options in your dropdown to come from your JSP page then you can set up an AJAX request to go get that data and populate the dropdown. You can have that request go out when the form gets loaded, or wait until the user clicks on the dropdown to load it.An example I have for that is a form I have where a user can search based on location, where the location is a dropdown that they choose from. This is the config for the actual combobox:

				{				  xtype: "combo",				  width: 380,				  store: loc_store,				  hideLabel: true,				  allowBlank: true,				  emptyText: "(any)",				  editable: false,				  forceSelection: true,				  hiddenName: "location",				  mode: "remote",				  triggerAction: "all",				  typeAhead: true,				  displayField: "name",				  valueField: "id"				}

So it's a combobox, its 380px wide, it has no form label (I have a label for it elsewhere), it's OK if the field is blank, it's not editable (you have to choose an existing option), the name that gets submitted with the form is "location", remote mode means it gets its options from an AJAX request, trigger action tells it to display every option when they pull it down, typeahead means they can start typing a value and it will fill the rest in, and the displayfield and valuefield tell it which fields from the data store to use for the value and text of each option. The data store is the key part, there's an option called store that tells it to use something called loc_store. The store is the data store for the combobox, it contains the records to show in the box. Other things have data stores also, like grids or tables or trees or whatever. This combobox has a data store that is defined like this:

	var loc_store = new Ext.data.JsonStore({	  url: "io.php",	  baseParams: {page_mode: "get_location_list"},	  root: "data",	  fields: ["id", "name", "address1", "address2", "city", "state", "zip", "phone", "notes", "loc_code"]	});

So loc_store is a JsonStore, the data that comes back from the server is JSON data. The URL for the page to load data from is "io.php" and when it sends the request it sends a form parameter ('get', in this case) called "page_mode" with the value "get_location_list". So the PHP page checks if $_GET['page_mode'] is "get_location_list". If so, it creates an array of locations with all the fields you see listed there, and saves that array in an element called "data". The actual response from the PHP page looks like this (in JSON format):

{  "success":true,  "errors":[],  "data":[	{	  "id":2,	  "name":"Choice",	  "address1":"10750 Columbia Pike",	  "address2":"",	  "city":"Silver Spring",	  "state":"MD",	  "zip":"20901",	  "phone":"301-592-5000",	  "notes":"Go to the front desk and ask for the learning center",	  "loc_code":"SS"	},	{	  "id":1,	  "name":"TC",	  "address1":"126 N Black Canyon Hwy",	  "address2":"Ste 126",	  "city":"Phoenix",	  "state":"AZ",	  "zip":"85021",	  "phone":"602-555-5555",	  "notes":"",	  "loc_code":"PHX"	}  ]}

You can see that there's an element called "data" that contains the 2 locations to show in the dropdown. The locations have fields called "name" and "id", which are the fields defined in the combobox to use for value and label.So since this data store is bound to the combo box, and since the mode is set to remote, when the form loads there's a combo box there that says "Location:". When you click on the combo box, you see a little loading indicator while it goes out and asks the server for the location data, and when the data comes back you see the combo box get populated. According to Firebug, the whole process took 59ms to finish. You can set the same type of thing up where your application just asks for data from a JSP page instead of PHP.

[Kingy]

Right I see, hopefully I should be able to build up enough to show you tomorrow. The form I'm working on is more than 2 combo boxes but that was the only concern before, I'll have to return a couple of values and have a save and reset button but I think if I try to follow this example and adapt it, it should kinda unravel itself. I'll definately have a crack at doing this from scratch, feels like I've been going on a wild goose chase now that I've realised all this. I'm very determined to crack this, and looks like I'll have to go through extjs form stuff in more detail as that's the way it's heading. I'll be letting you know the progress tomorrow, you'll get a gold medal for this.

[Kingy]

This is what I got so far, this is a separate test page as I'm trying to build it up. I understore store: is obviously to say where to look up values, trying to connect this with what I posted before.My superior suggested that I can maybe save myself the trouble by making a javascript function with the extjs combo box so once clicked it tells a copy of the original drop down to submit.That makes sense to me in principle if I want to cut down the work, but because the extjs combobox doesn't update the page naturally as it doesn't have a function by itself, I fail to see how his suggestion will work realistically..:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><!-- css --><link rel="stylesheet" type="text/css" href="ext-2.2/ext-2.2/resources/css/ext-all.css" /><!-- extjs -->   <script type="text/javascript" src="ext-2.2/ext-2.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-2.2/ext-2.2/ext-all.js"></script><script type="text/javascript">Ext.onReady(function() {      Ext.QuickTips.init();   // message target    Ext.form.Field.prototype.msgTarget = "side";         var myForm = new Ext.form.FormPanel({      renderTo:"form1",      title:"Please select a category and device",	  url:'/DEMSJSPFront/DeviceServlet',      width:425,      frame:true,      items: [	        new Ext.form.ComboBox({			fieldLabel: 'Category',			hiddenName: 'category',			width:180,			allowBlank:false,					displayField:'category',			typeAhead: false,			mode: 'local',			triggerAction: 'all',			emptyText:'Select a category...',			selectOnFocus:true,        }),					new Ext.form.ComboBox({			fieldLabel: 'Device',			hiddenName: 'device',			width:180,			allowBlank:false,					displayField:'device',			typeAhead: false,			mode: 'local',			triggerAction: 'all',			emptyText:'Select a device...',			selectOnFocus:true,        }),             new Ext.form.TextField({            id:"paraname",            fieldLabel:"Parameter Name",            width:275,            allowBlank:false,			disabled: true,            blankText:"Please select a category and device"         }),         new Ext.form.TextField({            id:"paravalue",            fieldLabel:"Parameter Value",            width:275,            allowBlank:false,			disabled: true,            blankText:"Please select a category and device"         })      ],      buttons: [         {text:"Save"},         {text:"Reset"}       ]   });});</script></head><body><form id="form1"></form></body></html>

[justsomeguy]

My superior suggested that I can maybe save myself the trouble by making a javascript function with the extjs combo box so once clicked it tells a copy of the original drop down to submit.That makes sense to me in principle if I want to cut down the work, but because the extjs combobox doesn't update the page naturally as it doesn't have a function by itself

I'm not quite sure what you mean by that. A combobox doesn't submit, a combobox is part of a form and a form submits. In terms of Ext, a form is wrapped in a formpanel and you add your form elements (such as a combobox) as items in the formpanel, which get rendered automatically with labels, validation, etc. A combobox is Ext is not an HTML select object, it's actually a regular text field with a floating div used for the dropdown options with the trigger button added to show the list of options. But if you use it in an Ext form it submits like any other select object, you actually have more control over it vs. a normal select.I'm not sure what you mean by the combobox doesn't update the page because it doesn't have a function by itself. I don't understand what you mean by that. A combobox has a ton of events defined on it and you can add a custom handler to any of those events. It's got events like beforeselect, blur, change, expand, focus, keypress, select, etc, and you can have whatever function you want run when any event happens. Your event handler can do whatever you want, you can have it change whatever you want on the page or run any other function.

[Kingy]

Right his logic is the original drop downs submit properly and changes the page elements accordingly like load the next drop down and update textfields.He says why not use the extjs dropdowns and hide a copy of the original drop downs in the form. So in a nutshell I think he's suggesting why not tell the extjs combobox to tell the original drop down to do it's job essentially. *scratches head* O_oI'm sure it submits yes as it emulates a drop down but what I meant by it doesn't update the page is. But I'm just unsure at this particular stage how to get bits like below into the script.Because the JS won't read this kind of stuff.<c:forEach var="category" items="${DeviceConfigBean.categories}"><c:choose><c:when test="${category == DeviceConfigBean.selCategory}"><option value="${category}" selected="selected" id="catmenu" onclick="submit();">${category}</option>

[justsomeguy]

You can have the JSP write out Javascript code instead of writing out a list of options for the select element. The JSP could write out code to set up a simple data store, and then you would use that data store as the store for your combobox, which you would put inside a regular Ext formpanel. I don't work with JSP, but it would probably look something like this:

var combo_store = new Ext.data.SimpleStore({  fields: ['cat'],  data : [<c:forEach var="category" items="${DeviceConfigBean.categories}"><c:choose><c:when test="${category == DeviceConfigBean.selCategory}">  "${category}",  ]})

I'm not sure about the syntax for the JSP page, but the goal is to produce a piece of code like this:

var combo_store = new Ext.data.SimpleStore({  fields: ['cat'],  data : [	"category 1",	"category 2",	"category 3"  ]});

If you can produce code like that with your JSP page then you can use that data store as the store for your combo box.

[Kingy]

Thanks a lot again, any sense of direction right now is absolutely wonderful. :)I will attempt to follow your suggestion, I don't work with JSP either, I had to adapt as best as I could because the JSP part is what my superior implemented.So what it feels like for me is, here's the base for a rocket, now build it. >_>[edit]At the moment it's looking like this. I think I built it up logically but hasn't quite done the trick yet. Is it because the JS isn't happy with the JSP bits being inside it?

<%@page language="java" contentType="text/html; charset=ISO-8859-1"	pageEncoding="ISO-8859-1"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><!-- css --><link rel="stylesheet" type="text/css" href="ext-2.2/ext-2.2/resources/css/ext-all.css" /><!-- extjs -->   <script type="text/javascript" src="ext-2.2/ext-2.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-2.2/ext-2.2/ext-all.js"></script><script type="text/javascript">Ext.onReady(function() {      Ext.QuickTips.init();   // message target    Ext.form.Field.prototype.msgTarget = "side";   	var combo_store = new Ext.data.SimpleStore({  	fields: ['cat'],  	data : [	<c:forEach var="category" items="${DeviceConfigBean.categories}">	<c:choose>	<c:when test="${category == DeviceConfigBean.selCategory}">  	"${category}",	</c:when>	<c:otherwise>	"${category}"	</c:otherwise>    </c:choose>	</c:forEach>  	]	});      	var combo_store2 = new Ext.data.SimpleStore({  	fields: ['dev'],  	data : [	<c:forEach var="device" items="${DeviceConfigurationBean.devices}">	<c:choose>	<c:when test="${device.key == DeviceConfigurationBean.selDevice}">  	"${device.key}",	</c:when>	<c:otherwise>	"${device.key}"	</c:otherwise>    </c:choose>	</c:forEach>  	]	});      	var field_store = new Ext.data.SimpleStore({  	fields: ['para'],  	data : [	<c:if test="${DeviceConfigurationBean.deviceItems != null && DeviceConfigurationBean.deviceItemsSize > 0}">	<c:forEach var="item" items="${DeviceConfigurationBean.deviceItems}">	<c:if test="${!item.value.complexity }">	<c:choose>	<c:when test="${item.value.writable}">	"${item.key.localPart}",	"${item.value.value}"	</c:when>	<c:otherwise>	<c:out value="${item.value.value}" />	</c:otherwise>	</c:choose>	</c:if>	</c:forEach>	</c:if>  	]	});     	   var myForm = new Ext.form.FormPanel({      renderTo:"form1",      title:"Please select a category and device",	  url:'/DEMSJSPFront/DeviceServlet',      width:425,      frame:true,      items: [	   		        new Ext.form.ComboBox({			fieldLabel: 'Category',			hiddenName: 'category',			width:180,			allowBlank:false,			store: combo_store,			displayField:'category',			typeAhead: false,			mode: 'local',			triggerAction: 'all',			emptyText:'Select a category...',			selectOnFocus:true,        }),					new Ext.form.ComboBox({			fieldLabel: 'Device',			hiddenName: 'device',			width:180,			allowBlank:false,			store: combo_store2,			displayField:'device',			typeAhead: false,			mode: 'local',			triggerAction: 'all',			emptyText:'Select a device...',			selectOnFocus:true,        }),             new Ext.form.TextField({            id:"paraname",            fieldLabel:"Parameter Name",            width:275,            allowBlank:false,			store: field_store,			disabled: true,            blankText:"Please select a category and device"         }),         new Ext.form.TextField({            id:"paravalue",            fieldLabel:"Parameter Value",            width:275,            allowBlank:false,			store: field_store,			disabled: true,            blankText:"Please select a category and device"         })      ],      buttons: [         {text:"Save"},         {text:"Reset"}       ]   });});</script></head><body><form id="form1"></form></body></html>

[justsomeguy]

What does the Javascript code look like after you run the JSP? If the JSP code is getting executed then Javascript won't see any JSP code.

[Kingy]

Right I'm afraid I can only give you the generated code tomorrow as I'm checking from home right now. *sigh*I see what you mean, I just didn't know before if the JSP code generated away even in the JavaScript. Will let you now tomorrow. [edit]I see the problem here, the options disappear when generated so essentially the comboboxes are told to have nothing in their list. Hmm how to fix this..

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><!-- css --><link rel="stylesheet" type="text/css" href="ext-2.2/ext-2.2/resources/css/ext-all.css" /><!-- extjs -->  <script type="text/javascript" src="ext-2.2/ext-2.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-2.2/ext-2.2/ext-all.js"></script><script type="text/javascript">Ext.onReady(function() {     Ext.QuickTips.init();  // message target Ext.form.Field.prototype.msgTarget = "side";    var combo_store = new Ext.data.SimpleStore({  fields: ['cat'],  data : [   ] });    var combo_store2 = new Ext.data.SimpleStore({  fields: ['dev'],  data : [   ] });    var field_store = new Ext.data.SimpleStore({  fields: ['para'],  data : [   ] });     var myForm = new Ext.form.FormPanel({  renderTo:"form1",  title:"Please select a category and device",  url:'/DEMSJSPFront/DeviceServlet',  width:425,  frame:true,  items: [      new Ext.form.ComboBox({  fieldLabel: 'Category',  hiddenName: 'category',  width:180,  allowBlank:false,  store: combo_store,  displayField:'category',  typeAhead: false,  mode: 'local',  triggerAction: 'all',  emptyText:'Select a category...',  selectOnFocus:true,  }),    new Ext.form.ComboBox({  fieldLabel: 'Device',  hiddenName: 'device',  width:180,  allowBlank:false,  store: combo_store2,  displayField:'device',  typeAhead: false,  mode: 'local',  triggerAction: 'all',  emptyText:'Select a device...',  selectOnFocus:true,  }),     new Ext.form.TextField({  id:"paraname",  fieldLabel:"Parameter Name",  width:275,  allowBlank:false,  store: field_store,  disabled: true,  blankText:"Please select a category and device"  }),  new Ext.form.TextField({  id:"paravalue",  fieldLabel:"Parameter Value",  width:275,  allowBlank:false,  store: field_store,  disabled: true,  blankText:"Please select a category and device"  })  ],  buttons: [  {text:"Save"},  {text:"Reset"}   ]  });});</script></head><body><form id="form1"></form></body></html>

[edit]How very interesting, setting up the first part like this doesn't populate the combobox either..

var combo_store = new Ext.data.SimpleStore({  	fields: ['cat'],  	data : [  	"category",	"category2"	  	]	});    

[Kingy]

Hmm no solution?