0

我的任务是：一个带有列的数据绑定 ListGrid。此列的标题应为“{ infoDatein format DD-MM-YYYY} 的信息”+ 一个 DateItem（仅限图标选择器），用户可以从中修改infoDate默认为当前日期的日期。根据所选日期，列中的值会发生变化。

因此，我从这个问题How to add button in HeaderSpan of SmartGWT中获得了一个想法，以访问下面的代码。不幸的是，有一个问题： DateItem 似乎不可点击，它看起来就像一张图片。此外，我无法删除 TextField，它是一个文本字段或 3 个可选选项字段。

我建议采用 innerHTML 不采用选择器本身的功能，因为我尝试使用 Calendar、DateChooser 和 DatePicker 并且它有效，但问题在于视图（我只需要打开 DatePicker onClick 的日历图标）。

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

进口：

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);
  }-*/;
}
4

2 回答 2

1

哇，这些都不需要。您可以使用setShowFilterEditor(true)“日期”类型字段的默认界面看起来就像您想要的一样，除了从日历图标启动的选择器将允许用户输入日期范围，这似乎比你想要什么。

如果您不想支持任意日期范围，请使用setFilterEditorType()您自己的更有限的控件替换默认控件。

如果您不想要两行标题（普通标题加上 filterEditor），只需使用setShowHeader(false).

于 2012-08-24T20:52:20.610 回答
0

好的，所以我找到了方法：因为我不能覆盖 Header 本身，所以我使用 HeaderSpan 和 Header 的高度，以便只有 HeaderSpan 可见。但是注意，它在 FF 上运行良好，但它会导致 IE 中应用程序的其他部分出现错误。这是代码；类 DOMUtils 可以在我的第一篇文章中找到：

// 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);
于 2012-08-31T09:30:01.770 回答