资源描述：
《ExtJS_4_官方指南翻译：Grid组件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、ExtJS4官方指南翻译：Grid组件（上）分类： ExtJS4.02011-10-1816:41 501人阅读 评论(2) 收藏 举报原文：http://docs.sencha.com/ext-js/4-0/#!/guide/grid翻译：frank/sp42转载请保留本页信息1GridsGrid面板为ExtJS的大头核心之一。它是一个通用性很强的组件，提供了一个简单的方式来显示、排序（sort）、分组（group）和编辑（edit）数据。The GridPanel isoneofthecente
2、rpiecesofExtJS.It'sanincrediblyversatilecomponentthatprovidesaneasywaytodisplay,sort,group,andeditdata.2基本Grid面板BasicGridPanel让我们开始创建一个基本的Grid面板。通过这个例子你可以学习到创建Grid的基本方法并让Grid顺利地跑起来。Let'sgetstartedbycreatingabasic GridPanel .Here'sallyouneedtoknowtogeta
3、simplegridupandrunning:3模型对象Model和Store存储对象ModelandStore一个Grid面板可以说仅仅是一个组件，它会把Store中的数据显示出来。Store可以被看作是一记录集合，或模型的实例。欲了解更多Store和模型的信息，建议参阅该文。这种设计的好处是“各司其职（separationofconcerns）”，并且十分清晰。Grid面板只关注如何显示的数据，而Store则透过用其代理（Proxy）执行数据的获取和保存。A GridPanel issimply
4、acomponentthatdisplaysdatacontainedina Store.A Store canbethoughtofasacollectionofrecords,or Model instances.Formoreinformationon Storesand Modelsseethe Dataguide.Thebenefitofthissetupisclearseparationofconcerns.TheGridPanel isonlyconcernedwithdisplayi
5、ngthedata,whilethe Store takescareoffetchingandsavingthedatausingits Proxy.首先，我们需要定义一个模型。模型只是一种集合，表示一个数据类型的字段。让我们定义一个模型，它代表着“用户User”：Firstweneedtodefinea Model.A Model isjustacollectionoffieldsthatrepresentsatypeofdata.Let'sdefineamodelthatrepresentsa"
6、User":viewplain1.Ext.define('User', { 2. extend: 'Ext.data.Model', 3. fields: [ 'name', 'email', 'phone' ] 4.}); 接下来，我们创建一个包含多个用户User的Store对象。Nextlet'screatea Store thatcontainsseveral Userinstances.viewplain1.var userStore = Ext.create('Ext.
7、data.Store', { 2. model: 'User', 3. data: [ 4. { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, 5. { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' }, 6. { name: 'Homer', email: 'home
8、@simpsons.com', phone: '555-222-1244' }, 7. { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' } 8. ] 9.}); 为了简单起见，我们直接写出Store其具体数据。而在真实的应用程序中，您通常会配置代理对象Proxy，透过Proxy从服务器加载数据回来。更多请参阅使用Proxy的数据指导。Forsakeofe
