日夜干在线视频,天堂亚洲精品,一区二区三区在线不卡

Sun, 23 Sep 2012 02:54:00 GMT

“正则表达�?/[^0-9]/g,'')中的"/g"是什么意思？”

也�ؓ了能够便于大家对正则表达式有一个更为综合和深刻的认识，我将一些关键点和容易犯�p�涂的地方再�pȝ��ȝ��一下�?

�ȝ��1�Q�附件参数g的用�?

表达式加上参数g之后�Q�表明可以进行全局匚w��Q�注意这�?#8220;可以”的含义。我们详�l�叙�q�ͼ�

1�Q�对于表辑ּ�对象的exec�Ҏ��Q�不加入g�Q�则只返回第一个匹配，无论执行多少�ơ均是如此，如果加入g�Q�则�W�一�ơ执行也�q�回�W�一个匹配，再执行返回第二个匚w��Q�依�ơ类推。例�?
var regx=/user\d/;
var str=“user18dsdfuser2dsfsd”;
var rs=regx.exec(str);//此时rs的��gؓ{user1}
var rs2=regx.exec(str);//此时rs的��g��然�ؓ{user1}
如果regx=/user\d/g�Q�则rs的��gؓ{user1}�Q�rs2的��gؓ{user2}
通过�q�个例子说明�Q�对于exec�Ҏ��Q�表辑ּ�加入了g�Q��ƈ不是说执行exec�Ҏ��可以返回所有的匚w��Q�而是说加入了g之后�Q�我可以通过某种方式得到所有的匚w��Q�这里的“方式”对于exec而言�Q�就是依�ơ执行这个方法即可�?

2�Q�对于表辑ּ�对象的test�Ҏ��Q�加入g于不加上g没有什么区别�?

3�Q�对于String对象的match�Ҏ��Q�不加入g�Q�也只是�q�回�W�一个匹配，一直执行match�Ҏ��也��L��q�回�W�一个匹配，加入g�Q�则一�ơ返回所有的匚w��Q�注意这与表辑ּ�对象的exec�Ҏ��不同�Q�对于exec而言�Q�表辑ּ�即��加上了g�Q�也不会一�ơ返回所有的匚w��Q�。例如：
var regx=/user\d/;
var str=“user1sdfsffuser2dfsdf”;
var rs=str.match(regx);//此时rs的��gؓ{user1}
var rs2=str.match(regx);//此时rs的��g��然�ؓ{user1}
如果regx=/user\d/g�Q�则rs的��gؓ{user1,user2}�Q�rs2的��g��为{user1,user2}

4�Q�对于String对象的replace�Ҏ��Q�表辑ּ�不加入g�Q�则只替换第一个匹配，如果加入g�Q�则替换所有匹配。（开头的三道��试题能很好的说明这一点）

5�Q�对于String对象的split�Ҏ��Q�加上g与不加g是一��L��Q�即�Q?
var sep=/user\d/;
var array=“user1dfsfuser2dfsf”.split(sep);
则array的��gؓ{dfsf, dfsf}
此时sep=/user\d/g�Q�返回值是一��L��?

6�Q�对于String对象的search�Ҏ��Q�加不加g也是一��L��?

�ȝ��2�Q�附加参数m的用�?

附加参数m�Q�表明可以进行多行匹配，但是�q�个只有当��用^�?模式时才会�v作用�Q�在其他的模式中�Q�加不加入m都可以进行多行匹配（其实说多行的字符串也是一个普通字�W�串�Q�，我们举例说明�q�一�?

1�Q��用^的例�?
var regx=/^b./g;
var str=“bd76 dfsdf
sdfsdfs dffs
b76dsf sdfsdf”;
var rs=str.match(regx);
此时加入g和不加入g�Q�都只返回第一个匹配{bd}�Q�如果regx=/^b./gm�Q�则�q�回所有的匚w��{bd,b7}�Q�注意如果regx=/^b./m�Q�则也只�q�回�W�一个匹配。所以，加入m表明可以�q�行多行匚w��Q�加入g表明可以�q�行全局匚w��Q�综合到一起就是可以进行多行全局匚w��

2�Q��用其他模式的例子�Q�例�?
var regx=/user\d/;
var str=“sdfsfsdfsdf
sdfsuser3 dffs
b76dsf user6”;
var rs=str.match(regx);
此时不加参数g�Q�则�q�回{user3}�Q�加入参数g�q�回{user3,user6}�Q�加不加入m�Ҏ��没有影响�?

3�Q�因此对于m我们要清楚它的��用，��C��它只对^�?模式起作用，在这两种模式中，m的作用�ؓ�Q�如果不加入m�Q�则只能在第一行进行匹配，如果加入m则可以在所有的行进行匹配。我们再看一个^的例�?
var regx=/^b./;
var str=“ret76 dfsdf
bjfsdfs dffs
b76dsf sdfsdf”;
var rs=str.match(regx);
此时rs的��gؓnull�Q�如果加入g�Q�rs的��g��然�ؓnull�Q�如果加入m�Q�则rs的��gؓ{bj}�Q�也��是��_��在第一行没有找到匹配，因�ؓ有参数m�Q�所以可以��l�去下面的行��L��是否有匹配）�Q�如果m和g都加上，则返回{bj,b7}�Q�只加m不加g说明�Q�可以去多行�q�行匚w��Q�但是找��C��个匹配后��p��回，加入g表明��多行中所有的匚w��q�回�Q�当然对于match�Ҏ��是如此，对于exec呢，则需要执行多�ơ才能依�ơ返回）

�ȝ��3�Q�在HTML的textarea输入域中�Q�按一个Enter键，对应的控制字�W��ؓ“\r\n”�Q�即“回�R换行”�Q�而不�?#8220;\n\r”�Q�即“换行回�R”�Q�我们看一个前面我们�D�q�的例子�Q?
var regx=/a\r\nbc/;
var str=“a
bc”;
var rs=regx.exec(str);
�l�果�Q�匹配成功，rs的��gؓ�Q�{ }�Q�如果表辑ּ��?a\n\rbc/�Q�则不会被匹配，因此在一般的�~�辑器中一�?#8221;Enter”键代表着“回�R换行”�Q�而非“换行回�R”�Q�至��在textarea域中是这��L��?/p>

阿�?/a> 2012-09-23 10:54 发表评论

ExtJs��面布局�ȝ��

Sat, 08 Sep 2012 09:55:00 GMT

ExtJs��面布局�ȝ��

EXT标准布局�c?/p>

面板相当于一张干净的白�U�，如果直接在上面添加内容，��很难控刉��板中内容的显�C�Z��|�，面板元素��多��p��昑־�凌�ؕ�Q�所以需要在面板上划分不同的区域�Q�将面板内容展示到希望的位置上。ExtJS通过提供多种布局�c�L��为面板提供支持，主要包括如下10�U�：
   ContainerLayout�Q�容器布局�Q?nbsp;
   FitLayout�Q�自适应布局�Q?nbsp;
   AccordionLayout�Q�折叠布局�Q?nbsp;
   CardLayout�Q�卡片式布局�Q?nbsp;
   AnchorLayout�Q�锚点布局�Q?nbsp;
   AbsoluteLayout�Q�绝对位�|�布局�Q?nbsp;
   FormLayout�Q�表单布局�Q?nbsp;
   ColumnLayout�Q�列布局�Q?nbsp;
   TableLayout�Q�表格布局�Q?nbsp;
   BorderLayout�Q�边框布局�Q?br />接下来分别介�l�这10�U�布局�cȝ��特点及��用方式�?br />1 ContainerLayout容器布局
    Ext.layout.ContainerLayout 提供了所有布局�cȝ��基本功能�Q�它没有可视化的外观�Q�只是提供容器作为布局的基本逻辑�Q�这个类通常被扩展而不通过 new 关键字直接创建。如果面板（panel�Q�没有指定�Q何布局�c�，则它��会作�ؓ默认布局来创建，�?-4是主要配�|�项�?/p>

�?-4 Ext.layout.ContainerLayout主要配置��目�?/p>

配置��?/p>	参数�c�d��	说明
activeItem	String/Number	一个对当前�z�d��l��g的引用。activeItem只在那些一�ơ只能显�C�Z��?items ��目的布局中生效，例如�Q�Ext.layout.Accordion、Ext.layout.CardLayout、Ext.layout.FitLayout

2 FitLayout自适应布局

Ext.layout.FitLayout 是布局的基��c�，对应面板布局配置��（layout�Q�的名称�?fit�Q��?fit 布局��面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有�W�一个会被显�C��?br /> 注意�Q�在本节的示例之前会��单的介绍新概念，�l��g的xtype�c�d��。xtype�c�d��相当于组件的别名�Q�通过使用xtype�c�d��可以实现�l��g的�g时创建。在后箋的示例中会大量��用xtype来创建组�Ӟ��q�将有利于读者�Ş成��用xtype的习惯，而减��new关键字的使用�?br /> 下面是自适应布局的一个简单的�C�Z��?br /> 代码5-7�Q�FitLayout�Q�自适应布局�Q�示�?br />
在代�?-7中共为外层面板添加了2个子面板�Q�title分别�?#8220;嵌套面板一”�?#8220;嵌套面板�?#8221;�Q��ƈ指定外层面板的布局�c�d��为fit�Q�由�?5-11可以看到“嵌套面板一”充满了整个外层面板，�?#8220;嵌套面板�?#8221;�q�没有显�C�出来。运行效果如�?-11所�C��?br />

�?-11 Ext.layout.FitLayout布局�C�Z��

3 AccordionLayout折叠布局

Ext.layout.Accordion 扩展�?Ext.layout.FitLayout 布局�Q�对应面板布局�Q�layout�Q�配�|�项的名�U�Cؓaccordion。该布局会包含多个子面板�Q��Q何时候都只有一个子面板处于打开状态，每个子面杉K��内置了对展开和收�~�功能的支持。表5-5列出了它的主要配�|�项目�?/p>

�?-5 Ext.layout.Accordion主要配置��目�?/p>

配置��?/p>		参数�c�d��	说明
activeOnTop		Boolean	是否保持展开的子面板处于爉��板的��端�Q�true则交换当前展开面板到顶端，false则保持原来的位置不动�?/p>
animate		Boolean	讄��在展开或收�~�子面板时是否��用滑动方式，true则采用滑动方式，默认为false�?/p>
fill		Boolean	讄��子面板是否自动调整高度充满父面板的剩余空��_��true则充满，默认为true�?/p>
hideCollapse	Tool	Boolean	讄��是否隐藏子面板的 “展开收羃” 按钮�Q�true表示隐藏�Q�false表示昄��Q�默认�ؓfalse。如果设�\|��ؓtrue�Q�则应��titleCollapse配置��也为true�?/p>
titleCollapse		Boolean	讄��是否允许通过点击子面板的标题来展开或收�~�面板，true表示允许�Q�默认�ؓtrue�?/p>

下面是折叠布局的一个简单的�C�Z��?br /> 代码5-8�Q�AccordionLayout�Q�折叠布局�Q�示�?br />
代码5-8所�C�Accordion布局可以在多个不同的子面板之间切换，适合于表现大量的分组内容或制作可以��展的分组菜单�Q�在开发中使用较多的布局�c�，效果如图5-12~5-13所�C��?/p>

4 CardLayout卡片式布局
Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局�Q�对应面板布局�Q�layout�Q�配�|�项的名�U�Cؓ card。该布局会包含多个子面板�Q��Q何时候都只有一个子面板处于昄��状态，�q�种布局�cȝ��常用来制作向导和标签��c��该布局的重�Ҏ��式是 setActiveItem�Q�因��Z��ơ只能显�C�Z��个子面板�Q�所以切换子面板的唯一途径��是调用 setActiveItem �Ҏ��Q�它接受一个子面板id或烦引作为参数。CardLayout布局�q�没有提供一个子面板的导航机�Ӟ��D��逻辑需要开发�h员自己实现�?Ext.layout.CardLayout主要�Ҏ��如表5-6所�C��?/p>

�?-6 Ext.layout.CardLayout主要�Ҏ��?/p>

	�Ҏ��?/p>			说明
setActiveItem(	String/Number item ) : void	�Ҏ��子面�?/p>	id	或烦引切换当前显�C�的子面�?/p>

下面是卡片式布局的一个简单的�C�Z��?br /> 代码5-9�Q�CardLayout�Q�卡片式布局�Q�示�?br />
代码 5-9 演示�?CardLayout 卡片式布局的��用方式，�q�里的重�Ҏ��调用面板布局的setActiveItem�Ҏ��Ȁ�z�L��定id的子面板�q�行昄��Q�其中changePage函数的用途是计算点击上一��|��下一��之后将要显�C�的子面板id�Q�然后将该id传入到setActiveItem�Ҏ��中实现子面板的切换。运行效果如�?5-14~5-15所�C��?/p>

5 AnchorLayout锚点布局

    Ext.layout.AnchorLayout 是根据容器大��ؓ其所包含的子面板�q�行定位的布局�Q�对应面板布局�Q�layout�Q�配�|�项的名�U�Cؓ anchor。如果容器大��发生变化，所有子面板的位�|�都会根据规则重新计��，�q�自动渲染。��用anchor布局需要注意以下配�|�项的��用�?nbsp;
anchorSize�Q�父容器提供�Q?br />    anchor 布局提供�?anchorSize 配置��用来设�|�虚拟容器的大小�Q�默认情况下 anchor 布局是根据容器自�w�的大小来进行计��定位的�Q�如果提供了 anchorSize 属性则 anchor 布局��׃��Ҏ��该尺寸生成一个虚拟容器，然后�Ҏ��q�个虚拟容器的大��来�q�行计算定位�?nbsp;
anchor�Q�子容器提供�Q?br />    加入��C��?anchor布局面板中的子面板也都支持一�?anchor配置��，它是一个包�?2个值的字符�Ԍ��水��^值和垂直��|��例如�Q?100% 50%'�Q�这个值告知父容器应该怎样为加入到其中的子面板�q�行定位�Q�有效值包括如�?�c�R�?nbsp;
癑ֈ�比（Percentage�Q�：1-100之间的�Q意百分比�Q�第1��Ҏ��D��C�子面板占父容器宽度的百分比�Q�第2��Ҏ��D��C�子面板占父容器宽高的百分比�Q�例�?100% 50%'表示�Q�子面板宽度为父容器�?100%�Q�而高度�ؓ父容器的 1/2�Q�如果只提供一个��|��如：'50%'�Q�则只对子面板的宽度生效�Q�高度保持默认倹{�?nbsp;
    偏移��|��Offsets�Q�：��L��整数�Q�可以�ؓ正数也可以是负数�Q�第1��Ҏ��D��C�子面板到父容器双��~�的偏移量，�W?��Ҏ��D��C�子面板到父容器下边�~�的偏移量，例如'-50 -100'表示�Q�子面板距父容器的右边缘偏移50像素�Q�即子面板的宽度为父容器的宽度减�?0像素�Q�子面板距父容器的下边缘偏移100像素�Q�即子面杉K��度�ؓ父容器的高度减去100像素。如果只提供一个��|��如：'-50'�Q�则只对子面板的宽度生效�Q�高度保持默认倹{�?nbsp;
参考边�Q�Sides�Q�：有效的值包�?'right'�Q�或 'r'�Q�和'bottom'�Q�或 'b'�Q�。要求容器设�|�固定的大小或提供相应的anchorSize配置��Ҏ��会有正确的效果，例如'r b'�Q�说明父容器会计��与子容器宽度和高度的差��|��然后按父容器体（body�Q�的实际宽度和高度减去这个差��|��重新为子面板定位�?br />    以上3�U�赋值类型可以组合��用，例如'-50 75%'�Q�下面将分别针对�q?�U�情况�D例说明�?br />    1. 癑ֈ�比（Percentage�Q�定�?br />    在代�?5-10 中创��Z��个��用百分比方式为子面板�q�行定位的示例，从示例中可以清晰的体会到癑ֈ�比定位的特点�?br />    代码5-10�Q�百分比�Q�Percentage�Q�定位示�?br />
    代码5-10演示了百分比�Q�Percentage�Q�定位的使用方式�Q�其中anchor : '50% 50%'军_��了子面板的高度和宽度都�ؓ爉��板的50%。运行效果如�?-16所�C��?/p>

�?-16 Ext.layout.AnchorLayout布局�C�Z��Q�百分比定位�Q?br />2. 偏移��|��Offsets�Q�定�?br /> 在代�?5-11 中创��Z��个��用偏�U�d��gؓ子面板进行定位的�C�Z��Q�从�C�Z��中可以清晰的体会到偏�U�d��定位的特点�?br /> 代码5-11�Q�偏�U�d��|��Offsets�Q�定位示�?br />
代码5-11演示了偏�U�d��|��Offsets�Q�定位的使用方式�Q�其中anchor : '-10 -10',军_��了子面板到父面板的右边和下边都�ؓ10像素。运行效果如�?-17所�C��?/div>

�?-17 Ext.layout.AnchorLayout布局�C�Z��Q�偏�U�d��定位）
3. 参考边�Q�Sides�Q�定�?br /> 在代�?5-12 中创��Z��个��用参考边为子面板�q�行定位的示例，从示例中可以清晰的体会到参考边定位的特炏V�?br /> 代码5-12�Q�参考边�Q�Sides�Q�定位示�?br />
代码5-12演示了参考边�Q�Sides�Q�定位的使用方式�Q�其中anchor : 'r b',,军_��了子面板��相对于爉��板的双��和底边的差��D��行定位。运行效果如�?-18所�C��?/div>

�?-18 Ext.layout.AnchorLayout布局�C�Z��Q�参考边定位�Q?/div>

    在代�?-12中��用参考边为子面板�q�行定位�Q�下面给��Z��计算�q�程的简要说明：
     宽度计算�Q?br />         父容器体(body)宽度�?= 298�Q�说明：300减去左右两条边的宽度�Q?br />         宽度差��gؓ = 100�Q�说明：父容器体(body)宽度300 – 子容器宽�?00�Q?br />         计算后的子容器宽度�ؓ = 198�Q�说明： 298 - 100�Q?br />    高度计算�Q?br />         父容器体(body)高度�?= 123�Q�说明：150减去上下两条边的宽度和header的高度）
         高度差��gؓ = 50�Q�说明：父容器高�?50 – 子容器高�?00�Q?br />         计算后的子容器高度�ؓ = 73�Q�说明：123 -50�Q?br />6 AbsoluteLayout�l�对位置布局

Ext.layout.AbsoluteLayout扩展自Ext.layout.AnchorLayout布局�Q�对应面板布局�Q�layout�Q�配�|�项的名�U�Cؓ absolute。它可以�Ҏ��子面板中配置�?x/y坐标�q�行定位�Q��ƈ且坐标值支持��用固定值和癑ֈ�比两�U��Ş式。下面是�l�对位置布局的简单的�C�Z��?br /> 代码5-13�Q�AbsoluteLayout�l�对位置布局�C�Z��

代码5-13演示了AbsoluteLayout�Q�绝对位�|�布局�Q�的使用方式�Q�在�C�Z��中子面板的x、y配置��决定了它在爉��板中的具体位�|�。运行效果如�?-19所�C��?/p>

�?-19 Ext.layout.AbsoluteLayout布局�C�Z��

7 FormLayout表单布局

    Ext.layout.FormLayout是�ؓ表单�Ҏ��设计的布局�Q�用来管理表单字�D늚�昄��Q�通常情况下直接��用Ext.form.FormPanel 表单面板�Q�因为它已经内置了表单布局�Q��ƈ且提供了表单提交、读取等表单的功能。��用form布局的容器可以��用是些表单特有的配置��，它们包括�Q?nbsp;
hideLabels: (Boolean) �Q�是否隐藏字�D�|��{�，默认为false�?nbsp;
itemCls: (String) �Q�每个字�D�项和字�D�|��{�上的样式类�Q�默认��gؓ'x-form-item'�?nbsp;
labelAlign: (String) �Q�字�D�|��{��寚w��方式�Q�默认�ؓ�I��C�左寚w��?nbsp;
labelPad: (Number) �Q�字�D�|��{�与字段直接的空白，默认�?5�Q�该��只在提供labelWidth配置��的情况下生效�?nbsp;
labelWidth: (Number) �Q�字�D�|��{��宽度�Q�默认�ؓ100�?��M��l��g都可以加入到表单布局的容器当中，但是扩展�?Ext.form.Field �cȝ��l��g可以支持一些表单项的特�D�属性，它们包括�Q?nbsp;
clearCls: (String) �Q�应用到专门的清除div上的样式�Q�默认�ؓ'x-form-clear-left'�?nbsp;
fieldLabel: (String) �Q�字�D�|��{�上的文本，默认�?'�?nbsp;
hideLabel: (Boolean) �Q�设�|�是否隐藏标�{�֒�分割�W�，默认为false�?nbsp;
itemCls: (String) �Q�应用到表单字段及标�{�上的样式类�Q�默认�ؓ'x-form-item'�?nbsp;
   labelSeparator: (String) �Q�字�D�|��{�֒�字段本��n直接的分隔符�Q�默认�ؓ':'�?nbsp;
labelStyle: (String) �Q�应用到字段标签上的样式�c�R�?br />    Ext.layout.FormLayout主要配置��目如表5-7所�C��?/p>

�?-7 Ext.layout.FormLayout主要配置��目�?/p>

配置��?/p>	参数�c�d��	说明
elementStyle	String	应用到每一个布局中元素上的样式类�Q�默认�ؓ''
labelSeparator	String	字段标签与字�D�\|��w�直接的分隔�W�，默认�?:'。如果布局和面板中同时配置了labelSeparator�Q�则面板中的讄��会覆盖布局中的讄��?/p>
labelStyle	String	应用到每一个字�D�\|��{�上的样式类�Q�默认�ؓ''�?/p>

下面是表单布局的简单的�C�Z��Q�在�C�Z��中创��Z��一个包含用户名和密�?个输入字�D늚�面板�Q�这个面板最�l�生成的效果与第4章中介绍的FormPanel相同�?br /> 代码5-14�Q?FormLayout�Q�表单布局�Q�示�?br />
代码5-14演示�?FormLayout�Q�表单布局�Q�的使用方式�Q�通过表单布局创徏的面板与使用FormPanel创徏的表单面板功能相同。运行效果如�?-20所�C��?/p>

�?-20 Ext.layout.FormLayout布局�C�Z��

8 ColumnLayout列布局

    Ext.layout.ColumnLayout对应面板布局layout配置��的名称为column。这是一�U�多列风格的布局样式�Q�每一列的宽度都可以根据百分比或固定值来�q�行讄��Q�高度允许根据内容进行变化，它支持一个特�D�的属�?columnWidth�Q�每一个加入到容器中的子面杉K��可以通过columnWidth配置��Ҏ��定百分比或��用width配置��Ҏ��定固定��|��来确定列宽�?width 配置��Ҏ��以像素�ؓ单位的固定宽度，必须是大于或�{�于 1 的数字。columnWidth配置��Ҏ��已百分比为单位的相对宽度�Q�必��L��大于0��于1的小敎ͼ�例如“.25”�?br />    注意�Q�所有列的columnWidth值相加必��ȝ��?�?br />    1. 指定固定列宽
    代码 5-15 中将创徏了包�?2 个子面板的列布局�C�Z��Q��ƈ指定列的固定宽度�?100�Q�看下面的代码�?br />    代码5-15�Q�指定固定列宽示�?br />
    代码5-15演示了ColumnLayout�Q�列布局�Q�指定固定列宽的用法�Q�子面板的width配置
��用于设�|�列宽。运行效果如�?-21所�C��?/p>

�?-21 Ext.layout.ColumnLayout布局�C�Z��Q�固定列宽）
2. 使用癑ֈ�比指定列�?br /> 在代�?-16中将创徏了一个包�?个子面板的列布局�C�Z��Q��ƈ分别指定列的相对宽度 �?0%�?0%�Q?0%�?3表示,70%�?7表示�Q�，看下面的代码�?br /> 代码5-16�Q��用百分比指定列宽�C�Z��

代码 5-16 演示�?ColumnLayout�Q�列布局�Q��用百分比指定列宽的用法，子面板的
columnWidth配置��用于设�|�列对应的百分比。运行效果如�?-22所�C��?/div>

�?-22 Ext.layout.ColumnLayout布局�C�Z��Q�百分比列宽�Q?br />3. 固定��g��癑ֈ�比结合��?br /> 在代�?-17中创��Z��包含3个子面板的列布局�C�Z��Q��ؓ“子面板一”指定固定宽度100�Q?#8220;子面板二”相对宽度�?0%�Q?#8220;子面板三”的相对宽度�ؓ70%�Q�请看下面的代码�?br /> 代码5-17�Q�固定��g��癑ֈ�比结合��用示�?br />
在代�?-17中同时��用了固定值和癑ֈ�比两�U�方式来指定列宽�Q�通过观察�?-17可以看到�Q�固定��g��先于癑ֈ�比进行计��，也就是说癑ֈ�比计��的基础宽度是父容器的宽度减��d��定列宽之后剩余的宽度倹{��运行效果如�?-23所�C��?/div>

�?-23 Ext.layout.ColumnLayout布局�C�Z��Q�固定��g��癑ֈ�比结合）

下面以一个简单的公式�q�行说明�Q?br /> �W�一列宽�?= 100 �Q�说明，�W�一列是通过width配置��Ҏ��定的固定��|��?br /> �W�二列宽�?= �Q?50 – 100 �Q? 0.3 �Q�说明：按比例分割剩余宽度）�?br /> �W�三列宽�?= �Q?50 – 100 �Q? 0.7 �Q�说明：按比例分割剩余宽度）�?/p>

9 TableLayout表格布局

Ext.layout.TableLayout对应面板布局layout配置��的名称为table。这�U�比较允�怽�非常�Ҏ��的渲染内容到HTML表格中，可以指定列数�Q�columns�Q�，跨行�Q�rowspan�Q�，跨列�Q�colspan�Q�，可以创徏出复杂的表格布局�?br /> 注意�Q�必��M��用layoutConfig属性来指定属于此布局的配�|�，table布局仅有唯一的布局配置��columns�Q�而包含在其中的子面板会具有rowspan和colspan两个配置��V�?br /> 下面是表格布局的一个简单的�C�Z��?br /> 代码5-18�Q�TableLayout�Q�表格布局�Q�示�?br />
代码5-18演示了TableLayout�Q�表格布局�Q�的使用方式�Q�其中子面板的colspan和rowspan配置��决定了它跨列和跨行的数量，另外需要指出的是，子面板在爉��板中是从上到下由左至双��行顺序排列的。效果如�?-24所�C��?/p>

�?-24 Ext.layout.TableLayout布局�C�Z��

10 BorderLayout�Ҏ��布局

Ext.layout.BorderLayout 对应面板布局 layout 配置��的名称�?border。该布局包含多个子面板，是一个面向应用的UI风格的布局�Q�它��整个容器分�?个部分，分别是：east、south、west�?north、center。加入到容器中的子面杉K��要指定region 配置��Ҏ��告知容器要加入到那个部分�Q��ƈ且该布局�q�内��Z��寚w��板分隔栏的支持。下面是�Ҏ��布局的一个简单的�C�Z��?br /> ��Z��q�行说明�Q�将在代�?-19中创��Z��个包含全部border布局部分的示例，�q�个�C�Z��可以形象的展�C�border布局的结构�?br /> 代码5-19�Q�BorderLayout�Q�边框布局�Q�示�?br />
�q�行代码5-19会得到如下页面效果，从图中可以看到整个页面分�?个部分，�q�里重点是对region配置��的使用�Q�它军_��了子面板在border布局的显�C�，效果如图5-25所�C��?/p>

阿�?/a> 2012-09-08 17:55 发表评论

Ext2.0中的form使用实例

Mon, 03 Sep 2012 15:16:00 GMT

Ext2.0中的form使用实例

Ext2.0的form不单增加了时间输入控件、隐藏输入控�Ӟ��q�修改了创徏�Ҏ��Q�通过formpanel代替了原来form�Q�column也根据新的布局定义更新了定义方式。��M��来说�Q�定义一个form更简单便捷了。本文将通过一个实例介�l�一�?.0的form的创��Z��及其大部分控件的使用�Ҏ��Q�因水��^有限�Q�错漏难免，忘大家多多谅解！

我们先来看看我们��要设计的form的情况：

呵呵�Q�form有点杂�ؕ�Q�不�q�在�q�个fomr里包含了�l�大部分Ext2.0的控�Ӟ��我将会和大家一��h��讨一下这些控件的使用�?/p>

在创��Z��个form之前�Q�我们先增加以下语句�Q?/p>

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

�W�一句的目的是�ؓ需要的元�g提供提示信息功能�Q�form的主要提�C�Z��息就是客��L��验证的错误信息了�?/p>

�W�二句的目的��是讄��控�g的错误信息显�C�Z��|�，主要可选的位置有：

位置�?/p>	描述
qtip	当鼠标移动到控�g上面时显�C�提�C?/p>
title	在浏览器的标题显�C�，但是��试�l�果是和qtip一��L��
under	在控件的底下昄��错误提示
side	在控件右�Ҏ��C�Z��个错误图标，鼠标指向图标时显�C�错误提�C?/p>
[element id]	错误提示昄��在指定id的HTML元�g�?/p>

�q�个大家可以�Ҏ��各�h喜好讄��Q�我习惯使用“side”�Q�这里有一点要注意的，��是注意控制控�g的宽度，以防不够宽度昄��错误图标�Q�这个下面会说到�?/p>

好了�Q�现在创建我们的form�Q?.0的方法就是直接创��Z��个formpanel�Q?/p>

var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '表单例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items: [],
buttons: []
});
simpleForm.render(document.body);

在formpanle里，我们定义了form控�g的标题是在左边的�Q�labelAlign: 'left'�Q�；form的标题栏昄��标题“表单的例�?#8221;�Q�它的按钮位�|�是在右寚w��的（buttonAlign:'right'�Q�；边的�c�d��讄��了内补丁 5px�Q�bodyStyle:'padding:5px'�Q�；��d��度是600px�Q�设�|�了面板的边角是圆弧�q�度的（frame:true�Q�，我设�|�这个属性主要目的不是因��角，而是因�ؓ背景�Q�如果不讄��q�个�Q�背景颜色将为白�Ԍ��讄��了这个将会加入�v蓝色的背景图�Q�好看点�Q�还讄��了form控�g的标题宽度是80px�Q�labelWidth:80�Q�。还有一些其它的讄��选项�Q�我�q�里��׃��多说�Q�大家可以参�?.0的API�?/p>

items数组的设�|�是我们的重点了�Q�form上的所有控仉��是在�q�里讄��的�?/p>

从form的结构图中看刎ͼ�form整体上是分了两列的（实际上不是的�Q�呵呵）。因��分列�Q�所以要使用columnLayout�c�R��在使用 columnLayout�c�M��前，我们需要了解一下CSS中float属性的作用�Q�改属性主要作用是讄��对象是否及如何��Q动，属性��gؓnone、left 和right三个。column讄��是left�Q�意思就是对象��Q在左边的。那�q�个有什么作用呢�Q�其实这个和我们在word中输入文字，默认文字是左寚w��的，当一行文字的宽度��过��面的宽度时��自动换行是一��L��?我们通过一个例子来说明一下�?/p>

首先我们定义一个div�Q�背景色是黑�Ԍ��宽度和高度都�?00�Q?/p>

然后在里面加�?个div�Q�每个宽度和高度都是200�Q�背景色一个是�U�色�Q�一个是�l�色�Q?/p>

我们来看看效果：

在没有��用float之前�Q�两个子div是分别各占一行的。好�Q�现在我们在两个子div中加�?#8220;float:left”在看看效果：

两个子div出现在同一行了。我们复制一下两个子div�Q�粘贴两�ơ，然后看看效果�Q?/p>

6个子div有序的按左对齐方式排列在一起了�Q�当一行的子div的宽度超�q�了父div的宽度时�Q�子div自动换行��C��W�二行�?/p>

不知道大家是否看得明白？看不明白自己再动手改变一下子div的宽度和高度�Q�看看效果。column的工作方式就是这��L��。明白这个很重要�Q�因为在定义checkbox和radio的时候，如果惛_��们的选项在同一行，��p��注意column的宽度，不然��无法让他们在同一行。不�q�现在column是通过癑ֈ�比来定义宽度的，我们只要控制好百分比��p��了�?/p>

好了�Q�我们��l�写form�Q�因��用到column�Q�所以我们先在formpanel的itmes加入一个column的定义：

{
layout:'column',
border:false,
labelSeparator:'�Q?,
items:[]
}

代码里定义了在这里��用的是columnlayout�Q�layout:'column'�Q�；没有边（border:false�Q�；标题的分隔符��h��们用中文冒号代替英文的冒��P��labelSeparator:'�Q?�Q�。coulmnLayout里的控�g��定义在items里�?/p>

我们首先在items里加入一个常用输入控�Ӟ��是用来输入姓名的�Q?/p>

{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '姓名',
name: 'name',
anchor:'90%'
}]
}

我们讄��了该列的宽度占��d��度的50%�Q�columnWidth:.5�Q�；在布局里放了一个formlayout用来攄��控�g�Q�layout: 'form'�Q�；formlayout也是没有边的�Q�border:false�Q�。在formlayout里有一个类型�ؓ textfield'�Q�xtype:'textfield'�Q�的输入控�g。控件标题�ؓ姓名�Q�fieldLabel: '姓名'�Q�，输入框（input�Q�的name属性设�|?#8220;name”�Q�name: 'name'�Q�，输入框的长度为列宽减��L��题的宽度后的90%�Q�anchor:'90%'�Q�，余下�?0%的是�l�显�C�错误信息图标用的�?/p>

在加入性别的radio控�g时就要注意了�Q�这里需要加入两个radio�Q�第一radio是有标题的，�W�二是没有的�Q�而且两个radio加�v来的宽度应该正好是余下的列宽�Q?0%�Q�：

从代码中可以看到�Q�除了列宽设�|��ؓ25%外，其它的列讄��和第一控�g是一栗��Formlayout里加入了一个类型�ؓradio的控件。控件的标题是性别�Q�控件的选择昄��文本是男�Q�boxLabel:'��P��Q�input的name属性值是sex�Q�name: 'sex'�Q�，该控仉��认是已选的�Q�checked:true�Q�，控�g的��|��value�Q�是��P��inputValue:'�?�Q�，input的宽度是 95%。在�q�里我还讄��一个css属性，�剙��的外补丁�?px�Q�style:'margin-top:5px'�Q�，原因是�ؓ了选择按钮和标题对齐，大家可以��该属性去掉然后看看效果�?/p>

�W�二个raido控�g的列讄��有所不同�Q�因为它不需要标题，所以要讄��隐藏标题�Q�hideLabels:true�Q�，标题的宽度设�|��ؓ 0�Q�labelWidth:0�Q?�q�要讄��其标题分隔符号�ؓ�I�（labelSeparator:''�Q�。其余的讄��和第一个radio的设�|�没有不同，只是input的��g��同了�?/p>

我们已经讄��?列，3列的列宽分别�?0%�?5%�?5%�Q�根据float的原则，下一列将从第二行开始�?/p>

在第二行�W�一列我们要增加的是一个日期选择控�g�Q?/p>

{

columnWidth:.25,

border:false,

items: [{

style:'margin-top:5px',

xtype:'radio',

fieldLabel: '性别',

boxLabel:'�?,

checked:true,

inputValue:'�?,

anchor:'95%'

}]

},{

columnWidth:.25,

labelWidth:0,

labelSeparator:'',

hideLabels:true,

border:false,

items: [{

style:'margin-top:5px',

xtype:'radio',

fieldLabel: '',

boxLabel:'�?,

inputValue:'�?,

anchor:'95%'

}]

}

{
columnWidth:.5,

layout: 'form',

border:false,

items: [{

xtype:'datefield',

fieldLabel: '出生日期',

name: 'birthday',

anchor:'90%'

}]

}
日期控�g的列宽也�?0%�Q�列的其它设�|�没有变化。控件的�c�d��为datefield�Q�标题是出生日期�Q�input的name属性是birthday�Q�intput宽度也是讄��?0%�Q�出来留出空位给错误信息外，�q�可以让控�g与上一行的姓名的宽度相同，整列看�v来比较整齐�?/p>

日期控�g的设�|�和普通文本输入的讄��一��L��单，�q�里��׃��多说了。不�q�要说到的是汉化的问题。在2.0版自带的本地化文件ext-lang-zh.js中存在一些小bug�Q�我们需要自�׃��改一下�?/p>

首先要修改的是周的显�C�，原来的定义是�Q?/p>

因�ؓ在日期选择中显�C�的区域不够宽，只能昄��一个汉字，所以需要将上面定义的把“�?#8221;��L��Q�修改�ؓ�Q?/p>

Date.dayNames = [ 

"周日", 

"周一", 

"周二", 

"周三", 

"周四", 

"周五", 

"周六" 

];

Date.dayNames = [
"�?,
"一",
"�?,
"�?,
"�?,
"�?,
"�?
];

在年份和月䆾选择中的按钮文字�q�是英文“ok”�?#8220;cancel”的，�q�里我们也需要修改一下：

if(Ext.DatePicker){
Ext.apply(Ext.DatePicker.prototype, {
todayText : "今天",
minText : "日期在最��日期之�?,
maxText : "日期在最大日期之�?,
disabledDaysText : "",
disabledDatesText : "",
monthNames : Date.monthNames,
dayNames : Date.dayNames,
nextText : '下月 (Control Right)',
prevText : '上月 (Control Left)',
monthYearText : '选择一个月 (Control Up/Down 来改变年)',
todayTip : "{0} (Spacebar)",
okText : "��定",
cancelText : "取消",
format : "y�q�m月d�?
});
}

上面定义中黑色字体部分就是要加入的代码。如果不喜欢默认格式�?#8220;y�q�m月d�?#8221;�Q�需要修改：

if(Ext.form.DateField){
Ext.apply(Ext.form.DateField.prototype, {
disabledDaysText : "��用",
disabledDatesText : "��用",
minText : "该输入项的日期必��d�� {0} 之后",
maxText : "该输入项的日期必��d�� {0} 之前",
invalidText : "{0} 是无效的日期 - 必须�W�合格式�Q?{1}",
format : "Y-m-d"
});
}
修改DatePicker不会改变DateField的格式的�Q�这个自己根据情况决定，呵呵�?/p>

我们�l�箋�Q�现在需要加入一个学历的下拉选择控�g。下来选择控�g最重要的一个定义就是数据的定义的，数据定义错误�Q�可能得不到我们需要的效果�Q�也是很多朋友感觉最�ȝ��的地斏V�?/p>

{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'combo',
store: new Ext.data.SimpleStore(
{
fields: ["retrunValue", "displayText"],
data: [[1,'��学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'请选择学历',
emptyText:'选择学历',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '学历',
name: 'education',
anchor:'90%'
}]
}

列的定义��׃��说了�Q�没变化。在items里，�c�d��讄��成combo了，在这里定义了一个sotre属性，��是选择值存储的地方�Q�因为是在客��L��的数据，所以��用了一个简单存储（SimpleStore�Q�。在存储里，我们通过一个数�l�定义了retrunValue和displayText两个字段�?retrunValue字段指定是提交给后台的��|��displayText字段指定是在下拉中显�C�的选择倹{��然后我们在data里定义了几组数据�Q�data: [[1,'��学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]�Q�，我们可以看到�Q�每�l�数据都是根�?fiedls的定义来�l�成的，数组里第一个值就是retrunValue的��|��W�二个值就是displayText的��|��例如[1,'��学']�Q�就表示 retrunValue�?�Q�displayText是小学�?/p>

下面��是很重要的一步了�Q�设�|�下拉选择框的值和昄��文本。本例中讄��了下拉选择框的提交值对象的是存储中的retrunValue字段�Q�valueField :"retrunValue"�Q�，昄��文本是存储中的displayText字段�Q�displayField: "displayText"�Q�，通过�q�两个设�|�就可将存储中的数据和下拉框对应��h��?/p>

因�ؓ数据是在本地�Q�所以设�|�了模式为local�Q�mode: 'local'�Q�。该下拉列表只允讔R��择�Q�不允许输入�Q�editable: false�Q�，而且是必��选择一个选项�Q�forceSelection: true�Q�。在没有选择值时昄��为选择学历�Q�emptyText:'选择学历'�Q�。提交form�Ӟ��该项如果没有选择�Q�则提示错误信息“请选择学历” �Q�blankText:'请选择学历'�Q�。该选项��g��允许为空�Q�allowBlank:false�Q��?strong>大家要注意的�?/strong>hiddenName和name属性，name只是改下拉的名称�Q�作用是可通过�Q�而hiddenName才是提交到后台的input的name。如果没有设�|�hiddenName�Q�在后台是接收不到结构的�Q�这个大家一定要注意�?/strong>

因�ؓ�q�个下拉是只能选择的，所以一定要讄��属性triggerAction为all�Q�不然当你选择了某个选项后，你的下拉��只会出现匹配选项值文本的选择��，其它选择��Ҏ��不会再显�C�Z��Q�这样你��׃��能更改其它选项了�?/p>
如果要�ؓ控�g讄��默认��|��p��|�属性value�Q�value的��D��讄��为提交给后台的��|��不要讄��为显�C�文本。例如本例要讄��大学为默认值得�Q�则讄��value的��gؓ6�?/p>
现在到第三行了，我们要创��Z��个checkbox选项输入�Q?/p>
{
columnWidth:.35,
layout: 'form',
border:false,
items: [{
xtype:'checkbox',
fieldLabel: '权限�l?,
boxLabel:'�pȝ��理�?,
name: 'popedom',
inputValue:'1',
anchor:'95%'
}]
},{
columnWidth:.2,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
xtype:'checkbox',
fieldLabel: '',
boxLabel:'��理�?,
name: 'pepedom',
inputValue:'2',
anchor:'95%'
}]
},{
columnWidth:.2,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
xtype:'checkbox',
fieldLabel: '',
boxLabel:'普通用�?,
name: 'pepedom',
inputValue:'3',
anchor:'95%'
}]
},{
columnWidth:.25,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
xtype:'checkbox',
fieldLabel: '',
boxLabel:'访客',
name: 'pepedom',
inputValue:'4',
anchor:'95%'
}]
}
checkbox的设�|�和radio的设�|�大同小异，大家注意列宽的定义就行�?/p>
�W�四行的两个输入框主要是��试通过vtypes属性来验证输入框的输入的：

{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '电子邮�g',
name: 'email',
vtype:'email',
allowBlank:false,
anchor:'90%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '个�h主页',
name: 'url',
vtype:'url',
anchor:'90%'
}]
}]
}

�q�里的定义和普通的文本输入框没什么区别，只是多了一个vtypes的属性定义。Vtypes里��d��定义了email、url、alpha�?alphanum四种�c�d��数据格式�Q�email和url�q�个不用介绍了，呵呵。alpha是字母和下划�U�的�l�合�Q�alphanum是字母、下划线和数字的�l�合�?/p>
下面要加入一个tabpanel�Q�加�?个tab��c�?/p>
{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[]
}

要注意的是，�q�个tabpanel不是在上面coulmn的items里加的，因�ؓ不在column里。我们加在formpanel里。把item �c�d��讄��?tabpanel'��p��了，然后��标�{�N��头的背景讄��为透明的（plain:true�Q�，当前�z�d��的标�{�N��是第一��（activeTab: 0�Q�，高度讄��?35px�Q�height:235�Q�，tab��늚�面板使用内补�?0px�Q�defaults: {bodyStyle:'padding:10px'}�Q��?/p>
好了�Q�现在在tabpanel的items加入标签��c��第一��主要有两个输入控�g�Q�一个是vtypes�c�d��alphanum的登录输入框和一个密码输入框�?/p>
{
title:'��d��信息',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: '��d��?,
name: 'loginID',
allowBlank:false,
vtype:'alphanum',
allowBlank:false
},{
inputType:'password',
fieldLabel: '密码',
name: 'password',
allowBlank:false
}]
}

在标�{�֮�义了�Q�设�|�了标签标题是登录信息（title:'��d��信息'�Q�，控�g容器是formlayout�Q�layout:'form'�Q�，控�g的默认宽度是230px�Q�defaults: {width: 230}�Q�，默认控�g�c�d��是textfield�Q�defaultType: 'textfield'�Q��?/p>
两个控�g的定义与前面的textfield定义没什么区别，只是密码输入框需要定义input控�g的类型�ؓpassword�Q�inputType:'password'�Q�。两个控仉��不允��ؓ�I�（allowBlank:false�Q��?/p>
�W�二个标�{�N��里有numberfield、timefield和textfield三个控�g�Q?/p>
{
title:'数字旉��字母',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
xtype:'numberfield',
fieldLabel: '数字',
name: 'number'
},{
xtype:'timefield',
fieldLabel: '旉��',
name: 'time'
},{
fieldLabel: '�U�字�?,
name: 'char',
vtype:'alpha'
}]
}

Numberfield��֐�思义��是只能输入数字的输入控件。在该例子，没做最大倹{��最��g�Q何限�Ӟ��如果要设�|�最大值和最��|��分别讄�� maxValue和minValue两个属性就行了。如果要讄��数字输入长度�Q�例如��n份证��L��Q�可以设�|�maxLength和minLength两个属性。可以通过讄��maxText、minText、maxLengthText和minLengthText讄��各自的验证出错信息。可通过 allowDecimals属性设�|�是否只允许输入整型��|��默认值是true�Q�允许输入��Q�Ҏ��。设�|�allowNegative讄��是否只允许输入正敎ͼ�默认值是true�Q�允许输入正负数。通过decimalPrecision属性可讄��数点后的位敎ͼ�默认值是2位�?/p>
timefield是新增加的时间输入控�Ӟ��起��I补日期输入控件不能输入时间的作用。它的定义也很简单，讄��c�d��为timefield��p��了�?timefield默认旉��格式�?2��时制的�Q�我们可通过修改format属性来修改其数据格式。通过讄��increment属性可讄��下拉选择值得旉��区间�Q�默认值是15分钟的。还可以和数字输入控件一栯��|�最大值和最��倹{��下拉的讄��和combobox是一��L��?/p>
在目前的版本中，timefield�c�还没有汉化�Q�所以我们要在本地文件中加入timefield的汉化定义：

if(Ext.form.TimeField){
Ext.apply(Ext.form.TimeField.prototype, {
format:'G:i:s',
minText : "该输入项的时间必��d��于或�{�于�Q?{0}",
maxText : "该输入项的时间必��d��于或�{�于�Q?{0}",
invalidText : "{0}不是有效的时�?,
});
}

在这里，我默认定义了旉��格式�?4��时制的�Q�小时�ؓ个位数是不加前缀0�?/p>
最后一个加入的是测试纯字母输入的，和email�{�是一��L��Q�我��׃��介绍了�?/p>
在最后一个tab��中加入了一个textarea输入�Q?/p>
{
title:'文本区域',
layout:'fit',
items: {
xtype:'textarea',
id:'area',
fieldLabel:''
}
}

和textfield一��P��只要讄��c�d��为textarea��可以了�Q�唯一的区别是��Z��让textarea和面板自适应面板�Q��用了fitlayout作�ؓ它的容器�Q�所以在�q�里我们不用讄��textarea的宽度和高度�?/p>
最后一步就是�ؓform��d��按钮了，在formpanel的buttons属性中我们加入了一个保存按钮和取消按钮�Q?/p>
buttons: [{
text: '保存',
handler:function(){
if(simpleForm.form.isValid()){
this.disabled=true;
simpleForm.form.doAction('submit',{
url:'test.asp',
method:'post',
params:'',
success:function(form,action){
Ext.Msg.alert('操作',action.result.data); this.disabled=false;
},
failure:function(){
Ext.Msg.alert('操作','保存��p�|�Q?);
this.disabled=false;
}
});
}
}
},{
text: '取消',
handler:function(){simpleForm.form.reset();}
}]

在formpanel�c�M��Q�form属性指向的是formpanle里的basicform对象�Q�我们可通过formpanle.form来��用该 basicform对象。在被例子，我们已经��formpanel对象赋值给了simpleForm�q�个变量�Q�所以我们可以通过 simpleForm.form讉K��面板里的basicform对象�?/p>
在buttons里定义的按钮默认是Ext.Button�Q�所以按钮的属性定义可以查看Ext.Button的API。在�q�里两个按钮都没用到其它属性，只是讄��了显�C�文本（text�Q�和单击事�g�?/p>

保存按钮要做的就是先做basicform的客��L��验证�Q�simpleForm.form.isValid()�Q�，验证通过了则讄��该按钮状态�ؓ disable�Q�防�?�ơ提交。然后调用simpleForm.form.doAction�Ҏ��提交数据。doAction�Ҏ��的第一个参�?“submit”的意思是表示执行的是提交操作�Q�提交的后台��面是test.asp�Q�url:'test.asp'�Q�，提交方式�?post�Q�method:'post'�Q�，没有其它提交参数�Q�params:''�Q�，提交成功后执行success定义的函敎ͼ�本例只是昄��一个保存成功信息�?strong>后台�q�回的数据格式是需要我们注意的�Q�一定要json格式�Q�而且必须包含“success:true”�Q�不然不会执行success定义的函数�?/strong>success 定义的函数返回两个参敎ͼ��W�一是form本��n�Q�第二个是ajax�q�回的响应结果，在action.result�q�个json数组了保存了后台�q�回的数据。例如本例后台返回的json�l�构�?#8220;{success:true,data:~~~}”�Q�其中data部分我将提交的数据将字段名和数据�l�合成一个字�W�串。在success函数中，我通过“Ext.Msg.alert('操作',action.result.data);”��data数据昄��出来。我们还定义failure函数�Q�就是网�l�通讯存在问题的时候将昄��错误信息�?/p>

取消按钮��是��单的reset一下form的控件�?/p>

如果想form按以前的老办法提交，可以在formpanel的定义中加入一下设�|�：

onSubmit: Ext.emptyFn,
submit: function() { this.getEl().dom.submit();}
�W�一个设�|�的目的是取消formpanel的默认提交函数。第二就是设�|�新的提交方式�ؓ旧方式提交�?/p>

阿�?/a> 2012-09-03 23:16 发表评论

引用 Ext.Panel面板

Mon, 03 Sep 2012 15:15:00 GMT

引用 Ext.Panel面板

使用�q�Delphi、Visual Basic或Java Swing�{�开发语�a�的读者对面板�Q�Panel�Q�一定非常熟悉，我们可以在面杉K��意地排版布局�Q�它��像是一副骨架撑起了整个用户界面�Q�在ExtJS中面板同栯��v着��面骨架的作用，所以学习面板是学习ExtJS��面布局的基��和�v炏V�?ExtJS面板从��用方式上来说更接�q�于Java Swing中的面板�Q�通过为其指定不同的布局方式或者进行面板嵌套达到复杂布局的目的，因此布局方式是否丰富�Q�能否进行嵌套，是衡量ExtJS布局灉|��性的重要指标。ExtJS面板共支�?0�U�不同风格的布局样式�Q��ƈ且允许无限制的进行嵌套，�q�就�l�我们创造了一个尽情发挥的强大舞台�?nbsp;

一、认识Ext.Panel

    Ext.Panel扩展自Ext.Container�Q�是各种�l��g的容器也是基��c�，可以扩展出功能更加强大的面板。作为标准的面板�l��g主要包括如下5部分�Q�底部工��h��Q�bottom toolbars�Q�、顶部工��h��Q�top toolbars�Q�、面板头部（header�Q�、面板底部（footer�Q�和面板体（body�Q�，下面是一个标准面板的�C�Z��Q�可以帮助读者更清晰的认识面板组件�?nbsp;
    代码5-1�Q�Ext.Panel�C�Z��

    代码5-1演示了标准面板的创徏方式�Q�从�?-1中可以看��C��个标准面板所��h��的全部组成部分，�q?部分不但位置不同功能也不��相同，它们分别有自己存在的价��|��读者可以根据业务需要选择使用其中合适的部分构成自己需要的��面。效果如�?-1所�C��?br />

二、Ext.Panel 的主要功�?/strong>
上节介绍了ExtJS面板的主要表现�Ş式，接下来将介绍面板�l��g的主要配�|�项及常用方法，�q�些配置��及�Ҏ��在后面的示例中用到�Q�可以把�q�部分内容作为后�l�章节的铺垫�Q�进行快速的��览�Q�Ext.Panel主要配置��目如表5-1所�C��?

�?-1 Ext.Panel主要配置��目表表

配置��?/p>
参数�c�d�� 说明

animCollapse Boolean 讄��面板折叠或展开时是否显�C�动��L��果，如果 Ext.Fx �c�d��用则默认
为true�Q�否则�ؓfasle�?/td>

applyTo Mixed 一个页面上已经存在的元素或元素id�Q�组件将会追加到该元素的后面�Q�而不是将其作为新�l��g的容器�?/font>

autoDestroy Boolean 讄��是否自动销毁从容器中移除的�l��g�Q�默认�ؓtrue�Q�否则要手工销�?/font>

autoHeight Boolean 是否使用自动高度�Q?/font>true则��用自动高度，false则��用固定高度，默认�?font face="TimesNewRomanPSMT">false

autoLoad Object/String/
Function 讄��面板自动加蝲�?/font>url地址。如果不�?/font>null则面板会��试加蝲�?/font>url
�q�立��d��面板中进行渲染。这个连接将变成面板�?/font>body元素�Q�所以可以根据需要在��M��时候刷新面板内�?/font>

autoScroll Boolean 讄��是否自动昄��滚动条，true则设�|�面板的body元素样式为overflow:'auto'�Q�内�Ҏ��出时会自动显�C�滚动条�Q?/font>false则不昄��滚动条对溢出的内容进行截断。默认�ؓfalse

autoShow Boolean 讄��是否�U�除�l��g的隐藏样式（例如'x-hidden' or 'x-hide-display'�Q�，如果�?font face="TimesNewRomanPSMT">true则在渲染时移除它们，默认�?/font>false

autoWidth Boolean 是否使用自动宽度�Q?/font>true��动宽度，false为固定宽度，默认�?/font>false

baseCls String 应用于面板元素的基本样式�c�，默认�?/font>'x-panel'

bbar Object/Array 讄��面板的底端工��h��Q�可以是Ext.Toolbar对象、工��h��配置对象或button配置对象的数�l��?/font>

bodyBorder Boolean 讄��是否昄��面板体（body�Q�的内部�Ҏ��Q?/font>true则显�C�，false则隐藏，默认�?font face="TimesNewRomanPSMT">true。�ƈ且该��只�?/font>border = true时生�?/font>

bodyStyle String/Object/
Function 应用于面板体�Q?/font>body�Q�的自定义样式。默认�ؓnull

border Boolean �q�是是否昄��面板体（body�Q�的�Ҏ��Q?/font>true则显�C�，false则隐藏，默认�?font face="TimesNewRomanPSMT">true。默认边框宽度�ؓ2px

buttonAlign String 讄��面板底部�Q?/font>footer�Q�中按钮的对齐方式，有效值包括：'right', 'left' �?center'�Q�默认�ؓ'right'

buttons Array 加入到面板底部（footer�Q�中按钮配置对象的数�l?/font>

collapseFirst Boolean 讄��渲染展开或收�~�按钮的��序�?/font>true则在其它按钮渲染前先渲染展开或收�~�按钮，false则最后渲染，默认�?/font>true。该配置��决定了展开或收�~�按钮的位置�?/font>

collapsed Boolean 讄��面板在第一�ơ渲染时是否处于收羃状态，true则收�~�，false则展开�Q�默认�ؓfalse

collapsible Boolean 讄��是否允许面板�q�行展开和收�~�，true则允许进行展开和收�~�，�q�在面板头部昄��伸羃按钮。默认�ؓfalse

contentEl String 讄��面板的内容元素，可以是页面元素的id或已存在�?/font>HTML节点

defaultType String 面板中元素的默认�c�d��Q�默认�ؓ'panel'

defaults Object 应用到面板容器中所有元素的配置对象�Q?例如�Q?/font> defaults: {bodyStyle:'padding:15px'}

floating Boolean 讄��面板是否可以��动�Q?/font>true则允许，默认�?/font>false。注意，讄��floating�?font face="TimesNewRomanPSMT">true会导致面板显�C�在负偏�Uȝ��位置�Q�从而面板不可见�Q�因为��Q动状态下面板是采用绝对定位的�Q�位�|�必��d��渲染之后�q�行明确的设�|�（例如myPanel.setPosition(100,100);�Q?/font>.�Q��Q动面板也需要有固定的宽�?/font>

footer Boolean 讄��是否创徏面板底部�Q?/font>footer�Q�元素，true则创建，false则蟩�q?/font>footer元素的创建，如果一个或多个按钮被加入到footer中，�?/font>footer的设�|�会被忽略，而直接创�?font face="TimesNewRomanPSMT">footer元素

frame Boolean 讄��是否渲染面板�Q?/font>true则渲染面板�ؓ自定义的圆角�Ҏ��Q?/font>false则渲染�ؓ1px的直角边�?/font>

header Boolean 讄��是否创徏面板头部�Q?/font>header�Q�元素，true则创建，false则蟩�q?/font>header元素的创建，如果提供�?font face="TimesNewRomanPSMT">title但没有设�|?/font>header�?/font>header会被自动创徏。如果提供了title但明��设�|?/font>header�?/font>false�?/font>header不会被创�?/font>

headerAsText Boolean 讄��是否在面板的header中显�C?/font>title�Q?/font>true则显�C�，默认�?/font>true

height Number 面板高度�Q�默认�ؓauto

hideBorders Boolean true则隐藏面板容器中所有组件的�Ҏ��Q?/font>false则根据组件的具体配置�q�行昄��

hideCollapseTool Boolean 讄��?/font>collapsible�?/font>true�Ӟ��是否昄��展开或收�~�按�?/font>

html String/Object 讄��面板�Q?/font>body�Q�元素的内容�?/font>HTML片段�?/font>DomHelper生成的内宏V�?/font>

items Mixed 单独一个子�l��g或子�l��g的数�l?/font>

layout String 面板的布局�c�d��Q�默�?/font>Ext.layout.ContainerLayout布局�Q�被选布局的配�|�项通过layoutConfig�q�行讄��

layoutConfig Object �q�个配置对象包含被选布局的配�|�项�Q�针�Ҏ��U�布局的配�|�项需要查看相应的布局�c�说�?font face="TimesNewRomanPSMT">

maskDisabled Boolean 讄��当面板不能��用时是否遮罩面板�Q?/font>true则遮�|�，默认�?/font>true

shadow Boolean/String 讄��是否在面板后面显�C�阴影，true则显�C�，或通过字符串指定阴��q��昄��模式�Q�有效值包括：sides�?/font>frame�?/font>drop�Q�默认�ؓ'sides'。该��只在floating �?/font> true时生�?/font>

shadowOffset Number 讄��面板阴媄的偏�U�量�Q�以像素为单位，默认�?/font>4。该��只�?/font>floating �?/font>true时生�?/font>

tbar Object/Array 讄��面板的顶端工��h��Q�可以是Ext.Toolbar对象、工��h��配置对象或button配置对象的数�l�。注意，面板渲染后只能通过getTopToolbar�Ҏ��讉K��该工��h��

title String 昄��在面板头部的标题信息'

titleCollapse Boolean 讄��是否允许通过点击面板头部�q�行展开和收�~�操作，true则允许，默认�?font face="TimesNewRomanPSMT">false

tools Array 工具按钮配置对象的数�l�，�q�些按钮会被��d��到面板头部功能区�Q�在�?font face="TimesNewRomanPSMT">5-2中会有详�l�的说明

width Number 面板宽度�Q�默认�ؓauto

    Tools 配置��主要用来设�|�面板头部功能区所要显�C�的各类按钮�Q�每个按钮的配置对象可能包含的配�|�项在表5-2中说明，tools配置��id与按钮图标对应关�p�d��?-3所�C��?/p>
�?-2 tools配置��Ҏ��l�表

配置��?/font> 参数�c�d�� 说明

id String 必选项�Q�可能值及效果见表5.3

handler Function 点击按钮后触发的处理函数�Q�参数包括： event : Ext.EventObject�?/font>toolEl : Ext.Element�?/font>Panel : Ext.Panel

scope Object 处理函数的执行范�?/font>

qtip String/Object 为按钮指定提�C�Z��息，可以是字�W�串或配�|�对�?/font>

hidden Boolean 讄��初次渲染�Ӟ��是否隐藏

on Object 为按钮配�|�事件监听器�?/font>

�?-3 tools配置��id与按钮图标对应关�p�表

三、��用Ext.Panel

    本节主要介绍常用的面板��用方法，�q�结合示例介�l?.1.2节中常用配置��的使用及效果，以��读者有一个�Ş象的认识。对于面板最重要的功能和作用��是在其中显�C�各�U�不同来源的内容�Q�分�?个示例分别讲�?�U�不同的方式为面板提供显�C�内容，它们分别是：
使用autoLoad配置��ؓ面板加蝲�q�程��面�?nbsp;
使用contentEl配置��ؓ面板加蝲本地资源�?nbsp;
   使用html配置��自定义面板内容�?nbsp;
使用items配置��在面板中添加组件�?
    �q?�U�方式可以灵�zȝ��为面板提供各�U�需要显�C�的内容�Q�掌握它们是掌握面板使用方式的基��Q�在接下来的�C�Z��中会逐一看到它们的用法和效果�?

1. 使用autoLoad配置��ؓ面板加蝲�q�程��面

    在本例中创徏一个面板用于加载远�E�页面，�C�Z��中主要��用了 autoLoad 配置��设�|�要加蝲的远�E�页面url地址�Q�同时展�C�Z��面板折叠和滚动条的效果，��L��下面的示例代码�?
    代码5-2�Q��用autoLoad配置��加载远�E�页面示�?

    代码 5-2 演示了设�|�面板的 autoLoad 配置��加载指定页面的方式�Q�从下面的截图中可以看到�Q�当面板初始化时自动加蝲了指定的page1.html��面�Q��ƈ且在��面内容��出面板大小时自动显�C�滚动条。效果如�?-2~5-4所�C��?br />

2. 使用contentEl配置��ؓ面板加蝲本地资源

    上例介绍了面板加载远�E�页面的�Ҏ��Q�它是非常实用的方式�Q�但是在有些情况下�ƈ不需要读取一份远�E�的��面�Q�而只是将本页面中的已有部分展�C�在面板中，�q�就用到了contentEl配置��，它的作用��是指定在面板中所要显�C�的本地资源id�Q�看下面的示例代码�?
    代码5-3�Q��用contentEl配置��加载本地资源示�?



本地资源---员工列表

序号姓名

1 张三

2 李四

3 王五

4 赵六

5 陈七

6 杨八

7 刘九

    在代�?-3中可以看到员工列表�ƈ没有通过��h��q�程��面得到�Q�而是直接��本��面中已存在的一份table 表格作�ؓ内容展示在了面板当中�Q�这�U�方式省略了�q�程��面的读取过�E�，昄��速度快，适合于展�C�简单的本地资源。同时在�C�Z��中还展示了自动高度与固定高度的不同效果，自动高度会根据展�C�内容的实际高度自动调整面板高度�Q�所以在面板内部�q�没有出现滚动条。运行效果如�?-5�?-6所�C��?br />

3. 使用html配置��自定义面板内容

    在上�?个示例中�Q�不��是�q�程��面�q�是本地资源加蝲的都是已存在的页面内宏V��接下来介绍自定义面板内容的实现方式�Q�可以自��q��写HTML代码来定义自己需要的展示效果�Q�示例��用面板的html配置��，通过它就可以实现自定义面板内容的目的�Q�看下面的示例�?
    代码5-4�Q��用html配置��自定义面板内容�C�Z��

    �?-7与图5-5中展�C�的��面效果完全相同�Q�但是它们却使用了完全不同的产生方式�Q�html 配置��给了我们动态组�l�面板内容的途径�Q�在代码 5-7 中首先创��Z��字符串数�l�htmlArray�Q�然后通过调用数组�?join �Ҏ��数�l�内容连接�ؓ整体供程序��用，读者也可以使用“+”�q�行字符串连接，�q�两�U�连接方式对�E�序的执行�ƈ没有��M��影响�?br />

4. 使用items配置��在面板中添加组�?br />
    在学习完前面3�U��ؓ面板��d��内容的方式之后，再介�l�通过items配置��ؓ面板��d��l��g的方式，�q�也是最重要和常用的面板功能之一。通过使用items配置��不但可以向面板中添加组�Ӟ��q�可以实现面板的多层嵌套�Q�由于items既可以接受单个对象也可以接受数组为参敎ͼ�所以将�?个示例分别讲解�?nbsp;
向面板中��d��单一�l��g
    在代�?-5中将创徏一个只包含日期选择�l��g的面�ѝ�?
代码5-5�Q��用items配置��Ҏ��加单一�l��g�C�Z��

    代码5-5演示了向面板��d��单一�l��g的方法，其中items配置��Ҏ��向面板中��d��l��g的主要方式，在代�?-6中会演示向面板中��d��多个�l��g的方法。运行效果如�?-8所�C��?/p>

�?-8 通过items配置��向面板中添加一个组�?br />
向面板中��d��多个�l��g
    可以向面板中��d��普通组�Ӟ��也可以向面板中添加子面板�Q�因为面板（Ext.Panel�Q�本�w�也是组�Ӟ��因此面板本��n可以通过items配置��Ҏ��加到爉��板中�Q�这样就形成了多层面板嵌套的效果�Q�这也是�q�行复杂��面布局的基��。下面是向面板添加多个组件的��单示例�?
    代码5-6�Q��用items配置��Ҏ��加多个组件示�?



本地资源---员工列表

序号姓名

1 张三

2 李四

3 王五

    代码 5-6 演示了向面板中添加多个组件的�Ҏ��Q�items 配置��Ҏ��受组件数�l��ؓ参数依次
��组件添加到面板当中。效果如�?-9�?-10所�C��?br />

阿�?/a> 2012-09-03 23:15 发表评论

javascript prototype分析

Sun, 19 Aug 2012 15:04:00 GMT

javascript prototype分析

对于Javascript的初学者来��_��Prototype是个蛮高��q��话题�Q�其实�ƈ不尽然�?
　　我说不尽�Ӟ��意思是说理解Prototype的一般用法很��单。但是真正能做到融会贯通理解Prototype��实是�g很难的事情�?/p>
　　今天我就从Prototype的基本开始讲。上文中我讲了原型模式。其实在Javascript中原型也是这个意思�?Javascript中对象的原型属性的解释是：�q�回对象�c�d��原型的引用。这是一个晕人的解释。其实就是指定了一个需要复制的对象�?/p>
　　文字再多也不如代码，上代码，说最��单的�Q��Q何类都��承自Object�c�：

function A()
{

//todo something

}
A.prototype=new Object();

　　其实�q�样��q��当于Object对象是A的一个原型，�q�样��q��当于了把Object对象的属性和�Ҏ��复制��C��A上，和原型模式的�_�N��一样吧�Q?/p>
　　好，大概了解了prototype的基本用法，我们来看看原型究竟有什么用处�?/p>
　　最��单的用法�Q�动态扩展类的方法和属性�?/p>
de>function People()
{
　　　this.Jump=function(){
　　　　　　                          alert("I can jump");
                                           }
}

　　现在要扩充方法：

People.prototype.Run=function(){
　　　　　　　　                            alert("I can run,too");
                                                    }

　　好，��试下：

var p=new People();
p.Jump();
p.Run();

cript玩�{Prototype - Gabriel - Software Engineer" height=153 alt="Javascript玩�{Prototype(�?" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/9f99f91faaa8f027f724e4a1.jpg" width=231>

cript玩�{Prototype - Gabriel - Software Engineer" height=138 alt="Javascript玩�{Prototype(�?" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/2bd66063e085f0240d33faa1.jpg" width=217>

　　接下来，��带讲一下Javascript的方法种�c�R��我个�h��Javascript的方法分��Z��U�：

　　<1>�c�L��?/p>
　　<2>对象�Ҏ��

　　<3>原型�Ҏ��

　　先看代码�Q�后讲区别：

function People(name)
{
this.name=name;
//对象�Ҏ��
this.Introduce=function(){
alert("My name is "+this.name);
}
}
//�c�L��?br />People.Run=function(){
alert("I can run");
}
//原型�Ҏ��
People.prototype.IntroduceChinese=function(){
alert(" 我的名字�?+this.name);
}

　　��试下：

var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();

cript玩�{Prototype - Gabriel - Software Engineer" height=124 alt="Javascript玩�{Prototype(�?" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/63fb606014921c00eaf8f8a1.jpg" width=203>

cript玩�{Prototype - Gabriel - Software Engineer" height=140 alt="Javascript玩�{Prototype(�?" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/99ec8c44f1598108500ffea1.jpg" width=209>

cript玩�{Prototype - Gabriel - Software Engineer" height=136 alt="Javascript玩�{Prototype(�?" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/7e27114c4dae42bdd62afca1.jpg" width=216>

　　�ȝ��下：

　　名称

　　位置

　　格式

　　�c�L��?/p>
　　�c�d��

　　�c�d��.�Ҏ��?/p>
　　对象�Ҏ��

　　�c�d��

　　this.�Ҏ��?/p>
　　原型�Ҏ��

　　�c�d��

　　�c�d��.prototype.�Ҏ��?/p>
　　我们用C#来做�c�d��来讲解这三个�Ҏ��Q?/p>
　　�c�L��法其实就是我们讲的静态方法：

　　　　　　　如public static void Run(){}

　　而对象方法其实就是实例方法�?/p>
　　　　　　　　public void Introduce(){}

　　而原型方法有所不同�Q�由于C#中不允许动态�ؓ对象增加�Ҏ��Q�因此在C#中�ƈ不存在原型方法。原型方法处于C#的静态方法与实例�Ҏ��之间�Q�通过对象调用�Q�但是存储的内存形式却类��g��静态方法，也就是所有实例对象共享同一副本�?/p>
　　(ps:��量��方法定义�ؓ原型�Ҏ��Q�原型方法避免了每次调用构造函数时对属性或�Ҏ��的构造，因此比较节省�I�间和时�?

　　p1.IntroduceChinese();创徏对象�?/p>
　　�q�记得我在上一��文章里讲的��复制么�Q��ؓ什么大安��喜欢扚w��生��Q�效率是最主要因素。浅复制也一��P��我们��Z��么要��复�Ӟ��因�ؓ效率高。作为原型模式的 Javascript应用�Q�prototype也承担着�q�样的重仅R��用prototype来创建对象，要比其他方式快得多�?/p>
　　看代码例子：

function People(name,age)
{
　　　　　　　　this.name=name;
　　　　　　　　this.age=age;
}
var p1=new People("Xuan",22);
var girls=[ ];
var GirlPrototype=function(){};
GirlPrototype.prototype=p1;
for(var i=0;i<100000;i++)
{
　　　　　　　　girls[i]=new GirlPrototype();
}

　　玩�{�l�承�Q?/p>
　　Prototype最大的应用其实�q�是在于玩�{�l�承�Q�这个在此不讨论�Q�请参加我的另一��文章：《Javascript玩�{�l�承�Q�二�Q�》�?/p>
　　好，基本的应用说完，下面我来说一下prototype的天使和��鬼两面�?/p>
　　说prototype是天使，是因��Z��上的几点应用�Q�让Javascript增加了很大的灉|��性，��其原型�l�承�Q�更是Javascript最多的�l�承方式�?/p>
　　说他是魔��|��则是因�ؓ下面几方面：

　　原型�l�承的缺陗��请参见《Javascript玩�{�l�承�Q�二�Q�》�?/p>
　　原型其实相当于原型模式中的浅复制�Q�因此也会造成牵一发而动全��n的效果�?/p>　　�q�于灉|��。�ؓ什么过于灵�z�d��Q�其实这�Ҏ��针对�W�一�Ҏ��说的�Q�能够动态地��d��属性和�Ҏ��固然是增加了灉|��性。可是我们讨��Z��U�情况，100个�h同时来开发一个Javascript的项目，很多没经验的人爱上了玩�{prototype�Q�一个�h往�q�个�c�里加一个方法，�q�面向对象么�Q?

阿�?/a> 2012-08-19 23:04 发表评论

JavaScript prototype整理�Q�网上的三种理解�Q?

Sun, 19 Aug 2012 13:09:00 GMT

JavaScript prototype整理�Q�网上的三种理解�Q?/a>

prototype JavaScript IE IDEA HTML

prototype属性，只有function对象中才��h��的显式属性；

�|�上三种理解�Q?
            1�Q�通过构造函数创建的普通对象，通过其constructor属性引用它的构造函数对象，从而间接引用（拥有�Q�了构造对象中的prototype对象�Q?

如图�Q?img class="magplus" title="点击查看原始大小囄��" height="400" src="http://dl.iteye.com/upload/picture/pic/47469/bcc49472-57dd-34c6-8d3a-f7667bcbe080.jpg" width="700" alt="" />

此观点的文章�Q?nbsp; 参看 jimichan的文章：详解javascript�cȝ��承机制的原理中的�Q?“�Q�说成间接的是因为每个object都有一�?constructor 属性指向它的构造函敎ͼ��?#8221;
非常感谢在此问题上，作者对我的回信�Q�如有冒犯，敬请原谅�Q?/span>

            2�Q�构造函数创建对象时�Q�copy prototype中的属性和代码�l�所创徏的对象。从而��创徏的对象拥有了prototype中的所有功能和属性；

如图�Q?img class="magplus" title="点击查看原始大小囄��" height="572" src="http://dl.iteye.com/upload/picture/pic/47487/ea864896-ea56-3498-9c7b-33b12af23899.jpg" width="700" alt="" />

此观点的文章�Q?nbsp; 参看 yiding_he的文章：领悟 JavaScript 中的面向对象中的�Q?nbsp; “ �?JavaScript 中，�?new 关键字创建对象是执行了下面三个步骤的�Q?

   1. 创徏一个新的普通对象；
   2. ��方法对象的 prototype 属性的所有属性复制到新的普通对象中厅R�?
   3. 以新的普通对象作��Z��下文来执行方法对象�?#8221;
此观点在回脓中被 xieye反对

            3�Q�构造函数在创徏对象�Ӟ��把构造函��C��的prototype引用赋给创徏的普通对象；也就是说由构造函数创建的对象�Q�都有一个指针指向prototype对象�Q?

如图�Q?img class="magplus" title="点击查看原始大小囄��" height="581" src="http://dl.iteye.com/upload/picture/pic/47489/b9f6b9fe-6f09-3179-aaee-d5876f10535d.jpg" width="700" alt="" />

此观点的文章�Q?nbsp; 参看李站的文章：悟透javascript中的" 我们已经知道�Q�用 var anObject = new aFunction() 形式创徏对象的过�E�实际上可以分�ؓ三步�Q�第一步是建立一个新对象�Q�第二步��该对象内置的原型对象设�|��ؓ构造函数prototype引用的那个原型对象；�W�三步就是将该对象作为this参数调用构造函敎ͼ�完成成员讄��{�初始化工作。对象徏立之后，对象上的��M��讉K��和操作都只与对象自��n及其原型链上的那串对象有养I��与构造函数再扯不上关�p�M��"   以及 “语法甘露中的�Q�上面代码的最后一句证明，新创建的对象的constructor属性返回的是Object函数。其实新建的对象自己及其原型里没有constructor属性，那返回的只是最��层原型对象的构造函敎ͼ�即Object�?#8221;

�l�g��所�q�ͼ��Ҏ��贴子�Q?a target="_blank">领悟 JavaScript 中的面向对象中作�?afcn0的回�?“其实�q�有补充,��是如果构造函数返回object�c�d��,那new对象无效,prototype问题是楼主还不太了解prototype�l�承方式,__proto__属�?以及isPrototypeOf�Ҏ��所�?” 的提�C�，查阅了文章：javascript中的�l�承

Html代码

此文中提刎ͼ�jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");

　　调用�q�句�Ӟ��都发生了什�?

　　1　当js看见new操作�W�，它创��Z��个新的普通对�?�q�且讄��它的__proto__ 属性�ؓEngineer.prototype�?

　　2 new 操作�W�传递这个新的对象作为Engineer 构造器的this的倹{�?

　　其实最主要做的事就是上面的两�g�Q�剩下的都是很简单的函数调用.
此文中提刎ͼ�jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); 　　调用�q�句�Ӟ��都发生了什�? 　　1　当js看见new操作�W�，它创��Z��个新的普通对�?�q�且讄��它的__proto__ 属性�ؓEngineer.prototype�? 　　2 new 操作�W�传递这个新的对象作为Engineer 构造器的this的倹{�? 　　其实最主要做的事就是上面的两�g�Q�剩下的都是很简单的函数调用.

�Ҏ��上文的提�C�Z��了简单测试：

Javascript代码

function person(name,b){
    this.name=name;
}

person.prototype.sayHello=function(a){
    //alert("hello,i am "+this.name);
    alert(this==a);
    }


function employee(name, salary)
{
    person.call(this, name);    //调用上层构造函�?
    this.salary = salary;       //扩展的成�?
};

var p=new person("yangsp",p);
//p.sayHello(p);
//alert(p.constructor);

//下面两句验证了普通对象中��有_proto_属性，且引用的是prototype对象�Q�（在ff下调试，ie下不可）�Q?
alert(p.__proto__==person);
alert(p.__proto__==person.prototype))

//alert("p有prototype属性吗? "+p.prototype);    //表明普通对象中没有prototype属�?
function person(name,b){ this.name=name; } person.prototype.sayHello=function(a){ //alert("hello,i am "+this.name); alert(this==a); } function employee(name, salary) { person.call(this, name); //调用上层构造函�? this.salary = salary; //扩展的成�? }; var p=new person("yangsp",p); //p.sayHello(p); //alert(p.constructor); //下面两句验证了普通对象中��有_proto_属性，且引用的是prototype对象�Q�（在ff下调试，ie下不可）�Q? alert(p.__proto__==person); alert(p.__proto__==person.prototype)) //alert("p有prototype属性吗? "+p.prototype); //表明普通对象中没有prototype属�?

�ȝ��Q?

Html代码

比较赞同�W�三�U�理解；
      卻I��prototype是function对象中专有的属性�?
          _proto_是普通对象的隐式属性，在new的时候，会指向prototype所指的对象�Q?
          普通对象中的constructor属性指向构造函敎ͼ�因此一个用构造函数创建的对象可能有两�U�方式关联到prototype.但��承应该是�Ҏ��_proto_兌��到prototype属性；
比较赞同�W�三�U�理解；卻I��prototype是function对象中专有的属性�? _proto_是普通对象的隐式属性，在new的时候，会指向prototype所指的对象�Q? 普通对象中的constructor属性指向构造函敎ͼ�因此一个用构造函数创建的对象可能有两�U�方式关联到prototype.但��承应该是�Ҏ��_proto_兌��到prototype属性；

另外�Q?a target="_blank">ecma-262中提刎ͼ�every object created by that constructor has an implicit reference to the prototype (called the object's prototype) associated with its constructor 以及其图�C�；不敢肯定它的implicit reference间接�q�是隐式链接�Q?

阿�?/a> 2012-08-19 21:09 发表评论

Sat, 18 Aug 2012 12:49:00 GMT

encodeURIComponent的��?/span>

在说明encodeURIComponent前先介绍�?/span> escape,encodeURI,encodeURIComponent �q�三个，主要是从其他地方转过来的�Q�http://blog.csdn.net/fengzi_shen/archive/2009/04/01/4041488.aspx�Q��?/span>

js�Ҏ��字进行编码涉�?个函敎ͼ�escape,encodeURI,encodeURIComponent�Q�相�?个解码函敎ͼ�unescape,decodeURI,decodeURIComponent

1�?nbsp; 传递参数时需要��用encodeURIComponent�Q�这��L��合的url才不会被#�{�特�D�字�W�截断�?nbsp;

例如�Q?lt;script language="javascript">document.write('

2�?nbsp; �q�行url跌��{时可以整体��用encodeURI

例如�Q�Location.href=encodeURI("http://cang.baidu.com/do/s?word=癑ֺ�&ct=21");

3�?nbsp; js使用数据时可以��用escape

[Huoho.Com�~�辑]

例如�Q�搜藏中history�U�录�?br />
4�?nbsp; escape�?-255以外的unicode��D��行编码时输出%u****格式�Q�其它情况下escape�Q�encodeURI�Q�encodeURIComponent�~�码�l�果相同�?br />

最多��用的应�ؓencodeURIComponent�Q�它是将中文、韩文等�Ҏ��字符转换成utf-8格式的url�~�码�Q�所以如果给后台传递参数需要��用encodeURIComponent旉��要后台解码对utf-8支持�Q�form中的�~�码方式和当前页面编码方式相同）

escape不编码字�W�有69个：*�Q?�Q?�Q?�Q?�Q�@�Q�_�Q?-9�Q�a-z�Q�A-Z

encodeURI不编码字�W�有82个：!�Q?�Q?�Q?amp;�Q?�Q?�Q?�Q?�Q?�Q?�Q?�Q?�Q?�Q?�Q?�Q?�Q?�Q�@�Q�_�Q�~�Q?-9�Q�a-z�Q�A-Z

encodeURIComponent不编码字�W�有71个：!�Q? '�Q?�Q?�Q?�Q?�Q?�Q�_�Q�~�Q?-9�Q�a-z�Q�A-Z

现在说下我在传递非英文字符串的处理�Q?/strong>

    URL�Q?/strong> addressgrp.action?oper=addgrp&groupname="+encodeURIComponent(groupsname)

   在action获取 groupname�Q?/span> getGroupname() �Q�时�q�没有进�q�编码�{化，获取的信息�ƈ不正��，�l�过��试发现需要进行一�ơ编码�{换：String grpname= new String(getGroupname().getBytes("ISO-8859-1"), "UTF-8");

在网上搜索相关的信息�Q�网上提供了另一�U�方法：在页面上�q�行两次�~�码操作�Q�然后在后台再进行一�ơ解码，�q�是�׃��java后台在获取数据时已经�q�行了一�ơ解码，可问题是�q�行一�ơ解码后的数据�ƈ不正��，而如果在��面中编码两�ơ然后在后台�q�行一�ơ解码就可以获取真确的数据。页面URL�Q?/span> addressgrp.action?oper=addgrp&groupname="+ encodeURIComponent�Q?/span> encodeURIComponent(groupsname)�Q?/span>

后台获取数据�Q?/span> String grpname =java.net.URLDecoder.decode( getGroupname() ,"UTF-8")

阿�?/a> 2012-08-18 20:49 发表评论

escape()、encodeURI()、encodeURIComponent()区别详解

Sat, 18 Aug 2012 12:47:00 GMT

escape()、encodeURI()、encodeURIComponent()区别详解

JavaScript中有三个可以对字�W�串�~�码的函敎ͼ�分别是： escape,encodeURI,encodeURIComponent�Q�相�?个解码函敎ͼ�unescape,decodeURI,decodeURIComponent �?

下面��单介�l�一下它们的区别

1 escape()函数

定义和用�?
escape() 函数可对字符串进行编码，�q�样��可以在所有的计算��Z��d��该字�W�串�?

语法
escape(string)

参数描述
string 必需。要被�{义或�~�码的字�W�串�?nbsp;

�q�回�?
已编码的 string 的副本。其中某些字�W�被替换成了十六�q�制的�{义序列�?

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对下面�q�些 ASCII 标点�W�号�q�行�~�码�Q?- _ . ! ~ * ' ( ) 。其他所有的字符都会被�{义序列替换�?

2 encodeURI()函数
定义和用�?
encodeURI() 函数可把字符串作�?URI �q�行�~�码�?

语法
encodeURI(URIstring)

参数描述
URIstring 必需。一个字�W�串�Q�含�?URI 或其他要�~�码的文本�?nbsp;

�q�回�?
URIstring 的副本，其中的某些字�W�将被十六进制的转义序列�q�行替换�?

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对�q�些 ASCII 标点�W�号�q�行�~�码�Q?- _ . ! ~ * ' ( ) �?

该方法的目的是对 URI �q�行完整的编码，因此对以下在 URI 中具有特�D�含义的 ASCII 标点�W�号�Q�encodeURI() 函数是不会进行�{义的�Q?/?:@&=+$,#

3 encodeURIComponent() 函数

定义和用�?
encodeURIComponent() 函数可把字符串作�?URI �l��g�q�行�~�码�?

语法
encodeURIComponent(URIstring)

参数描述
URIstring 必需。一个字�W�串�Q�含�?URI �l��g或其他要�~�码的文本�?nbsp;

�q�回�?
URIstring 的副本，其中的某些字�W�将被十六进制的转义序列�q�行替换�?

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对�q�些 ASCII 标点�W�号�q�行�~�码�Q?- _ . ! ~ * ' ( ) �?

其他字符�Q�比�?�Q?/?:@&=+$,# �q�些用于分隔 URI �l��g的标点符��P��Q�都是由一个或多个十六�q�制的�{义序列替换的�?

提示和注�?
提示�Q�请注意 encodeURIComponent() 函数 �?encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分�Q�比如协议、主机名、�\径或查询字符�Ԍ��。因�?encodeURIComponent() 函数��{义用于分�?URI 各个部分的标点符受��?

4 �ȝ��Q?/strong>

通过对三个函数的分析�Q�我们可以知道：escape()除了 ASCII 字母、数字和特定的符号外�Q�对传进来的字符串全部进行�{义编码，因此如果惛_��URL�~�码�Q�最好不要��用此�Ҏ��。而encodeURI() 用于�~�码整个URI,因�ؓURI中的合法字符都不会被�~�码转换。encodeURIComponent�Ҏ��在编码单个URIComponent�Q�指��h��参数�Q�应当是最常用的，它可以讲参数中的中文、特�D�字�W�进行�{义，而不会媄响整个URL�?/p>

5 �C�Z��Q?/strong>

1 escape()

输出�Q?/p>
http%3A//www.w3school.com.cn

%3F%21%3D%28%29%23%25%26

2 encodeURI()

输出�Q?/p>
http://www.w3school.com.cn/

http://www.w3school.com.cn/My%20first/

,/?:@&=+$#

�Ҏ��个URL�q�行�~�码�Q�而URL的特定标识符不会被�{码�?/p>
3 encodeURIComponent()

�?�Q?/p>

对URL中的参数�q�行�~�码�Q�因为参��C��是一个URL�Q�如果不�~�码会媄响整个URL的蟩转�?/p>

阿�?/a> 2012-08-18 20:47 发表评论

Extjs中的�q�代�Ҏ��

Sun, 05 Aug 2012 06:54:00 GMT

Extjs中的�q�代�Ҏ��

分类�Q?extjs 2011-10-15 19:16 49人阅�?/span> 评论(0) 收藏举报

EXTJS 有很多的�q�代�Ҏ��Q�例�?你也许已知道的Ext.each�Q�但�q�有另外一些不��Z�h知且很有用的�Ҏ��。首先，��要回��下Ext.each:

Ext.each

为每一个数�l�的成员应用同一个方法，它基本上是一个更方便的��@环�Ş�?/p>
var people = ['Bill', 'Saul', 'Gaius']; //using each to detect Cylons: Ext.each(people, function (person, index) { var cylon = (index + 1) % 2 == 0; //every second man is a toaster alert(person + (cylon ? ' is ' : ' is not ') + 'a fraking cylon'); }); //is the same as for (var i = 0; i < people.length; i++) { var person = people[i]; var cylon = (index + 1) % 2 == 0; //every second man is a toaster alert(person + (cylon ? ' is ' : ' is not ') + 'a frakin cylon'); };

Ext.iterate
Ext.iterate �?Ext.each �c�M��针对非数�l�对�? 通常用在for-in 循环�?
var ships = { 'Bill': 'Galactica', 'Laura': 'Colonial One' }; Ext.iterate(ships, function (key, value) { alert(key + "'s ship is the " + value); }); //is the same as for (key in ships) { var value = ships[key]; alert(key + "'s ship is the " + value); }

用Ext.iterate在数�l�上�Q�与Ext.each完全相同�?nbsp;
each和iterate�Ҏ��都有�W�三个可选参数scope�?nbsp;
另一个有用的技巧是你可以更方便的重用相同的�Ҏ��:
var myFunction = function (item, index) { //does some clever thing } Ext.each(people, myFunction); Ext.each(['another', 'array'], myFunction);

Ext.pluck
(4.0.0之后�q�时) Ext.pluck从对象数�l�捕��L��定的属�?
var animals = [ { name: 'Ed', species: 'Unknown' }, { name: 'Bumble', species: 'Cat' }, { name: 'Triumph', species: 'Insult Dog' } ]; Ext.pluck(animals, 'species'); //returns ['Unknown', 'Cat', 'Insult Dog'] Ext.pluck(animals, 'name'); //returns ['Ed', 'Bumble', 'Triumph']

此方法自4.0.0不徏议��用，��L��Ext.Array.pluck代替.

Ext.invoke

(4.0.0之后�q�时)数组中所有成员调用同一个方法，�q�返回结果，使用用上例animals�Q?/p>
var describeAnimal = function (animal) { return String.format("{0} is a {1}", animal.name, animal.species); } var describedAnimals = Ext.invoke(animals, describeAnimal); console.log(describedAnimals); // ['Ed is a Unknown', 'Bumble is a Cat', 'Triumph is a Insult Dog'];

Ext.invoke与Ruby的集合方法类��|��使得更容易�{换数�l�，��M��增加的参数都可通过Ext.invoke传递�?nbsp;
此方法自4.0.0不徏议��用，4.X�p�d��版本后将被移除�?/p>
Ext.Partition

Ext.Partition��数�l�拆分成两部分�?/p>
var trees = [ { name: 'Oak', height: 20 }, { name: 'Willow', height: 10 }, { name: 'Cactus', height: 5 } ]; var isTall = function (tree) { return tree.height > 15 }; Ext.partition(trees, isTall); //returns: [ [{ name: 'Oak', height: 20}], [{ name: 'Willow', height: 10 }, { name: 'Cactus', height: 5}] ]

此方法自4.0.0不徏议��用，4.X�p�d��版本后将被移除�?/p>
数学�Ҏ��
var numbers = [1, 2, 3, 4, 5]; Ext.min(numbers); //1 Ext.max(numbers); //5 Ext.sum(numbers); //15 Ext.mean(numbers); //3

阿�?/a> 2012-08-05 14:54 发表评论

jsp->json

Sun, 05 Aug 2012 04:26:00 GMT

一、不传URL
view plaincopy to clipboardprint?
var myData={ "Head":[
    { "UserName":"admin","Name":"李亚�?,"Gender":"M","Password":"123456","Status":"0","Department":"技术部","Title":"�E�序�?,"Email":" 0:00:00","ModifyUser":"1","ModifyTime":"2009-10-30 10:04:22"},
    { "UserName":"00001","Name":"李香�?,"Gender":"F","Password":"123456","Status":"0","Department":"技术部","Title":"�E�序�?,"Email":" 0:00:00","ModifyUser":"","ModifyTime":""}
    ]
}

var ds = new Ext.data.Store({
    //proxy: new Ext.data.MemoryProxy(myData),
    reader: new Ext.data.JsonReader({root: 'Head'},
    [{name:'UserName'},{name: 'Name'}, {name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}])
});
ds.loadData(myData)

或�?/p>
var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(myData),
    reader: new Ext.data.JsonReader({root: 'Head'},
    [{name:'UserName'},{name: 'Name'}, {name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}])
});
//注意下面�q�句切记
ds.load()都可�?/p>

二、��用URL
(1)JSON HTMLPage.htm��面做数据源

{"Head":[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]}
{"Head":[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]}

相应的ext代码

    Ext.onReady(function(){

        var proxy=new Ext.data.HttpProxy({url:'HTMLPage.htm'});
        //定义reader
        var reader=new Ext.data.JsonReader({ root:'Head' },
        [
        {name: 'appeId', mapping: 'appeId'},
        {name: 'survId'},
        {name: 'location'},
        {name: 'surveyDate'},
        {name: 'surveyTime'},
        {name: 'inputUserId'}
        ]
        )
        //构徏Store
        var store=new Ext.data.Store(    {
            proxy:proxy,
            reader:reader
        });
        //载入
        store.load();


        // create the grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
            {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
            {header: "survId", width: 60, dataIndex: 'survId', sortable: true},
            {header: "location", width: 60, dataIndex: 'location', sortable: true},
            {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
            {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
            {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
            ],
            renderTo:'example-grid',
            width:540,
            height:200
        });

    });

    (2).如果json 数据�?没有数据标题"Head“只需要把reader�Ҏ�� 如下卛_��Q�其他不需要改�?br />    view plaincopy to clipboardprint?
    //定义reader
    var reader=new Ext.data.JsonReader({},
    [
    {name: 'appeId', mapping: 'appeId'},
    {name: 'survId'},
    {name: 'location'},
    {name: 'surveyDate'},
    {name: 'surveyTime'},
    {name: 'inputUserId'}
    ]
    )

    �l�验��技巧：传data 的URL文�g可�ؓ�Q�html,aspx.js�{�，文�g引用的js永远�?文�g在同一路径�?br />    另外主要注意一�?HttpProxy 和MemoryProxy的区别，�l�心的读者可以看�?以上两种�Ҏ�� 使用的proxy使用的不�?/p>
    MemoryProxy
    MemoryProxy只能从JavaScript对象获得数据�Q�可以直接把数组�Q�或JSON和XML格式的数据交�l�它处理�Q�如下面的代码所�C��?br />    var proxy = new Ext.data.MemoryProxy([
    ['id1','name1','descn1'],
    ['id2','name2','descn2']
    ]);
    HttpProxy
    HttpProxy使用HTTP协议�Q�通过Ajax��d��台取数据�Q�构造它旉��要设�|?a href="'xxx.jsp'">url:'xxx.jsp'参数。这里的url可以替换成�Q何一个合法的�|�址�Q�这样HttpProxy才知道去哪里获取数据�Q�如下面的代码所�C��?br />    var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});
    后台需要返回EXT所需要的JSON格式的数据，下面的内容就是后��C��用JSP的一个范例，如下面的代码所�C��?br />    response.setContentType("application/x-json");
    Writer out = response.getWriter();
    out.print("[" +
    "['id1','name1','descn1']" +
    "['id2','name2','descn2']" +
    "]");
    ��h��意，�q�里的HttpProxy不支持跨域，它只能从同一域中获得数据。如果想跨域�Q�请参考下面的ScriptTagProxy�?br />    ScriptTagProxy
    ScriptTagProxy的用法几乎和HttpProxy一��P��如下面的代码所�C��?br />    var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});
    从这里也看不出来它是如何支持跨域的，我们�q�需要在后台�q�行相应的处理，如下面的代码所�C?br />    String cb = request.getParameter("callback");
    response.setContentType("text/javascript");
    Writer out = response.getWriter();
    out.write(cb + "(");
    out.print("[" +
    "['id1','name1','descn1']" +
    "['id2','name2','descn2']" +
    "]");
    out.write(");");
    �?中的关键��在于从��h��中获得的callback参数�Q�这个参数叫做回调函数。ScriptTag- Proxy会在当前的HTML��面里添加一�?amp;lt;script type="text/javascript"src="/xxx.jsp"> </script>标签�Q�然后把后台�q�回的内�Ҏ��加到�q�个标签中，�q�样��可以解册��域访问数据的问题。�ؓ了让后台�q�回的内容可以在动态生成的标签中运行，EXT会生成一个名为callback的回调函敎ͼ��q�把回调函数的名�U�C��递给后台�Q�由后台生成callback(data)形式的响应内容，然后�q�回�l�前台自动运行�?

阿�?/a> 2012-08-05 12:26 发表评论

DataReader/ArrayReader/JsonReader/XmlReader

Sun, 05 Aug 2012 03:33:00 GMT

DataReader/ArrayReader/JsonReader/XmlReader

Ext.data.DataReader
�U�虚�c?从数据源得到�l�构化数据�{换�ؓ元数据对�?对象包含Record的集�?一般用做Store对象的元数据,
��h��如下格式
{
totalRecord:int,
records:Array of Ext.data.Record
}
具体使用参见三个子类
Ext.data.ArrayReader/Ext.data.JsonReader/Ext.data.XmlReader

�Ҏ��
DataReader( Object meta, Object recordType )
构�?br />
Ext.data.ArrayReader
用于��L��l�到一个元数据对象

ArrayReader( Object meta, Object recordType )
构�?�W�一个参数是配置除了可以指示使用哪个字段做id�?不懂其它的用�?
�W�二个参数是recordType与record对象的create�Ҏ��的参��C��?是一样config对象数组,具体参见
readRecords( Object o ) : Object
��d��o,�q�回一个元数据对象

用例�C��:
//定义数组
var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(
//以第一个元素做为recordid
   {id: 0},
//定义数组到record的映��关�p?br />   [
    {name: 'name', mapping: 1},
    {name: 'occupation', mapping: 2}
   ]
);
//生成元数�?br />var data=reader.readRecords(arr);

Ext.data.JsonReader
用于��一个json对象转换为元数据对象

JsonReader( Object meta, Object recordType )
JsonReader的构造参数meta可以有更多选择,
{
id : String,
root : String,
successProperty : String,
totalProperty : String
}
都是对应json对象的属性名

read( Object response ) : Object
从一个response对象�q�回,response.responseText属性应仅含有一个json格式数据�?br />
readRecords( Object o ) : Object
��d��o,�q�回一个元数据对象

使用�C�Z��:
     var json={ 'results': 2, 'rows': [
    { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
    { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
};
    var reader=new Ext.data.JsonReader(
        {
        totalProperty: "results",//totalRecords属性由json.results得到
        root: "rows",            //构造元数据的数�l�由json.rows得到
        id: "id"                //id由json.id得到
        },[
        {name: 'name', mapping: 'name'},
        {name: 'occupation'}            //如果name与mapping同名,可以省略mapping
        ]
    )
    var data=reader.readRecords(json);

Ext.data.XmlReader
xmlreader对象当然是�ؓxml而准备的

构�?
XmlReader( Object meta, Mixed recordType )
meta与jsonreader�c�M��,
meta是一个{
    id : String,
    record : String,
    success : String,
    totalRecords : String
}对象,只是�q�些字符串都是相对于文档根目录的domquery路径
read( Object response ) : Object
readRecords( Object doc ) : Object
....

var str=["",
    "",
"2",
"",
   "1",
   "Bill",
   "Gardener",
"",
"",
   "2",
   "Ben",
   "Horticulturalist",
"",
""].join("");

//生成xmldocument对象
var xmlDocument;
if(Ext.isIE){
    xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument")
    xmlDocument.async=false;
    xmlDocument.resolveExternals = false;
    xmlDocument.loadXML(str)
}
else{
   xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");
}

//然后开�?..和其它两个reader一��L��用法,只是�q�儿换了一�U�写�?recordtype也可以是一个record对象
var record = Ext.data.Record.create([
   {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
   {name: 'occupation'}                 // This field will use "occupation" as the mapping.
])
var reader = new Ext.data.XmlReader({
   totalRecords: "results",
   record: "row",           //row是节炚w��择�?br />   id: "id"
}, record);
var data=reader.readRecords(xmlDocument);

阿�?/a> 2012-08-05 11:33 发表评论

ExtJs通过JSON与后台通信

Sat, 04 Aug 2012 13:55:00 GMT

ExtJs通过JSON与后台通信

Posted on | 二月 22, 2010 | No Comments

引言

EXT技术对提升用户体验有着先天的优势，很多机构和个人都开始学习EXT技术，截止今天EXT CORE 3.0 也已�l�发布，EXTJS 3.0 指日可待。虽然性能��来��让人担忧。。�?/p>

无论用多么惊天地泣鬼��的前台技术，与后台的通信��L��必须的。本文就目前手头上有的资料和�l�验来大概阐�q�C��下EXTJS和后台通信�q�点事�?/p>

��Z��么要用JSON�Q?/strong>

选中JSON不是一拍脑门子的事。EXTJS也不是只支持JSON。目前常用的不外乎下面几�U�通信方式�Q?/p>

1. 动态语�a�文�g周�{�Q�如JSP
用JSP一�cȝ��动态语�a�文�g中�{数据无疑是传递数据比较简单的一�U?但是不好传递对象。随便�D个用Session传递数据的例子。例如：
varUserName= <%=session.getAttribute(“user”)%>;
if(UserName==null){
location.href = ‘login.jsp’;
}
�~�点��是不能方便的传递对象。不那么舒服�Q�EXT的不��d��。还在�؜杂��用JSP�q�种相比与EXT来说老掉牙的东西�?当然�Q�如果项目条件不允许�Q�或者不需要做成彻底的AJAX OnePage应用。这�U�方式还是可以解军_��多迫在眉睫的问题的。（我是��d��的One Page 狂热者^.^�Q?/p>

2. JSON
JSON是和JavaScript门当户对的数据传输方式，所以用��h��会很舒服。而且他可以很方便的传递对象，EXT也对JSON支持的很全面。所有的数据传递需求他都可以胜仅R��现在第三方的JSON框架也很成熟�?/p>

3. XML
EXTJS本��n是提供对XML�c�d��数据的解析功能的�Q�和JSON一栗��?官方的示例程序也有专门演�C�XML数据通信的。个人感觉和JSON是同一个��别的�Q�也是比较推荐的方式�?/p>

4. 文本
异步调用�q�回的东西是文本�Q�说白了AJAX��是靠文本传输数据的�Q�无论JSON�q�是XML�Q�他都是文本。所以文本很牛的。如果弄好了�Q�自己定义一个传输格式也不是不可以。一般不复杂的东西，比如传个标记�Q�传个string什么的。没必要用JSON�Q�用文本��很好用�?br />�~�点已经说了�Q�就是无法胜�ȝ��复杂的通信需求�?/p>

所以目前看来就在JSON和XML中选择一个了。XML以后再表�Q�我们现在主要表JSON�?/p>

通信�q�程

从后台到前台

看一下通信�q�程中的图，其中对象我们已经有了�Q�也��是你想要传递的东西。剩下的�Q�就是后台如何把对象转换成JSON�Q�以及前台如何把JSON再解析�ؓ对象了。我们先来看后台如何把对象�{换成JSON�?/p>

首先要隆重登场的是我自己改写的一个根据LIST生成JSON的类。其实这�cȝ��单的要死。所以他只能胜�Q把LIST转成JSON的工作。而且�q�有一个局限，至于是什么局限，我们慢慢说�?/p>

先看代码:

//yueue修改的轻量��JSON�c?/p>

package Extest;
import java.util.ArrayList;

public class Json {

public static void main(String[] args) {

}

public String singleInfo=”";
public Integer total=0;
protected boolean _success=true;
protected String _error=”";
protected ArrayList arrData=new ArrayList();
protected ArrayList dataItem=new ArrayList();
public String getError() {
return _error;
}
public void setError(String error) {
if(!error.equals(“”))this._success=false;
this._error = error;
}
public boolean getSuccess() {
return _success;
}
public void setSuccess(boolean success) {
if(success) this._error=”";
this._success = success;
}

public Json()
{

}

public void reSet()
{
arrData.clear();
dataItem.clear();
}

public void addItem(String name,String _value)
{
dataItem.add(name);
dataItem.add(_value);
}

//一个数�l�添加完毕，一个新的数�l�开�?br />public void addItemOk()
{
arrData.add(dataItem);
dataItem=new ArrayList();
}

public String ToString()
{
StringBuilder sb=new StringBuilder();
sb.append(“{“);
sb.append(“\”total\”:”);
sb.append(total.toString()+”,”);
sb.append(“\”datas\”:”);
sb.append(“[");
int ad=arrData.size();
for(int i=0;i{
ArrayList arr=(ArrayList)(arrData.get(i));
sb.append("{");
int t=arr.size();
for(int j=0;j{
if(j==t) break;
sb.append("\"");
sb.append(arr.get(j).toString());
sb.append("\"");
sb.append(":");
sb.append("\"");
sb.append(arr.get(j+1).toString());
sb.append("\"");
if(j}
sb.append("}");
if(i}
sb.append("]“);
sb.append(“}”);
return sb.toString();
}

}

代码不长。下面我们看看怎么用这个东西把一个LIST转成JSON

Json js = new Json();
while (rs.next())
{
js.addItem(“ID”, rs.getString(“ID”));
js.addItem(“Code”, rs.getString(“Sheet_Code”));
js.addItem(“Consignee”, rs.getString(“Sheet_Consignee”));
js.addItem(“Tone”, rs.getString(“Sheet_Tone”));
js.addItem(“Date”, rs.getString(“Sheet_Date”));
js.addItem(“Cash”, rs.getString(“Sheet_Cash”));
js.addItem(“Station”, rs.getString(“Sheet_Station”));
js.addItem(“Class”, rs.getString(“Sheet_Class”));
js.addItemOk();
}

System.out.print(js.outputString());

其中rs是一个ResultSet �Q�里面放的是从数据库里读取的数据�?/p>

其中每次 addItem() 都向JSON提交了一个字�D?属�?�Q�当字段提交完毕�Q�执行addItemOk()�Ҏ��Q�就会创建条完整的记�?对象) �Q?当你循环执行�q�个��程�Q�就提交了多条记�?对象)�Q�最后的最后， outputString() �Ҏ��你前面提交的所有记�?对象)转化为JSON�q�打印出来。你可以�Ҏ��代码看看最后输出来的JSON到底是个什么样子。有助于你理解JSON�?/p>

上面的这个类看�v来似乎不错。实际上�q�个�c�d��乎没有大的用途。因��Z��只能处理��单的对象�Q�他遇到��M��对象都会调用其toString �Ҏ��试图获得代表�q�个对象的字�W�串�Q�然后储存�ƈ转化。当�Ӟ��如果是String , Integer , Double ,�{�类型自然没有问题，因�ؓ�q�些对象可以不失真的转化为String。而遇��C��个复杂对象，比如一个由Hibernate生成的对象，他就无能为力了。他不能自动遍历对象下面的所有属性，�q�一一转换�?/p>

那么怎么解决呢？ �{�案是用强大的第3方类库，比如JSON-Lib 或�?org.json�?/p>

JSON-lib 是一个封装了常用的JSON业务的第3方类库，很强�Q�很大�?/p>

使用JSON-lib �q�需要很多特定版本的包来支持�Q�很烦）�?/p>

具体的安装，�q�有需要什么支持包�Q�去jsonlib�|�站上看吧�?/p>

下面看一个项目中常用的JSON-Lib使用例子�?在ACTION中的代码)

try{
PrintWriter out = response.getWriter();
UserInfo userInfo = (UserInfo)request.getSession().getAttribute(“userinfo”); //从session中得到用户信息对�?/p>
String tempStr = “{\”Datas\”:”+JSONSerializer.toJSON(theList,config).toString()+”}”;
out.print(tmpStr);
return null;
}catch(Exception ex){
ex.printStackTrace();
return null;
}

很简单，使用JSON-Lib转化的工作就在String tempStr = “{\”Datas\”:”+JSONSerializer.toJSON(theList,config).toString()+”}”;
�q�行搞定了。然后输出就可以了�?/p>

但是�Q�这里有3个问题：

1. 会有可能出现��q��

2. 会出现环�Q�比如，对象A中包含B�Q�而对象B中又再次包含A,于是出现了无限��@环的环�\。这个时候JSON-LIB会报一个net.sf.json.JSONException: There is a cycle in the hierarchy的错误�?/p>

3. 会出现日期问题，因�ؓJAVA中日期属于一个复杂对象，JSON-Lib会把他当做一个复杂对象去解析�Q�得到的�l�果��׃��是你要的 2009-01-01 �q�样的字�W�串�?/p>

解决�Ҏ��Q?/p>

1. 请参见我的BLOG �Q?《Extjs Ajax ��q��问题解决�Ҏ��?/p>

2. 请参见我的BLOG�Q?《json-lib出现There is a cycle in the hierarchy解决办法�?/p>

3. 对JSON-LIB�q�行讄�� config.registerJsonValueProcessor(Date.class,new DateJsonValueProcessor(“yyyy-MM-dd”)); //date processor register

所以，最后，�q�段转换对象的代码最后变�?/p>

response.setContentType(“text/html”);
response.setCharacterEncoding(“utf-8″);

try{
PrintWriter out = response.getWriter();
UserInfo userInfo = (UserInfo)request.getSession().getAttribute(“userinfo”); //从session中得到用户信息对�?/p>

JsonConfig config = new JsonConfig();
config.setIgnoreDefaultExcludes(false);
config.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
config.registerJsonValueProcessor(Date.class,new DateJsonValueProcessor(“yyyy-MM-dd”)); //date processor register
String tempStr = “{\”Datas\”:”+JSONSerializer.toJSON(theList,config).toString()+”}”;
out.print(tmpStr);
return null;
}catch(Exception ex){
ex.printStackTrace();
return null;
}

可以讉K��一下ACTION或者SERVLET�Q?看看�l�果�?/p>

现在把对象�{化�ؓJSON没问题了。剩下的是前台如何把JSON转化成对象了�?/p>

其实�q�部分工作EXT基本全都做了。EXT主要的数据接收和储存靠Store �?EXT提供有JSONStroe 用来处理json �?�q�部分的工作基本不直接接触JSON �Q�而是使用EXT�?/p>

�?/p>

//Grid Store from servlet
var store = new Ext.data.JsonStore({
url:’/ctams/plan/monthTransportPlan.do?method=findMonthTransportPlan’,
root:’Datas’,
totalProperty: ‘TotalRecords’,
fields:["mtpId",
"mtpDate",
"mtpAcceptnum",
"mtpPlannum",
"mtpCarriagenum",
"mtpTunnage",
"mtpTrainnum",
"mtpFormernum",
"mtpFormertunnage",
"mtpFormertrainnum",
"mtpSwapload",
"mtpEndharbor",
"mtpAlreadyuse",
"mtpFlag",
"mtpRemark",
{name:'mpId',mapping:'monthPlan.mpId'}
],
baseParams:{
planDate:txtSearchText.getValue(),
planType:’42′,
conName:”
}
});

从前台到后台

目前我接触到�pȝ��往前台发送数据主要通过HTTP参数发送�?/p>

更高�U�一些的��是打包成json�Q�再发回服务�?/p>

阿�?/a> 2012-08-04 21:55 发表评论

Ext.encode �?Ext.decode

Sat, 04 Aug 2012 13:42:00 GMT

Ext.encode �?Ext.decode

Html代码

<body>
    <form id="form1" runat="server">
    <div>
    <script type="text/javascript">

function ready()
    {
        //再用一个示例说明下如何使用decode和encode�Q�现在我们已�l�知道什么是json数据格式了，也知道它的作用和语法�?
        //现在我们��开始演�l�吧
        //先��用decode�Ҏ��Q�这个方法是��json字符串�{换成对象�?

        //�W�一步：先定义一个json字符串吧
        var 刘天�?nbsp;= "{姓名:'刘�d�?,性别:'�?,老家:'香港'}";

        //�W�二步：现在我们要把刘天王�{换成对象�?
        var who = Ext.decode(刘天�?;

        //�W�三步：who成了对象后就相当于是�cȝ��对象了，里面的姓名，性别�Q�老家都成了who的属性了�Q�现在知道怎么通过对象讉K��属性了�?
        var name = who.姓名;    //获取who对象的[姓名]属�?
        var sex = who.性别;     //获取who对象的[性别]属�?
        var home = who.老家;    //获取who对象的[老家]属�?

        //�W�四步：下面��获取的信息�l�合��h��
        var result = "刘天王资料的信息�Q�姓名是--"+name + "�Q�性别--"+sex+"�Q�老家--"+home;

        //�W�五步：我们把获取的who对象的信息用弹出消息的方式显�C�出来吧
        Ext.Msg.alert("刘天王的资料信息",result);

        //以上��是��一个json字符串�{换成对象后，再逐个讉K��对象的属性的�C�Z��

        //下面使用encode�Ҏ��
        //encode�Ҏ��很简单了�Q�就是将上面生成的who对象再�{换成�W�一步定义的json字符�?

        //定义一个到旉��执行的函�?
        var getJson = function()
        {
            //你完全可以把�q�段写在函数外面�Q�之所以包含在里面�U�属是�ؓ了在昄��W�一个消息框后再�?�U�显�C�Z��面这个消息窗�?

            var jsonStr = Ext.encode(who);

            //我们�q�是通过弹出消息的方式把�q�个json字符串显�C�出来吧
            Ext.Msg.alert("jsonStr信息内容",jsonStr);
        };

        //下面�q�个�Ҏ��意思是�Q�在3�U�之后会调用函数getJson执行里面包含的脚�?

        setTimeout(getJson,3000);

        //补充点东�?

        //Ext.decode()和Ext.encode()分别是是 Ext.util.JSON.decode()和Ext.util.JSON.encode的简�?

    }
    Ext.onReady(ready);
    script>
    div>
    form>
body>

阿�?/a> 2012-08-04 21:42 发表评论

extjs 学习�|�址

Sat, 04 Aug 2012 13:24:00 GMT
ExtJS实战(6)-extjs+json
http://www.cnblogs.com/hannover/archive/2009/09/09/1563671.html

阿�?/a> 2012-08-04 21:24 发表评论

ExtJs中decode与encode(转蝲)

Thu, 26 Jul 2012 02:10:00 GMT

ExtJs中decode与encode(转蝲)

2011-05-30 15:28:39|  分类�Q? Extjs |字号订阅

��Q�http://blog.163.com/xiao_mege/blog/static/72942753201102693545195/
在述说这个例子之前，我假想你已经知道什么是Json数据了，那么在这里在温习一下吧:

JSON(JavaScript Object Notation) 是一�U�数据交换格式，采用完全独立于语�a�的文本格式；
JSON建构于两�U�结构：“名称/�?#8221;对的集合和值的有序列表
下面详细说明下：
“�?�U?�?#8221;对的集合�Q�A collection of name/value pairs�Q�。不同的语言中，它被理解为对象（object�Q�，�U�录�Q�record�Q�，�l�构�Q�struct�Q�，字典�Q�dictionary�Q�，哈希�?�Q�hash table�Q�，有键列表�Q�keyed list�Q�，或者关联数�l?�Q�associative array�Q��?
值的有序列表�Q�An ordered list of values�Q�。在大部分语�a�中，它被理解为数�l�（array�Q��?
JSON��h��以下�q�些形式�Q?nbsp;
对象是一个无序的“‘名称/�?#8217;�?#8221;集合。一个对象以“{”�Q�左括号�Q�开始，“}”�Q�右括号�Q�结束。每�?#8220;名称”后跟一�?#8220;:”�Q�冒��P��Q?#8220;‘名称/�?#8217; �?#8221;之间使用“,”�Q�逗号�Q�分隔�?
数组是��|��value�Q�的有序集合。一个数�l�以“[”�Q�左中括��P��开始，“]”�Q�右中括��P��l�束。��g��间��?#8220;,”�Q�逗号�Q�分隔�?nbsp;
��|��value�Q�可以是双引��h��h��的字�W�串�Q�string�Q�、数�?number)�?ture、false�? null、对象（object�Q�或者数�l�（array�Q�。这些结构可以嵌套�?
字符�Ԍ��string�Q�是由双引号包围的�Q意数量Unicode字符的集合，使用反斜�U��{义。一个字�W�（character�Q�即一个单独的字符�Ԍ��character string�Q��?
�I�白可以加入��C�Q何符号之�?/span>

------------------------以下来自癑ֺ�的最新报�?/span>

下面介绍Ext中两个很重要的方法，其实�Q�Ext中没有多余的�Ҏ��Q�每个方法都能够恰当好处的发挥它的作�?�q�里指它很重要，是因为它们太常用�?��其是在与数据库交换数据的时�?/span>
Ext中有两个很重要的�Ҏ��,一个是decode;一个是encode.��֐�思义,一个是�~�码,一个是解码,你难道真的这么想�?
严格的说,一个是��json字符串�{换成对象;一个是��对象�{换成json字符�?/span>

�?面这个示例主要介�l�的是Ext.decode()和Ext.encode()的用法，其中使用��C��json格式的串�Q�首先是用到�?Ext.decode()�Ҏ��Q�将json格式的串转换成对象，然后通过对象讉K��对象所包含的各个属性的��|��通过消息框把它们昄��出来�Q�之后在�?Ext.encode()��已�l�生成的对象转换成开始定义的json格式的串�Q�也通过消息框把它们昄��出来�Q�加了一个函敎ͼ�使得在第一个消息框弹出3�U�钟后再弹出�W�二个消息框

用图片说明吧

//下面是将json字符串�{换成对象�?通过对象讉K��属性生成的消息�?/span>

//下面是将上面生成的对象又转换成json字符串后生成的消息框

具体看下�C�Z��?/span>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testDecode.aspx.cs" Inherits="Test.Example.hello.testDecode" %>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" >

��试Ext.decode()和Ext.encode()�Ҏ��

现在�q�个例子��可以说明Ext.decode()和Ext.encode()�Ҏ��的完��作用了.

用图片说明吧

//下面是将json字符串�{换成对象�?通过对象讉K��属性生成的消息�?/span>

//下面是将上面生成的对象又转换成json字符串后生成的消息框

------------------------------

Ext.encode与Ext.decode的JSON转换

14 五月 2011 | �|�页前端 | Tags: decode, encode, extjs

在Extjs中，我们可以通过json来交换数据，Extjs内置了两个方法来互相转换�?/span>

Ext.decode( String json ) : Object

把json字符串�{换�ؓ对象

Ext.encode( Mixed o ) : String

把对象�{换�ؓ字符�Ԍ��用这个方法可以在ajax提交时返回数�?/span>

var arr = [];

var field1 = {};

field1['name'] = 'fatkun';

field1['age'] = 23;

var field2 = {};

field2['name'] = 'test';

field2['age'] = 24;

arr.push(field1);

arr.push(field2);

Ext.encode(arr);

//�q�回�l�果"[{"name":"fatkun","age":23},{"name":"test","age":24}]"

阿�?/a> 2012-07-26 10:10 发表评论

encodeURI()和encodeURIComponent()�Ҏ��

Thu, 26 Jul 2012 01:17:00 GMT

encodeURI()和encodeURIComponent()�Ҏ��用于�~�码传递给��览器的URI�Q�统一资源标识�W�）。有效的URI�?能包含某些字�W�，如空根{��这两个�Ҏ��用于�~�码URI�Q�这��L��专门的UTF-8�~�码替换所有的非有效字�W�，��可以�ɋ��览器仍能够接受�q�理解它们�?/p>
encodeURI() �Ҏ��用于处理完整的URI�Q�例如，http://www.itlobo.com/illegal value.htm�Q�，而encodeURIComponent()用于处理URI的一个片断（如前面的URI中的illegal value.htm�Q�。这两个�Ҏ��的主要区别是encodeURI()�Ҏ��不对URI中的�Ҏ��字符�q�行�~�码�Q�如冒号、前斜杠、问号和英镑�W�号�Q��?encodeURIComponent()则对它发现的所有非标准字符�q�行�~�码。例如：
�q�段代码输出两个��|��
可以看到�Q�除�I?格外�Q�第一个URI无�Q何改变，�I�格被替换�ؓ%20。第二个URI中的所有非字母数字字符都被替换成它们对应的�~�码�Q�基本上使这个URI变得无用。这��是 encodeURI()可以处理完整URI�Q�而encodeURIComponent()只能处理附加在已有URI末尾的字�W�串的原因�?/p>
�?�Ӟ��q�有两个�Ҏ��用于解码�~�码�q�的URI�Q�即decodeURI()和decodeURIComponent()。如你所料，�q�两个方法所做的��C��其对�?的方法相反。decodeURI()�Ҏ��只对用encodeURI()�Ҏ��替换的字�W�解码。例如，�Q?0��被替换为空��|��而％23不会被替换，因�ؓ它表�C?的是英镑�W�号�Q?�Q�，encodeURI()�q�不替换�q�个�W�号。同��L��Q�decodeURIComponent()会解码所�?encodeURIComponent()�~�码�q�的字符�Q�意味着它将�Ҏ��有的�Ҏ��D��码。例如：
�q�段代码输出两个��|��
在这�?例子中，变量uri存放的是用encodeURIComponent()�~�码的字�W�串。生成的��D��明了应用两个解码�Ҏ��时会发生的事情。第一个值由 decodeURI()输出�Q�把%20替换成空根{��第二个值由decodeURIComponent()输出�Q�替换所有的�Ҏ��?/p>
�q�些URI �Ҏ��encodeURI()、encodeURIComponent()、decodeURI()和decodeURICom- ponent()代替了BOM的escape()和unescape()�Ҏ��。URI�Ҏ��更可取，因�ؓ它们会对所有Unicode�W�号�~�码�Q�而BOM�Ҏ�� 只能对ASCII�W�号正确�~�码。尽量避免��用escape()和unescape()�Ҏ��?/p>
用AJAX提交数据�Ӟ��
      发送端用encodeURIComponent(escape(xxxxxxx))��可以了�Q�其他发送接受代码同上）
ASP端接收方法：

<%
Response.Charset="gb2312"
Response.Write Unescape(Request("act"))
%>

阿�?/a> 2012-07-26 09:17 发表评论

ExtAspNet学习-AppBox框架

Fri, 22 Jun 2012 13:47:00 GMT
http://www.cnblogs.com/rongyi/archive/2012/03/06/2381614.html

阿�?/a> 2012-06-22 21:47 发表评论

frame	Boolean	讄��是否渲染面板�Q?/font>true则渲染面板�ؓ自定义的圆角�Ҏ��Q?/font>false则渲染�ؓ1px的直角边�?/font>
header	Boolean	讄��是否创徏面板头部�Q?/font>header�Q�元素，true则创建，false则蟩�q?/font>header元素的创建，如果提供�?font face="TimesNewRomanPSMT">title但没有设�\|?/font>header�?/font>header会被自动创徏。如果提供了title但明��设�\|?/font>header�?/font>false�?/font>header不会被创�?/font>
headerAsText	Boolean	讄��是否在面板的header中显�C?/font>title�Q?/font>true则显�C�，默认�?/font>true
height	Number	面板高度�Q�默认�ؓauto
hideBorders	Boolean	true则隐藏面板容器中所有组件的�Ҏ��Q?/font>false则根据组件的具体配置�q�行昄��
hideCollapseTool	Boolean	讄��?/font>collapsible�?/font>true�Ӟ��是否昄��展开或收�~�按�?/font>
html	String/Object	讄��面板�Q?/font>body�Q�元素的内容�?/font>HTML片段�?/font>DomHelper生成的内宏V�?/font>
items	Mixed	单独一个子�l��g或子�l��g的数�l?/font>
layout	String	面板的布局�c�d��Q�默�?/font>Ext.layout.ContainerLayout布局�Q�被选布局的配�\|�项通过layoutConfig�q�行讄��
layoutConfig	Object	�q�个配置对象包含被选布局的配�\|�项�Q�针�Ҏ��U�布局的配�\|�项需要查看相应的布局�c�说�?font face="TimesNewRomanPSMT">
maskDisabled	Boolean	讄��当面板不能��用时是否遮罩面板�Q?/font>true则遮�\|�，默认�?/font>true
shadow	Boolean/String	讄��是否在面板后面显�C�阴影，true则显�C�，或通过字符串指定阴��q��昄��模式�Q�有效值包括：sides�?/font>frame�?/font>drop�Q�默认�ؓ'sides'。该��只在floating �?/font> true时生�?/font>
shadowOffset	Number	讄��面板阴媄的偏�U�量�Q�以像素为单位，默认�?/font>4。该��只�?/font>floating �?/font>true时生�?/font>
tbar	Object/Array	讄��面板的顶端工��h��Q�可以是Ext.Toolbar对象、工��h��配置对象或button配置对象的数�l�。注意，面板渲染后只能通过getTopToolbar�Ҏ��讉K��该工��h��
title	String	昄��在面板头部的标题信息'
titleCollapse	Boolean	讄��是否允许通过点击面板头部�q�行展开和收�~�操作，true则允许，默认�?font face="TimesNewRomanPSMT">false
tools	Array	工具按钮配置对象的数�l�，�q�些按钮会被��d��到面板头部功能区�Q�在�?font face="TimesNewRomanPSMT">5-2中会有详�l�的说明
width	Number	面板宽度�Q�默认�ؓauto

配置��?/font>	参数�c�d��	说明
id	String	必选项�Q�可能值及效果见表5.3
handler	Function	点击按钮后触发的处理函数�Q�参数包括： event : Ext.EventObject�?/font>toolEl : Ext.Element�?/font>Panel : Ext.Panel
scope	Object	处理函数的执行范�?/font>
qtip	String/Object	为按钮指定提�C�Z��息，可以是字�W�串或配�\|�对�?/font>
hidden	Boolean	讄��初次渲染�Ӟ��是否隐藏
on	Object	为按钮配�\|�事件监听器�?/font>

本地资源---员工列表
序号	姓名
1	张三
2	李四
3	王五
4	赵六
5	陈七
6	杨八
7	刘九