读书人
栏目▼

extjs学习札记（五）可编辑的grid

发布时间： 2012-11-07 09:56:10 作者： rapoo

extjs学习笔记（五）可编辑的grid

大多数时候，我们只是使用grid来显示信息，但有时也需要在grid中对信息进行编辑。在extjs中，构造一个可编辑的grid非常方便。

?我们来看下Ext.grid.EditorGridPanel，该类从GridPanel继承而来，通过对列提供editor进行编辑。在前边的例子中，我们用过renderer函数，知道可以把数据显示成我们希望的样子，而在编辑的时候，我们其实是针对的原始数据。另外，我们在编辑的时候，通常希望能够对用户的输入进行控制而不是任由用户随心所欲的输入，Ext.form命名空间有一些类能够对用户输入进行一些基本的控制，我们会在下边的代码中看到，这里我再次强调一下，在向服务器提交数据之前和数据在服务器进行处理之前，必须要进行数据的有效性验证。由于对grid已经比较熟悉了，下边就直接给出代码了：

///<reference?path="vswd-ext_2.0.2.js"?/>
??2extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid/**//*
??3extjs学习札记（五）可编辑的grid*作者：大笨
??4extjs学习札记（五）可编辑的grid*日期：2009-10-20
??5extjs学习札记（五）可编辑的grid*版本：1.0
??6extjs学习札记（五）可编辑的grid*博客地址：http://yage.cnblogs.com
??7extjs学习札记（五）可编辑的grid*QQ：14202190
??8extjs学习札记（五）可编辑的grid*/
??9extjs学习札记（五）可编辑的gridExt.BLANK_IMAGE_URL?=?'../extjs/resources/images/default/s.gif';
?10extjs学习札记（五）可编辑的grid
?11extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的gridExt.onReady(function()?extjs学习札记（五）可编辑的grid{
?12extjs学习札记（五）可编辑的grid????Ext.QuickTips.init();
?13extjs学习札记（五）可编辑的grid
?14extjs学习札记（五）可编辑的grid????//格式化日期
?15extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????function?formatDate(value)?extjs学习札记（五）可编辑的grid{
?16extjs学习札记（五）可编辑的grid????????return?value???value.dateFormat('Y年m月d日')?:?'';
?17extjs学习札记（五）可编辑的grid????}
?18extjs学习札记（五）可编辑的grid
?19extjs学习札记（五）可编辑的grid????//?别名
?20extjs学习札记（五）可编辑的grid????var?fm?=?Ext.form;
?21extjs学习札记（五）可编辑的grid
?22extjs学习札记（五）可编辑的grid????//构造一个只能包含checkbox的列
?23extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????var?checkColumn?=?new?Ext.grid.CheckColumn(extjs学习札记（五）可编辑的grid{
?24extjs学习札记（五）可编辑的grid????????header:?'Indoor?',
?25extjs学习札记（五）可编辑的grid????????dataIndex:?'indoor',
?26extjs学习札记（五）可编辑的grid????????width:?55
?27extjs学习札记（五）可编辑的grid????});
?28extjs学习札记（五）可编辑的grid
?29extjs学习札记（五）可编辑的grid????//?构造ColumnModel
?30extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????var?cm?=?new?Ext.grid.ColumnModel(extjs学习札记（五）可编辑的grid{
?31extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????columns:?[extjs学习札记（五）可编辑的grid{
?32extjs学习札记（五）可编辑的grid????????????id:?'common',
?33extjs学习札记（五）可编辑的grid????????????header:?'Common?Name',
?34extjs学习札记（五）可编辑的grid????????????dataIndex:?'common',
?35extjs学习札记（五）可编辑的grid????????????width:?220,
?36extjs学习札记（五）可编辑的grid????????????//?使用上边定义好的别名
?37extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????editor:?new?fm.TextField(extjs学习札记（五）可编辑的grid{
?38extjs学习札记（五）可编辑的grid????????????????allowBlank:?false
?39extjs学习札记（五）可编辑的grid????????????})
?40extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????},?extjs学习札记（五）可编辑的grid{
?41extjs学习札记（五）可编辑的grid????????????header:?'Light',
?42extjs学习札记（五）可编辑的grid????????????dataIndex:?'light',
?43extjs学习札记（五）可编辑的grid????????????width:?130,
?44extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????editor:?new?fm.ComboBox(extjs学习札记（五）可编辑的grid{
?45extjs学习札记（五）可编辑的grid????????????????typeAhead:?true,
?46extjs学习札记（五）可编辑的grid????????????????triggerAction:?'all',
?47extjs学习札记（五）可编辑的grid????????????????transform:?'light',
?48extjs学习札记（五）可编辑的grid????????????????lazyRender:?true,
?49extjs学习札记（五）可编辑的grid????????????????listClass:?'x-combo-list-small'
?50extjs学习札记（五）可编辑的grid????????????})
?51extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????},?extjs学习札记（五）可编辑的grid{
?52extjs学习札记（五）可编辑的grid????????????header:?'Price',
?53extjs学习札记（五）可编辑的grid????????????dataIndex:?'price',
?54extjs学习札记（五）可编辑的grid????????????width:?70,
?55extjs学习札记（五）可编辑的grid????????????align:?'right',
?56extjs学习札记（五）可编辑的grid????????????renderer:?'usMoney',
?57extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????editor:?new?fm.NumberField(extjs学习札记（五）可编辑的grid{
?58extjs学习札记（五）可编辑的grid????????????????allowBlank:?false,
?59extjs学习札记（五）可编辑的grid????????????????allowNegative:?false,
?60extjs学习札记（五）可编辑的grid????????????????maxValue:?100000
?61extjs学习札记（五）可编辑的grid????????????})
?62extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????},?extjs学习札记（五）可编辑的grid{
?63extjs学习札记（五）可编辑的grid????????????header:?'Available',
?64extjs学习札记（五）可编辑的grid????????????dataIndex:?'availDate',
?65extjs学习札记（五）可编辑的grid????????????width:?95,
?66extjs学习札记（五）可编辑的grid????????????renderer:?formatDate,
?67extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????editor:?new?fm.DateField(extjs学习札记（五）可编辑的grid{
?68extjs学习札记（五）可编辑的grid????????????????format:?'Y年m月d日',
?69extjs学习札记（五）可编辑的grid????????????????minValue:?'01/01/06',
?70extjs学习札记（五）可编辑的grid????????????????disabledDays:?[0,?6],
?71extjs学习札记（五）可编辑的grid????????????????disabledDaysText:?'Plants?are?not?available?on?the?weekends'
?72extjs学习札记（五）可编辑的grid????????????})
?73extjs学习札记（五）可编辑的grid????????},
?74extjs学习札记（五）可编辑的grid????????checkColumn,
?75extjs学习札记（五）可编辑的grid????],
?76extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????defaults:?extjs学习札记（五）可编辑的grid{
?77extjs学习札记（五）可编辑的grid????????sortable:true
?78extjs学习札记（五）可编辑的grid????}
?79extjs学习札记（五）可编辑的grid});
?80extjs学习札记（五）可编辑的grid
?81extjs学习札记（五）可编辑的grid
?82extjs学习札记（五）可编辑的grid//?构造一个Store对象
?83extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的gridvar?store?=?new?Ext.data.Store(extjs学习札记（五）可编辑的grid{
?84extjs学习札记（五）可编辑的grid
?85extjs学习札记（五）可编辑的grid????url:?'plants.xml',
?86extjs学习札记（五）可编辑的grid
?87extjs学习札记（五）可编辑的grid????reader:?new?Ext.data.XmlReader(
?88extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????extjs学习札记（五）可编辑的grid{
?89extjs学习札记（五）可编辑的grid????????????????record:?'plant'
?90extjs学习札记（五）可编辑的grid????????????},
?91extjs学习札记（五）可编辑的grid
?92extjs学习札记（五）可编辑的grid????????????[
?93extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????????extjs学习札记（五）可编辑的grid{?name:?'common',?type:?'string'?},
?94extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????????extjs学习札记（五）可编辑的grid{?name:?'botanical',?type:?'string'?},
?95extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????????extjs学习札记（五）可编辑的grid{?name:?'light'?},
?96extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????????extjs学习札记（五）可编辑的grid{?name:?'price',?type:?'float'?},
?97extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????????extjs学习札记（五）可编辑的grid{?name:?'availDate',?mapping:?'availability',?type:?'date',?dateFormat:?'m/d/Y'?},
?98extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????????????????extjs学习札记（五）可编辑的grid{?name:?'indoor',?type:?'bool'?}
?99extjs学习札记（五）可编辑的grid????????????]
100extjs学习札记（五）可编辑的grid????????),
101extjs学习札记（五）可编辑的grid
102extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid????sortInfo:?extjs学习札记（五）可编辑的grid{?field:?'common',?direction:?'ASC'?}
103extjs学习札记（五）可编辑的grid});
104extjs学习札记（五）可编辑的grid
105extjs学习札记（五）可编辑的grid//?构造可编辑的grid
106extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的gridvar?grid?=?new?Ext.grid.EditorGridPanel(extjs学习札记（五）可编辑的grid{
107extjs学习札记（五）可编辑的grid????store:?store,
108extjs学习札记（五）可编辑的grid????cm:?cm,
109extjs学习札记（五）可编辑的grid????renderTo:?'grid',
110extjs学习札记（五）可编辑的grid????width:?600,
111extjs学习札记（五）可编辑的grid????height:?300,
112extjs学习札记（五）可编辑的grid????autoExpandColumn:?'common',
113extjs学习札记（五）可编辑的grid????title:?'Edit?Plants?',
114extjs学习札记（五）可编辑的grid????frame:?true,
115extjs学习札记（五）可编辑的grid????plugins:?checkColumn,
116extjs学习札记（五）可编辑的grid????clicksToEdit:?1
117extjs学习札记（五）可编辑的grid});
118extjs学习札记（五）可编辑的grid
119extjs学习札记（五）可编辑的grid//?触发数据的加载
120extjs学习札记（五）可编辑的gridstore.load();
121extjs学习札记（五）可编辑的grid});

???? 我们在前边的系列中使用过数据和json来作为数据保存或者传递的格式，考虑到xml也很常用，这次我们使用了xml文件，内容如下：

extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的gridplants.xmlextjs学习札记（五）可编辑的grid<?xml?version="1.0"?encoding="utf-8"?>
??2extjs学习札记（五）可编辑的grid<catalog>
??3extjs学习札记（五）可编辑的grid??<plant>
??4extjs学习札记（五）可编辑的grid????<common>Bloodroot</common>
??5extjs学习札记（五）可编辑的grid????<botanical>Sanguinaria?canadensis</botanical>
??6extjs学习札记（五）可编辑的grid????<zone>4</zone>
??7extjs学习札记（五）可编辑的grid????<light>Mostly?Shady</light>
??8extjs学习札记（五）可编辑的grid????<price>2.44</price>
??9extjs学习札记（五）可编辑的grid????<availability>03/15/2006</availability>
?10extjs学习札记（五）可编辑的grid????<indoor>true</indoor>
?11extjs学习札记（五）可编辑的grid??</plant>
?12extjs学习札记（五）可编辑的grid??<plant>
?13extjs学习札记（五）可编辑的grid????<common>Columbine</common>
?14extjs学习札记（五）可编辑的grid????<botanical>Aquilegia?canadensis</botanical>
?15extjs学习札记（五）可编辑的grid????<zone>3</zone>
?16extjs学习札记（五）可编辑的grid????<light>Mostly?Shady</light>
?17extjs学习札记（五）可编辑的grid????<price>9.37</price>
?18extjs学习札记（五）可编辑的grid????<availability>03/06/2006</availability>
?19extjs学习札记（五）可编辑的grid????<indoor>true</indoor>
?20extjs学习札记（五）可编辑的grid??</plant>
?21extjs学习札记（五）可编辑的grid??<plant>
?22extjs学习札记（五）可编辑的grid????<common>Marsh?Marigold</common>
?23extjs学习札记（五）可编辑的grid????<botanical>Caltha?palustris</botanical>
?24extjs学习札记（五）可编辑的grid????<zone>4</zone>
?25extjs学习札记（五）可编辑的grid????<light>Mostly?Sunny</light>
?26extjs学习札记（五）可编辑的grid????<price>6.81</price>
?27extjs学习札记（五）可编辑的grid????<availability>05/17/2006</availability>
?28extjs学习札记（五）可编辑的grid????<indoor>false</indoor>
?29extjs学习札记（五）可编辑的grid??</plant>
?30extjs学习札记（五）可编辑的grid??<plant>
?31extjs学习札记（五）可编辑的grid????<common>Cowslip</common>

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net