天道酬勤,学无止境

GWT EditTextCell : How to increase editable TextBox width in EditTextCell?

I am using GWT2.3 in my project. I want to increase editableTextBox width when user click on editableTextCell. Problem is My Column width is 200 Px. when user clicks on editableTextCell then that TextBox width is around 125px in EditableTextCell is less as compare to column width.

I added EditTextCell in Celltable's column

Column stringColumn = new Column(new EditTextCell()) { // My Code }

cellTable.addColumn(stringColumn, "MyColumn"); cellTable.setColumnWidth(checkBoxColumn, 200, Unit.PX);

I tried following way to increase TextBox width but problem is I cannot edit in textbox + focus not losses

    @Override
            public void onBrowserEvent(Context context, Element elem,Record object, NativeEvent event) {
                String type = event.getType();

                  int editedTexBoxSize = (cellTable.getOffsetWidth()-100)/cellTable.getColumnCount();

                  if(elem.getInnerHTML().startsWith("<INPUT")){
                      String test = elem.getInnerHTML();
                     // test = <INPUT tabIndex=-1 value=P __eventBits="2048"></INPUT>

                     test= test.replace("value", " size="+editedTexBoxSize+" value");


                    // test = <INPUT tabIndex=-1 size=131 value=P __eventBits="2048"></INPUT>


                      elem.setInnerHTML(test);
                  }
                super.onBrowserEvent(context, elem, object, event);
            }

I want to Increase(set) TextBox width appear in EditTextCell is equal to column Width.

Any Solution ?

评论

In my project I do that:

cellTable.getColumn(cellTable.getColumnIndex(column)).setCellStyleNames(CELL_CSS);

.edit-cell input {
    width: 290px;
}

Finally the answer ! I tried this even simplier using UIBinder by adding :

.edit-cell input {
    width: 30px;
    text-align: right;
}

Then for the cell table I added

 <c:CellTable
        addStyleNames='{style.edit-cell}'
        ui:field='itemTable' />

Wonderful !

You'll need to create a custom component. The out of the box EditTextCell does not allow you to set the size attribute of the input field, just the column width.

Have a look at the ValidateableInputCell impl here: In search of a GWT validation example... where art thou? for an example of how to craft a custom cell.

Admittedly the validation does not yet work but the ability to set the size on the input field within the cell does.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • gwt 单元格表动态列 - 排序(gwt cell table dynamic columns - sorting)
    问题 您可以将您的“行”表示为List<String>实例,您必须在您的 Grid、Column 和数据提供程序中将参数化从 String 更改为 List; 当然你必须用List<List<String>>调用 updateRowData ,而不是List<String> 。 您还需要每列一个 Column 实例,按索引从 List 中取出值: class IndexedColumn extends Column<List<String>, String> { private final int index; public IndexedColumn(int index) { super(new EditTextCell()); this.index = index; } @Override public String getValue(List<String> object) { return object.get(this.index); } } 我如何在这个例子中添加排序。 我尝试了ListHandler但不知道如何比较List<String> 。 任何帮助表示赞赏。 回答1 您需要为要单独排序的每一列添加一个ListHandler 。 有点像这样: 您必须为IndexedColumn添加一个 getter 方法以IndexedColumn index : class
  • gwt cell table dynamic columns - sorting
    You can represent your "rows" as List<String> instances, you have to change your parameterization from String to List in your Grid, Column and data provider; and of course you have to call updateRowData with a List<List<String>>, not a List<String>. You also need one Column instance per column, taking the value out of the List by index: class IndexedColumn extends Column<List<String>, String> { private final int index; public IndexedColumn(int index) { super(new EditTextCell()); this.index = index; } @Override public String getValue(List<String> object) { return object.get(this.index); } } How
  • 如何使用GWT 2.1数据表示小部件(How to use GWT 2.1 Data Presentation Widgets)
    问题 在2010年的Google IO中,我们宣布GWT 2.1将包含新的数据表示小部件。 可以下载2.1M,大概包含了小部件,但尚未出现任何文档。 是否有使用它们的简短教程或示例? 我听说有传言说CellList和CellTable是有问题的类。 针对它们的Javadoc上充斥着许多TODO,因此在使用方面仍然遗漏了很多东西。 回答1 Google I / O 2010-GWT的UI大修 2.1中的javadocs包com.google.gwt.cell.client 里程碑2的Eclipse更新站点 当代码在Bikeshed中时,将此行添加到您的gwt.xml文件中: <inherits name='com.google.gwt.requestfactory.RequestFactory'/> 以下是以下示例: 具有PageSizePager的TextCells的CellList 具有SimplePager的TextCells的CellList 具有SimplePager和PageSizePager(buggy)的TextCell的CellList和带有String标头和TextCell标头的CellTable package dpw.client; import java.util.ArrayList; import com.google.gwt.cell.client
  • 如何为类型的子类实现GWT编辑器?(How to implement GWT editors for subclasses of a type?)
    问题 假设我有一个这样的对象层次结构: 帐户>网站>供应 帐户是一家实际的公司,站点是他们拥有的建筑物,供应是ElecSupply或GasSupply 。 供应从未实例化,并且可能是理论上的抽象类。 我正在使用Objectify进行持久化,并且有一个页面显示每个站点的耗材列表,无论它们是ElecSupply还是GasSupply 。 现在,我正在实现GWT编辑器框架,并遇到了该多态实体的问题。 如何为这样的对象实现编辑器和一组子编辑器? @Entity public class Supply implements Serializable { @Id protected Long id; @Embedded protected List<BillingPeriod> billingPeriods = new ArrayList<BillingPeriod>(); public Supply() { } // ... } 子类:(ElecSupply有5个唯一字段,而GasSupply只有1个字段) @Subclass public class ElecSupply extends Supply implements Serializable { private String profile; private String mtc; private String llf
  • 根据输入的字符动态增加输入类型文本文本框的宽度(dynamically increase input type text textbox width according to the characters entering into it)
    问题 我有一个textbox ,用户可以在其中输入任意数量的字符,但是我希望它的宽度相对于输入的字符数可以动态增加。 我已经完成了如下所示的变通方法,它可以部分工作,它将动态地增加宽度,但不会那么精确,并且由于应用了较差的逻辑,它会在一段时间后隐藏第一个输入的字符。 我刚刚给出了一个由17个字符组成的整数,以开始递增。 仅当字符数达到文本框的末尾时,才应开始宽度增量。 更新: 我希望显示在字段中输入的所有字符,而默认情况下,文本框隐藏最左边的字符。 现场演示 的HTML <input type="text" id="txtbox" /> 脚本 $('#txtbox').keypress(function() { var txtWidth = $(this).width(); var cs = $(this).val().length; if(cs>17){ $(this).width(txtWidth+5); } }); 回答1 我已经尝试过此代码,并且可以正常工作。 <html> <head> <script type="text/javascript"> function Expand(obj){ if (!obj.savesize) obj.savesize=obj.size; obj.size=Math.max(obj.savesize,obj.value.length)
  • gwtQuery 的好处(benefits of gwtQuery)
    问题 有人可以告诉我使用 gwt 查询有什么好处吗?它只是用于 css 效果吗? 以及我们如何使用它来创建像 gwt 这样的 ui 元素。 我所理解的只是在项目中使用标签,文本框,按钮等gwt组件,然后gwt查询只是对该组件产生一些影响,是这样吗? 如果是用于 css 效果,那么我们也可以在 gwt 中做同样的事情,那么为什么我会使用 Gwtquery 而不是 gwt。 有人可以帮我.. 谢谢, 回答1 GQuery 远不止这些。 例如,您可以快速轻松地导航到 de DOM(如 jQuery)! 看,今天早上我是这样用的: Element p = DOM.createElement("p"); p.addClassName("KV"); p.setInnerText(newBody); $(cellList + " #__idx=\""+position+"\" p .KV").replaceWith(p); 如果您查看最后一行,您将看到:小部件cellList的相关 DOM(来自 MGWT 的 CellList),搜索具有 id "__idx"的元素,然后选择元素p并从中选择具有该类的元素"KV" 。 你有没有想过这个普通gwt的代码? 您可以使用的其他真正有用的东西是 Promise 模式。 就像如果 B 正确完成就做 A,如果 C 正确完成就做 B。
  • 如何使用消息国际化GWT UIBinder页面?(How can I internationalize a GWT UIBinder page with Messages?)
    问题 我正在尝试使带有属性文件的UIBinder应用程序国际化。 由于com.google.gwt.i18n.client.Messages接口(GWT 1.7.1)公开了许多翻译,因此我们希望重用这些消息。 我尝试了以下方法: <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:res="ui:with:be.credoc.iov.webapp.client.MessageConstants"> <g:HTMLPanel> <div> <res:msg key="email">Emaileke</res:msg>: <g:TextBox ui:field="email" /> </div> </g:HTMLPanel> </ui:UiBinder> MessageConstants类如下所示: @DefaultLocale("nl") public interface MessageConstants extends Messages { String email();
  • GWT input event on TextBox
    Given the following code: TextBox tb = new TextBox(); tb.addValueChangeHandler(new ValueChangeHandler<String>() { @Override public void onValueChange(ValueChangeEvent<String> event) { Window.alert(event.getValue()); } }); onValueChange will be called if the TextBox loses focus. I am trying to have it called whenever the input value changes. The solutions I have read all involve handling the keyup and paste events such as in this answer. How to build a Facebook-style input box in GWT Hasn't this been addresses in GWT 2.5.1? Is there a way to bind to the native input change method? Another
  • How to use the GWT editor framework for validation?
    I am trying to integrate with the new GWT Editor framework of GWT 2.1.0. I also want to add my validation checks into the framework. However, I am struggling to find a decent example how to do this. For the moment I have the following code: <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:e="urn:import:com.google.gwt.editor.ui.client"> <ui:with type="be.credoc.iov.webapp.client.MessageConstants" field="msg" /> <g:HTMLPanel> <e:ValueBoxEditorDecorator ui:field=
  • not able to set focus on TextBox in a GWT app
    This should not be causing me so much pain but it is. It is a very weird problem. In a GWT application, I have two .java files, login.java and application.java. In login.java, I'm creating a user login page where if the username and password is verified the user is logged into the application and application.java takes from here. Now in application. java's onModuleLoad() this is how i'm starting with a login page. public void onModuleLoad() { Login login = new Login(); login.textBoxUsername.setFocus(true); RootLayoutPanel.get().add(login);} This works great, except for the tiny problem of not
  • GWT文本框上的即时值更改处理程序(Instant value change handler on a GWT textbox)
    问题 我想在输入GWT TextBox时立即更新文本字段。 我的问题是ValueChangeEvent和ChangeEvent处理程序仅在TextBox失去焦点时才触发。 我考虑过使用KeyPressEvent,但是用鼠标执行复制粘贴时什么也不会发生。 最简单的方法是什么? 回答1 您可以捕获ONPASTE事件并手动触发ValueChangeEvent 。 像这样的东西: public void onModuleLoad() { final Label text = new Label(); final ExtendedTextBox box = new ExtendedTextBox(); box.addValueChangeHandler(new ValueChangeHandler<String>() { @Override public void onValueChange(ValueChangeEvent<String> event) { text.setText(event.getValue()); } }); box.addKeyUpHandler(new KeyUpHandler() { @Override public void onKeyUp(KeyUpEvent event) { text.setText(box.getText()); } })
  • mysql java no suitable driver
    In the following code..I am getting no suitable driver..error: please help. I have been working with it for an hour already and cant seem to figure it out. It is crazy. I was able to do this exact feet earlier, before I started messing with GWT. package com.gwt.churchweb.churchweblogin.client; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.HasHorizontalAlignment; import
  • mysql java没有合适的驱动程序(mysql java no suitable driver)
    问题 在以下代码中..我没有合适的驱动程序..错误:请帮忙。 我已经使用它一个小时了,似乎无法弄清楚。 太疯狂了在我开始使用 GWT 之前,我能够更早地做到这一点。 package com.gwt.churchweb.churchweblogin.client; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.HasHorizontalAlignment; import com.google.gwt.user.client.ui.CheckBox; import com.google.gwt.user.client.ui.Button; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt
  • exception in GWT RPC app
    I am using GWT RPC & Hibernate to insert and retrieve data from MySQL using eclipse environment. I have written two methods in service interfaces to insert & retrieve data from a single MySQL table. The program is running fine but it is raising this exception. Exception in thread "UnitCacheLoader" java.lang.RuntimeException: Unable to read from byte cache at com.google.gwt.dev.util.DiskCache.transferFromStream(DiskCache.java:166) at com.google.gwt.dev.util.DiskCacheToken.readObject(DiskCacheToken.java:87) at sun.reflect.GeneratedMethodAccessor2.invoke(Unknown Source) at sun.reflect
  • GWT Validator with Editor Framework
    Have anybody realized how editors and jsr 303 validation work with GWT 2.3 coming? Validation API was add to gwt sdk. But I am unable to validate entities using the editor framework. No matter what I do the errors are never thrown from client side or server side. Here is a code snippet: public class P { public P() {} @Size(min=4) private String name; public void setName(String name) { this.name = name; } public String getName() { return name; } } PEditor public class PEditor extends Composite implements Editor<P> { private static PEditorUiBinder uiBinder = GWT.create(PEditorUiBinder.class)
  • Instant value change handler on a GWT textbox
    I would like to update a text field instantly when typing in a GWT TextBox. My problem is that ValueChangeEvent and ChangeEvent handlers only fire when the TextBox loses focus. I thought about using the KeyPressEvent but then nothing would happen when performing a copy paste with the mouse. What's the simplest way to do that ?
  • Google AppEngine会话示例(Google AppEngine Session Example)
    问题 我刚刚在Google AppEngine / Java + GWT应用程序中启用了Session。 以及我该如何使用呢? 我如何获得会话ID并从中播放所有好玩的东西? 是否有任何简单的登录页面的真实示例,我只是输入LoginName和Password,然后通过RPC调用转到服务器,根据数据库进行身份验证并将Session ID发送回客户端。 我已经有以下代码,但不知道下一步该怎么做: GWT登录表单: public class LoginForm { private final LoginServiceAsync loginService = GWT.create(LoginService.class); VerticalPanel loginVp = new VerticalPanel(); TextBox loginTxt = new TextBox(); TextBox passTxt = new TextBox(); Button loginBtn = new Button("Login"); public Widget getLoginWidget(){ loginBtn.addClickHandler(new ClickHandler(){ public void onClick(ClickEvent arg0) { loginService
  • 文本框被大字符串禁用(Textbox disabled with a huge string)
    问题 当输入一个巨大的字符串时,我遇到了textbox的问题。 就我而言,文本框用于写入电子邮件地址,并且没有字符数限制。 所以,我做了这个测试:我在记事本中写了 200 个电子邮件地址,我将文本粘贴在文本textbox ,文本消失了,但是如果我改变控件的焦点,文本会再次显示。 我已经看到这个链接,但它没有帮助我。 我已经尝试将MaxLength属性更改为 0(微软说如何做),但它在这里也不起作用。 考虑一个有 50 个字符的电子邮件地址,MaxLength 属性不会有问题,因为 200 个电子邮件地址乘以 50 个字符(每封电子邮件),我将有 10000 个字符, TextBox.MaxLength的默认值为 32767。 而且,在您询问代码之前,我只将文本设置为字符串。 myEmailObject.Address = txtEmail.Text; 我应该使用RichText还是什么? 回答1 尝试将 Multiline 属性设置为 True 并增加文本框的高度 回答2 这是 Windows EDIT 控件(由 TextBox 类包装的本机控件)中的一个已知限制。 我知道 Windows 7 SP1 和 Windows 8 中存在限制,早期版本几乎肯定也有。 一旦在单行 TextBox 中显示超过 5000 个字符,您将使用此限制。 给予或接受,它基于显示文本的总宽º
  • Google AppEngine Session Example
    I just enabled Session in my Google AppEngine/Java + GWT application. And how do I use it? How do I get session ID and play will all good stuff from it? Are there any real examples of simple login page where I'm just entering LoginName and Password, then it goes to the server over RPC call, authenticates against database and sends Session ID back to the client. I have following code already but don't know what to do next: GWT Login Form: public class LoginForm { private final LoginServiceAsync loginService = GWT.create(LoginService.class); VerticalPanel loginVp = new VerticalPanel(); TextBox
  • exception in gwt hibernate program
    I am trying to make a simple GWT RPC Hibernate program that adds a user to MySQL database. I am using Eclipse EE. The application is successfully adding user to database but it raises exception when compiled. Here is the exception & source of my application. exception: Exception in thread "UnitCacheLoader" java.lang.RuntimeException: Unable to read from byte cache at com.google.gwt.dev.util.DiskCache.transferFromStream(DiskCache.java:166) at com.google.gwt.dev.util.DiskCacheToken.readObject(DiskCacheToken.java:87) at sun.reflect.GeneratedMethodAccessor2.invoke(Unknown Source) at sun.reflect