GXT之旅：第四章：Data与Components(2)——Stroes

Stroes

在GXT中，Stroe，一个抽象类，用于穿梭于client端，提供ModelData objects。Stroe其实就是为data-backed components存储数据的。

Stroe有两种：TreeStore——为了使用于Tree components；ListStore——为了存储list数据的（被ListField, ComboBox, Grid components使用）。

创建一个ListStore对象用来存储我们上一节创建的Feed BeanModel，代码如下：

ListStore<BeanModel> feedStore = new ListStore<BeanModel>();

通过其泛型的定义，就可以显而易见，Store就是用来存储BeanModel的。但是如果想往Store中放入BeanModel，不能直接添加，需要借助BeanModelFactory。BeanModelFactory会把一个Feed javaBean转换成BeanModel的表现形式，之后才可以被添加到Store中。

我们要修改RSSReader项目，新建一个Feed JavaBean 对象，将其转换成BeanModel的表现形式，添加到ListStore中。

• 在RSSReaderConstants类，加入一个FEED_STORE，用来最为Registry注册的key。

public static final String FEED_STORE = "feedStore";

• 在RSSReader.onModuleLoad方法，加入Registry

public void onModuleLoad() {
Registry.register(RSSReaderConstants.FEED_SERVICE,
GWT.create(FeedService.class));
Registry.register(RSSReaderConstants.FEED_STORE, new
ListStore<BeanModel>());
…
}

• 修改FeedForm.save方法中的，onSuccess回调方法，加入从registry获得feed store的相关代码：

public void save(final Feed feed) {
@Override
public void onSuccess(Void result) {
Info.display("RSS Reader", "Feed " + feed.getTitle()
+ " saved successfully");
final ListStore<BeanModel> feedStore = Registry
.get(RSSReaderConstants.FEED_STORE);
}
…
}

• 通过Feed生成BeanModelFactory

public void onSuccess(Void result) {
Info.display("RSS Reader", "Feed " + feed.getTitle() + " saved
successfully");
final ListStore<BeanModel> feedStore =
Registry.get(RSSReaderConstants.FEED_STORE);
BeanModelFactory beanModelFactory =
BeanModelLookup.get().getFactory(feed.getClass());
}

• 最后，在通过BeanModelFactory去生成Feed的BeanModel，添加到feed store

public void onSuccess(Void result) {
Info.display("RSS Reader", "Feed " + feed.getTitle() + " saved
successfully");
final ListStore<BeanModel> feedStore =
Registry.get(RSSReaderConstants.FEED_STORE);
BeanModelFactory beanModelFactory =
BeanModelLookup.get().getFactory(feed.getClass());
feedStore.add(beanModelFactory.createModel(feed));
}

Data-backed ListField

只要一个data-backed component和一个Store绑定到一起，Store的任何变化，都会自动的展现在data-backed component。对于影响Store数据的事件如下：

• Add
• Clear
• Data Changed
• Filter
• Remove
• Sort
• Update
  

在RSSReader例子中，要新建一个ListField的Data-backed component。然后让feed store绑定到ListField身上，这样feed store的内容就会通过ListField 可视化的组件展现出来。当feed store有变化就会自动的影响ListField的显示效果。

• 新建包：com.danielvaughan.rssreader.client.lists，在此包下，新建FeedList  extends LayoutContainer

public class FeedList extends LayoutContainer {}

• 在构造函数里，设置FitLayout

public FeedList() {
setLayout(new FitLayout());
}

• Override onRender方法，新建一个ListField

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
final ListField<BeanModel> feedList = new
ListField<BeanModel>();
}

• 在onRender方法，通过Registry获得feed store

final ListStore<BeanModel> feedStore = Registry.get(RSSReaderConstants.FEED_STORE);

• 让feedList和feedStore绑定在一起

feedList.setStore(feedStore);

• 设置feedList显示的列——feedList这个Data-backed component，会自动的找到feedStore里所有的BeanModel（Feed JavaBean），然后通过title字符串，按照反射原理在Feed里查找以title为key的value，将value按照ListField的形式展示出来，有多少条Feed（BeanModel）在store中，就会显示出来。

feedList.setDisplayField("title");

• 将feedList 可视化组件，加入到容器中。

add(feedList)

• 在RssNavigationPanel构造函数里，加入如下代码，添加刚才新建FeedList类，加入到west导航区。

setLayout(new FitLayout());
add(new FeedList());

• 最后运行程序，效果如下：

总结：ModelData，Data-backed components，Stroe之间的关系

• Data-backed components的数据源是Store
• Store中存储的数据必须是ModelData
• 但是ModelData必须是通过BeanModelFactory生成的。
• 并不是任何一个普通的JavaBean就可以被BeanModelFactory生成为ModelData的。前提是JavaBean必须具有成为ModelData的能力，如何实现，就得看前一节的内容。http://blog.csdn.net/miqi770/article/details/7193740