Calendar SmartGWT数据绑定列表网格->；列标题中的DateItem，更改后重新加载列

我的任务是：一个带有列的数据绑定ListGrid。此列的标题应为“DD-MM-YYYY格式的{

infoDate

信息”+日期项（仅限图标选取器），用户可以从中修改默认为当前日期的

infoDate

。列中的值会根据所选日期发生变化

因此，我从这个问题中得出了一个想法，以达到下面的代码。不幸的是，有一个问题：DateItem看起来不可点击，它看起来就像一个图像。此外，我不能删除文本字段，它要么是一个文本字段，要么是3个可选选项字段

我建议使用innerHTML不使用选取器本身的功能，就像我尝试使用Calendar、DateChooser和DatePicker一样，它是有效的，但问题在于视图（我只需要一个日历图标，它会在单击时打开DatePicker）

提前感谢您的任何帮助或想法

进口：

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Node;
import com.google.gwt.dom.client.NodeList;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.grid.ListGrid;

守则：

ListGrid infoTable = new ListGrid();
infoTable.setShowRecordComponents(true);
infoTable.setShowRecordComponentsByCell(true);        
infoTable.setWidth100();
infoTable.setDataSource(dataSource);
infoTable.setCanEdit(false);
infoTable.setCanCollapseGroup(false);
infoTable.setCanFreezeFields(false);
infoTable.setCanGroupBy(false);
infoTable.setCanMultiSort(false);
infoTable.setCanSort(false);
infoTable.setCanResizeFields(false);
infoTable.setAutoFetchData(false);
infoTable.addDrawHandler(new DrawHandler() { 
    public void onDraw(final DrawEvent event) { 
        for (Element element : DOMUtils.getElementsByTagName("td")) { 

            if (element.getInnerHTML().startsWith("Information for")) { 
                DOMUtils.removeAllChildNodes(element); 

                final DynamicForm cal = new DynamicForm(); 

                final DateItem infoDate = new DateItem(); 
                infoDate.setDefaultValue(new Date());
                infoDate.setTitle(“Information for ”); 
                infoDate.setTitleAlign(Alignment.LEFT); 
                infoDate.setWrapTitle(false); 
                infoDate.setDisplayFormat(DateDisplayFormat.TOEUROPEANSHORTDATE); 
                infoDate.setUseTextField(true); 
                infoDate.setAlign(Alignment.RIGHT); 
                infoDate.addChangedHandler(new ChangedHandler() { 
                    public void onChanged(final ChangedEvent event) { 
                        //fetch new data, according to the date selected); 
                    } 
                }); 

                cal.setFields(infoDate); 

                element.setInnerHTML(cal.getInnerHTML()); 

            } 
        } 

        // fetch data from DataSource class
        infoTable.fetchData(); 
    } 
});

和类DOMUtils：

class DOMUtils {
public static void removeAllChildNodes(Element element) {
    NodeList<Node> childList = element.getChildNodes();
    for(int childIndex = 0; childIndex < childList.getLength(); childIndex++) {
        element.removeChild(childList.getItem(childIndex));
    }
}

public static Element[] getElementsByTagName(String tagName)
{
    JavaScriptObject elements = getElementsByTagNameInternal(tagName);
    int length = getArrayLength(elements);
    Element[] result = new Element[length];
    for (int i=0; i<length; i++)
    {
        result[i] = getArrayElement(elements, i);
    }
    return result;
}

private static native JavaScriptObject getElementsByTagNameInternal(String tagName)/*-{
return $doc.getElementsByTagName(tagName);
  }-*/;

private static native int getArrayLength(JavaScriptObject array)/*-{
return array.length;
  }-*/;

private static native Element getArrayElement(JavaScriptObject array, int position)/*-{
return (position>=0 && position<array.length?array[position]:null);
  }-*/;
}

类域{ 公共静态void removeAllChildNodes（元素）{ NodeList childList=element.getChildNodes（）； 对于（int childIndex=0；childIndex对于（int i=0；i=0&&positionWow，不需要任何这些。您可以使用

setShowFilterEditor（true）

和“日期”类型字段的默认界面除了从日历图标启动的选择器将允许用户输入一系列日期之外，它看起来将与您想要的完全相同，这似乎比您想要的更实用

如果您不想支持任意日期范围，请使用

setFilterEditorType（）

将默认控件替换为您自己的更有限的控件

---

如果不需要两行标题（普通标题加上filterEditor），只需使用

setShowHeader（false）

好的，所以我找到了方法：因为我不能覆盖标题本身，所以我使用一个标题栏和标题栏的高度，以便只有标题栏可见。但是请注意，它在FF上工作正常，但在IE中的应用程序的其他部分会导致错误。下面是代码；可以在我的第一个pos中找到类DOMUtilst:

// class MyDataSource extends com.smartgwt.client.data.DataSource
MyDataSource dataSource = MyDataSource.getInstance(); 

final HeaderSpan headerSpanCol1 = new HeaderSpan(); 
headerSpanCol1.setTitle("column 1"); 
headerSpanCol1.setFields(MyDataSource.A); 
headerSpanCol1.setHeight(26); 

final HeaderSpan headerSpanCol2 = new HeaderSpan();
// make sure not to have the same element name
headerSpanCol2.setTitle(“Information for”); 
headerSpanCol2.setFields(MyDataSource.D); 
headerSpanCol2.setHeight(26); 

final HeaderSpan headerSpanCol3 = new HeaderSpan(); 
headerSpanCol3.setTitle("column 2"); 
headerSpanCol3.setFields(MyDataSource.B); 
headerSpanCol3.setHeight(26); 

infoTable = new ListGrid() { 

  @Override 
  protected Canvas createRecordComponent(final ListGridRecord record, final Integer colNum) { 

      final String fieldName = this.getFieldName(colNum); 

    // include some icons that I need in the ListGrid here

  } 
}; 
infoTable.setShowRecordComponents(true); 
infoTable.setShowRecordComponentsByCell(true); 

infoTable.setWidth100();
// make height equal to HeaderSpan’s in order to hide header titles and show only the HeaderSpan
infoTable.setHeaderHeight(26);
infoTable.setDataSource(dataSource); 
infoTable.setCanEdit(false); 
infoTable.setCanCollapseGroup(false); 
infoTable.setCanFreezeFields(false); 
infoTable.setCanGroupBy(false); 
infoTable.setCanMultiSort(false); 
infoTable.setCanSort(false); 
infoTable.setCanAutoFitFields(false); 
infoTable.setCanResizeFields(false); 
infoTable.setCanPickFields(false); 
infoTable.setAutoFetchData(false); 
infoTable.addDrawHandler(new DrawHandler() { 
public void onDraw(final DrawEvent event) { 

   for (Element element : DOMUtils.getElementsByTagName("td")) { 
       // iterate over the elements of the page to find the HeaderSpan to replace

       if (element.getInnerHTML().equals(“Information for”)) { 
          // replace the title of this HeaderSpan with a DateItem 
          DOMUtils.removeAllChildNodes(element); 

          final DynamicForm cal = new DynamicForm(); 

         final DateItem infoDate = new DateItem(); 
         infoDate.setDefaultValue(new Date()); 
         infoDate.setTitle(“Select date”); 
         infoDate.setWrapTitle(false); 
         infoDate.setDisplayFormat(DateDisplayFormat.TOEUROPEANSHORTDATE); 
         infoDate.setUseTextField(true); 
         infoDate.setAlign(Alignment.RIGHT); 
         infoDate.addChangedHandler(new ChangedHandler() { 
             public void onChanged(final ChangedEvent event) { 
                 // reload table with newly fetched results                       
             } 
         }); // ChangedHandler

         cal.setFields(infoDate);
         element.insertFirst(cal.getElement());

 break;
} // if
    } // for


    // fetch data from DataSource class
  infoTable.fetchData(); 
} // onDraw
}); // DrawHandler

infoTable.setHeaderSpans(headerSpanCol1, headerSpanCol2, headerSpanCol3); 

---

嗨，比尔，谢谢你的回答。问题是，只有标题需要显示日期，列包含所有类型的数据（int、String、double等）。选择日期后，我会根据此日期重新计算，并使用新数据重新绘制列。在这种情况下，您的自定义FormItem实际上与网格的标题或FilterEditor无关，因此没有理由尝试将其填充到这些组件中。您可以将其放在ListGrid上方，也可以在3.1中将其添加到Li中stGrid的布局（请参阅ListGrid.gridComponents）。我使用3.0，是的，我可以将其添加到网格上方的表单中，但问题是客户端希望将其添加到标题中…：（我可以说这是不可能的，但我必须确定这是不可能的。你真的认为没有办法这样做吗？再次感谢你的帮助。