使用 RPC 加载 Grid 数据

通过 RPC、RequestFactory 或其他数据传输方式将数据加载到 grid。

参考

• com.sencha.gxt.data.shared.loader.DataProxy Javadoc
• com.sencha.gxt.data.shared.loader.FilterConfigBean Javadoc
• com.sencha.gxt.data.shared.loader.FilterPagingLoadConfig Javadoc
• com.sencha.gxt.data.shared.loader.PagingLoader Javadoc
• com.sencha.gxt.data.shared.SortInfo Javadoc
• com.sencha.gxt.data.shared.SortInfoBean Javadoc

演示

• RPC Loader 演示

RPC 页面加载

初始化用于 RPC 通信的 DataProxy。

• 演示 *com.sencha.gxt.data.client.loader.RpcProxy Javadoc

• 使用 RPC 加载数据的示例

    private void createSimpleRpcPageLoadingGrid() {
      // Bean property access definitions
      PostProperties properties = GWT.create(PostProperties.class);
  
      // Rpc Async Service
      final ExampleServiceAsync rpcService = GWT.create(ExampleService.class);
  
      // Rpc Data Proxy
      DataProxy<PagingLoadConfig, PagingLoadResult<Post>> dataProxy =
           new RpcProxy<PagingLoadConfig, PagingLoadResult<Post>>() {
        @Override
        public void load(PagingLoadConfig loadConfig, AsyncCallback<PagingLoadResult<Post>> callback) {
          // Example of the loadConfig sending SortInfo for the RPC request.
          List<? extends SortInfo> sortInfo = loadConfig.getSortInfo();
  
          // RPC data request which contains the paging info and sort info. 
          rpcService.getPosts(loadConfig, callback);
        }
      };
  
      // List Store
      ListStore<Post> listStore = new ListStore<Post>(properties.id());
  
      // Paging Loader
      final PagingLoader<PagingLoadConfig, PagingLoadResult<Post>> pagingLoader = 
          new PagingLoader<PagingLoadConfig, PagingLoadResult<Post>>(dataProxy);
      pagingLoader.setRemoteSort(true);
      pagingLoader.addLoadHandler(new LoadResultListStoreBinding<PagingLoadConfig, Post, 
          PagingLoadResult<Post>>(listStore));
  
      // Paging Tool Bar
      PagingToolBar toolBar = new PagingToolBar(50);
      toolBar.bind(pagingLoader);
  
      // Columns
      ColumnConfig<Post, String> forumColumn = 
          new ColumnConfig<Post, String>(properties.forum(), 150, "Forum");
      ColumnConfig<Post, String> subjectColumn = 
          new ColumnConfig<Post, String>(properties.subject(), 150, "Subject");
      List<ColumnConfig<Post, ?>> columns = new ArrayList<ColumnConfig<Post, ?>>();
      columns.add(forumColumn);
      columns.add(subjectColumn);
      ColumnModel<Post> columnModel = new ColumnModel<Post>(columns);
  
      // Grid
      Grid<Post> grid = new Grid<Post>(listStore, columnModel) {
        @Override
        protected void onAfterFirstAttach() {
          super.onAfterFirstAttach();
          Scheduler.get().scheduleDeferred(new ScheduledCommand() {
            @Override
            public void execute() {
              // Only start the load after this grid attaches to DOM. 
              pagingLoader.load();
            }
          });
        }
      };
      grid.getView().setForceFit(true);
      grid.setLoadMask(true);
      grid.setLoader(pagingLoader);
      grid.setColumnReordering(true);
  
      // Grid Containers
      FramedPanel panel = new FramedPanel();
      panel.setCollapsible(true);
      panel.setHeadingText("Loading Data with RPC");
      panel.setPixelSize(400, 200);
      panel.addStyleName("margin-10");
  
      VerticalLayoutContainer container = new VerticalLayoutContainer();
      container.setBorders(true);
      container.add(grid, new VerticalLayoutData(1, 1));
      container.add(toolBar, new VerticalLayoutData(1, -1));
      panel.add(container);
  
      widget.add(panel);
    }
  

带有远程过滤的 RPC 页面加载

将 PagingLoadConfig 替换为 FilterPagingLoadConfig 并添加 bean 过滤配置。

• 演示

• 使用上述代码片段的示例，请注意 FilterPagingLoadConfig

    // Rpc Data Proxy
    DataProxy<FilterPagingLoadConfig, PagingLoadResult<Post>> dataProxy = 
        new RpcProxy<FilterPagingLoadConfig, PagingLoadResult<Post>>() {
      @Override
      public void load(FilterPagingLoadConfig loadConfig, AsyncCallback<PagingLoadResult<Post>> callback) {
        // RPC data request
        rpcService.getPosts(loadConfig, callback);
      }
    };
  
    // List Store
    ListStore<Post> listStore = new ListStore<Post>(properties.id());
  
    // Paging Filter Loader
    final PagingLoader<FilterPagingLoadConfig, PagingLoadResult<Post>> pagingLoader = 
        new PagingLoader<FilterPagingLoadConfig, PagingLoadResult<Post>>(dataProxy) {
      @Override
      protected FilterPagingLoadConfig newLoadConfig() {
        // Bean filtering configuration for sending the filtering config to server 
        return new FilterPagingLoadConfigBean();
      }
    };
    pagingLoader.setRemoteSort(true);
    pagingLoader.addLoadHandler(new LoadResultListStoreBinding<FilterPagingLoadConfig, Post, 
        PagingLoadResult<Post>>(listStore));
  

• 配置 Grid 过滤器 UI 选项。有关设置 Grid 过滤的更多信息。

    // Grid Ui Filters
    StringFilter<PostProxy> forumFilter = new StringFilter<PostProxy>(properties.forum());
    StringFilter<PostProxy> subjectFilter = new StringFilter<PostProxy>(properties.subject());
  
    GridFilters<PostProxy> filters = new GridFilters<PostProxy>();
    filters.initPlugin(grid);
    filters.setLocal(false);
    filters.addFilter(forumFilter);
    filters.addFilter(subjectFilter);    
  

• 在服务器端，loadConfig 携带请求发送的过滤器

    public PagingLoadResult<Post> getPosts(PagingLoadConfig loadConfig) {
        List<FilterConfig> filters = loadConfig.getFilters();
        String type = filters.get(0).getType();
        String test = filters.get(0).getValue();
        String path = filters.get(0).getField();
        String comparison = filters.get(0).getComparison();
        // Do some server filter magic...
        //...
    }
  

带有远程排序的 RPC 页面加载

将排序发送到服务器。

• PagingLoadConfig 包含 SortInfo，可以发送回服务器。

• 将远程排序设置为 true 以在 PagingLoadConfig 中发送 SortInfo

    pagingLoader.setRemoteSort(true);