在GXT中如何使用Enter键提交表单

我将通过一个简单的登录页面来给各位进行展示,先上Explorer Demo风格的代码.

public class Index implements IsWidget, EntryPoint {
	private FramedPanel panel;

	@Override
	public void onModuleLoad() {
		RootPanel.get().add(asWidget());
	}

	@Override
	public Widget asWidget() {
		if (panel == null) {
			panel = new FramedPanel();
			panel.setHeadingText("Simple Form");
			panel.setWidth(350);
			panel.setBodyStyle("background: none; padding: 5px");
		}

		VerticalLayoutContainer p = new VerticalLayoutContainer();
		panel.add(p);

		TextField accountField = new TextField();
		accountField.setAllowBlank(false);
		p.add(new FieldLabel(accountField, "Account"), new VerticalLayoutData(
				1, -1));

		TextField pwdField = new TextField();
		pwdField.setAllowBlank(false);
		p.add(new FieldLabel(pwdField, "Password"), new VerticalLayoutData(1,
				-1));

		TextButton btnSubmit = new TextButton("Submit");
		btnSubmit.addSelectHandler(new SelectHandler() {
			@Override
			public void onSelect(SelectEvent event) {
				// 通过submit键进行表单提交.
				submitHandler();
			}
		});
		panel.addButton(btnSubmit);

		new KeyNav(panel) {
			@Override
			public void onEnter(NativeEvent evt) {
				// 通过Enter键进行表单提交.
				submitHandler();
			}

		};

		return panel;
	}

	private void submitHandler() {
		
		// 表单验证
		if (!FormPanelHelper.isValid(panel)) {
			return;
		}

		// 获取表单中域的值
		String account = "", password = "";
		List<IsField<?>> fields = FormPanelHelper.getFields(panel);
		for (int i = 0, end = fields.size(); i < end; i++) {
			switch (i) {
			case 0:
				account = String.valueOf(fields.get(i).getValue());
				break;

			case 1:
				password = String.valueOf(fields.get(i).getValue());
				break;
			}
		}
		GWT.log("account:" + account);
		GWT.log("password:" + password);

		// TODO 提交...
	}
}

首先我们来看今天的第一个主角com.sencha.gxt.core.client.util.KeyNav.

这是Sencha GXT提供的一个按钮导航器.我们通过覆盖它的onEnter方法来调用咱们的表单提交逻辑.

另一个是com.sencha.gxt.widget.core.client.form.FormPanelHelper.

这是Sencha GXT提供的表单工具,在GXT2.x中相应的类是FormButtonBinding.

FormPanelHelper提供了比FormButtonBinding更高效的验证方式和额外的功能,比如今天咱们使用的getFields方法.