文档帮助

目录

术语、图标和标签 访问级别 成员类型 成员语法 成员标志 类图标 成员图标 导航和功能 类成员快速导航菜单 Getter 和 Setter 方法 历史记录栏 搜索和过滤器 API 文档类元数据 展开和折叠示例和类成员 桌面 -vs- 移动视图 查看类源代码

术语、图标和标签

许多类在创建（实例化）带有配置对象的类时都有快捷名称。快捷名称称为 alias（如果类扩展了 Ext.Component，则称为 xtype）。别名/xtype 列在适用类的类名旁边，以供快速参考。

访问级别

框架类或其成员可以指定为 private 或 protected。否则，类/成员为 public。Public、protected 和 private 是访问描述符，用于传达应如何以及何时使用类或类成员。

成员类型

成员语法

下面是一个示例类成员，我们可以对其进行剖析，以显示类成员的语法（在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法）。

Ext.container.Container
查看源代码
lookupComponent ( item ) : Ext.Component
受保护的

当原始配置对象添加到此容器时调用，无论是在 items 配置的初始化期间，还是在 添加新项目或 {@link #insert inserted} 时调用。

此方法将传递的对象转换为实例化的子组件。

当需要对子创建应用特殊处理时，可以在子类中覆盖此方法。

参数

item :  Object

要添加的配置对象。

返回值
Ext.Component

要添加的组件。

让我们看一下成员行的每个部分

成员标志

API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类

- 一个单例框架类。*有关更多信息，请参阅 singleton 标志

- 一个组件类型框架类（Ext JS 框架中扩展 Ext.Component 的任何类）

- 表示类、成员或指南在当前查看的版本中是新的

成员图标

- 表示类型为 config 的类成员

- 表示类型为 property 的类成员

- 表示类型为 method 的类成员

- 表示类型为 event 的类成员

- 表示类型为 theme variable 的类成员

- 表示类型为 theme mixin 的类成员

- 表示类、成员或指南在当前查看的版本中是新的

类成员快速导航菜单

在 API 文档页面上的类名正下方是一行按钮，这些按钮对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数（此计数会随着应用过滤器而更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单，以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，就在它们所使用的配置下方。Getter 和 Setter 方法文档将在配置行中找到，以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中，并显示在顶部标题栏下方（使用可用的实际空间）。默认情况下，显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选选项来展开显示的内容。这将显示历史记录栏中所有产品/版本的所有最近页面。

在历史记录配置菜单中，您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选选项过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。

如果在历史记录配置菜单中选择“全部”，则“在历史记录栏中显示产品详细信息”的复选框选项将启用。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上，还有一个过滤器输入字段，用于使用过滤器字符串过滤成员行。除了按字符串过滤外，您还可以按访问级别、继承和只读过滤类成员。这可以通过使用页面顶部的复选框来完成。

API 类导航树底部的复选框过滤类列表以包括或排除私有类。

单击空的搜索字段将显示您最近 10 次搜索，以便快速导航。

API 文档类元数据

每个 API 文档页面（Javascript 原始类型页面除外）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

展开和折叠示例和类成员

可运行的示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或全局使用右上角的展开/折叠所有切换按钮来展开和折叠成员。

桌面 -vs- 移动视图

在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于

查看类源代码

可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

GXT 4.x


顶部

目录

自定义图像单元格 Grid 单元格中的 ImageResources ListView 中的 ImageResources

在单元格中使用图像

在 grid 的单元格中显示图像可以通过几种不同的方式完成。以下是两种可能的选项，它们以不同的方式使用模型的属性来绘制图像。

自定义图像单元格

使用此方法创建一个自定义单元格，该单元格使用来自数据的值作为 url 渲染图像。

  • 设置一个 XTemplate 方法来创建图像并返回 SafeHtml。

      import com.google.gwt.safehtml.shared.SafeHtml;
  import com.sencha.gxt.core.client.XTemplates;

  public interface ImageXTemplate extends XTemplates {
    @XTemplate("<img style=\"border: 2px solid red; width: 25px;\" src=\"{url}\">")
    SafeHtml createImage(String url);
  }

  • 扩展 AbstractCell 以创建自定义 ImageCell。

      import com.google.gwt.cell.client.AbstractCell;
  import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
  import com.google.gwt.safehtml.shared.SafeUri;
  import com.google.gwt.safehtml.shared.UriUtils;

  public class CustomImageCell extends AbstractCell<String> {
    private ImageXTemplate imageTemplate = GWT.create(ImageXTemplate.class);

    @Override
    public void render(Context context, String valueIsUrl, SafeHtmlBuilder sb) {
      if (valueIsUrl != null) {
        SafeUri url = UriUtils.fromString(valueIsUrl);
        sb.append(imageTemplate.createImage(url.asString()));
      }
    }
  }

  • 在 Grid 中实现 CustomImageCell。

      ColumnConfig<Stock, String> imageColumn = new ColumnConfig<Stock, String>(properties.url(), 150, "name");
  imageColumn.setCell(new CustomImageCell());

  • 在 ListView 中实现 CustomImageCell。

      ListView<Stock, String> listView = new ListView<Stock, String>(store, properties.url());
  listView.setCell(new CustomImageCell());

Grid 单元格中的 ImageResources

此方法允许使用客户端捆绑的 com.google.gwt.resources.client.ImageResource ImageResources 。

  • 提供图像资源。

      import com.google.gwt.resources.client.ClientBundle;
  import com.google.gwt.resources.client.ImageResource;

  public interface AppResources extends ClientBundle {
    // images must be in the same package and are not shown here
    ImageResource cat();
    ImageResource dog();
    ImageResource nothing();
  }

  • 使用 com.google.gwt.cell.client.ImageResourceCell 将客户端捆绑资源图像添加到单元格。

      private ColumnConfig<StateModel, ImageResource> createImageColumn() {
    final AppResources resources = GWT.create(AppResources.class);

    ValueProvider<StateModel, ImageResource> valueProvider =
        new ValueProvider<StateModel, ImageResource>() {
      @Override
      public ImageResource getValue(StateModel object) {
        ImageResource image;
        if (object == null {
          // resources are client bundles
          image = resources.nothing();
        } else if (object.equals("cat")) {
          image = resources.cat();
        } else if (object.getName().equals("dog")) {
          image = resources.dog();
        } else {
          image = resources.nothing();
        }
        return image;
      }

      @Override
      public void setValue(StateModel object, ImageResource value) {
      }

      @Override
      public String getPath() {
        return "image";
      }
    };

    ColumnConfig<StateModel, ImageResource> imageColumn =
        new ColumnConfig<StateModel, ImageResource>(valueProvider, 150, "Image");
    imageColumn.setCell(new ImageResourceCell());

    return imageColumn;
  }

ListView 中的 ImageResources

  • 提供图像资源。

      import com.google.gwt.resources.client.ClientBundle;
  import com.google.gwt.resources.client.ImageResource;

  public interface AppResources extends ClientBundle {
    // images must be in the same package and are not shown here
    ImageResource apples();
    ImageResource grapes();
    ImageResource oranges();
    ImageResource pineapple();
    ImageResource nothing();
  }

  • 在 com.google.gwt.cell.client.ImageResourceCell 中使用 com.sencha.gxt.widget.core.client.ListView。

     private ListView<String, ImageResource> createListView() {
   final AppResources resources = GWT.create(AppResources.class);

   ListStore<String> store = new ListStore<String>(new ModelKeyProvider<String>() {
     @Override
     public String getKey(String item) {
       return item;
     }
   });
   store.add("Apples");
   store.add("Grapes");
   store.add("Oranges");
   store.add("Pineapple");

   ValueProvider<String, ImageResource> valueProvider = new ValueProvider<String, ImageResource>() {
     @Override
     public void setValue(String object, ImageResource value) {
     }

     @Override
     public ImageResource getValue(String object) {
       ImageResource image;
       if (object == null) {
         // resources are client bundles
         ImageResource nothing();
       } else if (object.equals("Apples")) {
         image = resources.apples();
       } else if (object.equals("Grapes")) {
         image = resources.grapes();
       } else if (object.equals("Oranges")) {
         image = resources.oranges();
       } else if (object.equals("Pineapple")) {
         image = resources.pineapple();
       } else {
         ImageResource nothing();
       }
       return image;
     }

     @Override
     public String getPath() {
       return "image";
     }
   };
   ListView<String, ImageResource> listView = new ListView<String, ImageResource>(store, valueProvider);
   listView.setCell(new ImageResourceCell());

   return listView;
 }

GXT 4.x