Learn about Dojo's next generation Grid control

Source: Internet
Author: User
Keywords Dojo
Tags api api design based basic basic usage cache code control

A large number of design improvements to datagrid/enhancedgrid issues have made the Gridx more stable and more performance-efficient. At the same time, the API design is more intuitive and difficult to misuse. This article from how to create and use GRIDX to introduce the basic characteristics of GRIDX and basic usage, the purpose is to let you have a basic understanding of GRIDX.

Gridx is an Open-source project based on Dojo, which can be downloaded to the source package in GitHub or its official website. Download the GridX folder in the same directory as the dojo, Dijit, and Dojox folders after decompression. Currently GRIDX supports dojo1.7+.

There are a number of sample pages in the Gridx/tests folder where you can start learning to use GRIDX from modifying these sample pages.

Create Gridx

Gridx inherits Dijit._widgetbase, so its creation is similar to other widgets, except that some parameters that must be specified require special instructions.

Choose the right store and cache

Gridx, like the DataGrid, is based on the Dojo store as a data source. However, GRIDX requires the user to indicate whether the store used is asynchronous or synchronous. The asynchronous store usually provides data on the server side, http://www.aliyun.com/zixun/aggregation/35451.html it to the ">" "It is often necessary to receive return data asynchronously when requesting data; All data is typically on the client side, so all requests are synchronized. Asynchronous store often leads to more complex logic, so GRIDX is optimized for the two store separately. However, because it is not possible to know from the store itself whether it is asynchronous, and in order to reduce the amount of code, users need to inform GRIDX of this information. The way to tell is to set the Cacheclass parameter:

Listing 1. Create GRIDX and configure Cacheclass parameters

Require (["Gridx/grid", "Gridx/core/model/cache/sync", ...) "dojo/domready!"], function (Gridx, Cache, ...) {... var grid = new Gridx ({Cacheclass:cache store:store, ...}); Grid.placeat (' Gridcontainernode '); Grid.startup () ; });

There are two cache implementations for GRIDX: Gridx/core/model/cache/sync and Gridx/core/model/cache/async, which are used to sync the store, and the latter for the asynchronous store. Async's implementation logic is much more complex than Sync, because it takes into account deferred loading of data. This reduces the amount of code that is eventually downloaded to the browser, if the user's application requires only client data, and there is no need to use code on deferred loading at all.

Cacheclass can either directly accept the constructor of the cache implementation (as in the previous example) or accept MID, for example:

Listing 2. Set Cacheclass parameters with MID

var Grid = new Gridx ({cacheclass: "Gridx/core/model/cache/async" ...});

This is a better way to create a Gridx in an HTML declaration, because it does not need to introduce additional variables.

Currently GRIDX can directly support Dojo (x)/data/* 's old store and dojo/store/* 's new store without any adaptation conversions. The commonly used sync store has Dojo/data/itemfilewritestore and dojo/store/memory. The common asynchronous store has Dojox/data/jsonreststore, Dojox/data/queryreadstore, and Dojo/store/jsonrest.

It is important to note that GRIDX requires that the data rows in the store must have a unique identifier (ID). For the old store, it is necessary to achieve dojo/data/api/identity. Fortunately, the common store listed just now meets this requirement.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.