底部按钮对齐方式
buttonAlign : 'center' 底部按钮及提交方法：
前台要显示成功信息后台返回的json格式必须包含success
{
\ \}
buttons : [{
text : '重置',
handler : function() { } }, {
text : '提交',
handler : function() {
var form = this.up('form').getForm(); if (form.isValid()) {
form.submit({
url : '/zhangliang-test-ext/getjson.action', params : {
},
Ext.Msg.alert('失败', },
Ext.Msg.alert('完成',
'修改数据成功');
type : 'update'
this.up('form').getForm().reset();
success : function(form, action) {
failure : function(form, action) {
}]
}
}
}
'修改数据失败');
});
文档解释
myFormPanel.getForm().submit({ clientValidation: true,
url: 'updateConsignment.php', params: {
newStatus: 'delivered' },
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg); },
failure: function(form, action) { switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE: Ext.Msg.alert('Failure', 'Ajax communication failed'); break;
case Ext.form.action.Action.SERVER_INVALID: Ext.Msg.alert('Failure', action.result.msg); } } });
以下将会处理成功提交的服务器响应：
{
\ \}
并且以下是失败提交的服务端相应：
{
\
\}
ExtJS获取父子、兄弟容器元素方法
1.当前对象的父对象(上级对象) this.ownerCt:
2.当前对象的下一个相邻的对象 this.nextSibling();
3.当前对象的上一个相邻的对象 this.previousSibling();
4.当前容器中的第一个子对象 this.get(0);
this.items.first();
5.当前容器的最后一个子对象 this.items.last();
6.查找当前对象的所有上级匹配的容器 this.findParentByType(String xtype)
7.查找当前对象的所有下级匹配的组件
this.findByType(String xtype)
关闭折叠展开方法
http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.window.Window-method-expand show() hide() close( )
关闭Panel。默认情况下这个方法会将其自身的DOM对象在浏览器中移除，destroys 销毁Panel对象并且销毁该Panel中的子组件。在关闭Panel动作发生之前beforeclose事件被触发，如果 要取消关闭动作则在其事件的处理函数中返回false即可。
collapse( String direction, [Boolean animate] ) : Ext.panel.Panel
折叠 Panel 体以便将其隐藏。挂靠组与边界平行折叠之后保持其依然可见。触发beforecollapse事件，如果取消 折叠动作在该事件的处理函数中返回false。
Parameters
direction : String
折叠的方向，必须从下面当中选一个
Ext.Component.DIRECTION_TOP Ext.Component.DIRECTION_RIGHT Ext.Component.DIRECTION_BOTTOM Ext.Component.DIRECTION_LEFT animate : Boolean (optional)
True 折叠的时候动态的过度，否则没有动态效果 (默认参照Panel的animCollapse属性配置)
expand( Boolean animate ) : Ext.panel.Panel
展开 Panel 使之状态变为可见.触发beforeexpand事件,当处理函数中返回false则展开操作被取消.
Parameters
animate : Boolean
设为true开启动画过度效果, false 则没有动画效果(默认值依照Panel中属性 animCollapse的配置)
ReturnsExt.panel.Panel
两个js文件的交互
显示页面gridPageMain.js，修改界面formPage.js
显示界面要传递数据给修改界面，修改界面修改成功之后要通知显示界面关闭修改界面
解决方法：config熟悉中添加空方法，主界面创建修改界面时实现方法，然后修改界面就可以调用此方法执行关闭操作 Ext.define('js.pageForm',{ Ext.define('js.pageForm',{ extend:'Ext.form.Pane', extend:'Ext.form.Pane', config:{ pageForm : null, closePanel : null initComponent : function(){ } var me =this; me.pageForm=Ext.create( ‘js.pageForm’, { closePanel : function(){ //关闭修改界面代码 } } ); me.callParent(arguments); }
布局
http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.VBox-cfg-pack http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Form http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Anchor http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.HBox http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Fit
http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Accordion http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Border http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Column http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Table http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.layout.container.Card
漂亮的表单
http://bbs.51cto.com/thread-1094487-1.html
Ext.LoadMask
一个模态的,悬浮的组件, 比如当某个组件加载数据时, 在其上方显示. 当此组件显示时, 附属组件将被一个模态遮罩覆盖, 同时LoadMask的msg中的内容将会随着一个旋转的图片显示在中间位置.
如果指定了store参数, 那么在Store进行加载处理时, 遮罩会自动同步的显示和隐藏.
// 基本的mask:
var myMask =newExt.LoadMask(myPanel,{msg:\myMask.show();
图表
http://mljavalife.iteye.com/blog/1320109
图表的轴(axes)
position设置轴的位置。可用的选项有left, bottom, right, top. 默认为bottom.
grid表格的配置项可以是你能够设置一个轴的背景表格. 如果你将纵轴设置成true, 垂直的线将会显示出来. 如果你将横轴设置成true, 水平的线将会显示出来. 如果都设置了, 水平线和垂直线都会被显示出来. (1) 数值轴 Ext.chart.axis.Numeric
处理数值的轴。这个轴用于定量的数据而不是类别轴。你可以设置最大值和最小值使它