Extjs textfield只读的情况
在填写表单的时候 可以输入
在表单修改的时候 ID项不能修改 设置为只读
在网上搜到三三种解决方案都不可行
NewShipForm.getForm().findField('ID').getEl().dom.readOnly = true;
结果：失败
ReadOnly:true;
结果：失败
Ext.getCmp('sorgcode').getEl().dom.readOnly = true;
初始化表单
function initUpdateForm(form) {
form.getForm().load({
url: FORM_INIT_URL,
method: 'GET',
success: function (form, action) {
setFormFieldValue(updateForm, 'action', 'add');
// updateForm.setTitle("新增机构信息");
},
failure: function (form, action) {
Ext.Msg.alert('提示', action.errors);
}
});
}
// 构造表单
var updateFormTitle = "新增机构信息";
var updateForm = Ext.create('Ext.form.Panel', {
buttonAlign: 'center',
id: 'form_update',
margin: '0 0 10px 0',
layout: "form",
bodyStyle: {
padding: '10px',
borderWidth: '1px 0 0 0'
},
frame: false,
border: 0,
bodyPadding: '10 10 0',
defaults: {
allowBlank: false,
msgTarget: 'side',
labelWidth: 120
},
items: [
{
layout: 'column',
items: [
{columnWidth: .5,
layout: "form",
items: [form_update_sorgcode] ,
},
{columnWidth: .5,
layout: "form",
items: [form_update_sorgname]
}
]
},
{
layout: 'column',
bodyStyle: {
border: 0
},
items: [
{columnWidth: .5,
layout: "form",
items: [form_update_sparent]
},
{columnWidth: .5,
layout: "form",
items: [form_update_slevel]
}
]
},
{
layout: 'column',
bodyStyle: {
border: 0
},
items: [
{columnWidth: .5,
layout: "form",
items: [form_update_sareacode]
},
{columnWidth: .5,
layout: "form",
items: [form_update_saddress]
}
]
},
{
layout: 'column',
bodyStyle: {
border: 0
},
items: [
{columnWidth: .5,
layout: "form",
items: [form_update_szipcode]
},
{columnWidth: .5,
layout: "form",
items: [form_update_scontact]
}
]
},
{
layout: 'column',
bodyStyle: {
border: 0
},
items: [
{columnWidth: .5,
layout: "form",
items: [form_update_semail]
},
{columnWidth: .5,
layout: "form",
items: [form_update_sphone]
}
]
},
{
layout: 'column',
bodyStyle: {
border: 0
},
items: [
{columnWidth: .5,
layout: "form",
items: [form_update_sremark]
},
{columnWidth: .5,
layout: "form",
items: [form_update_istate]
}
]
},
form_update_action
],
buttons: [form_update_reset,
{
text: '提交',
formBind: true,
disabled: true,
waitMsg: '请稍等...',
iconCls: 'icon_submit',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: ORG_SAVE_URL,
type: 'POST',
success: function (form, action) {
Ext.Msg.alert('提示', '保存机构信息成功');
updateForm.getForm().reset();
orgWindow.hide();
// updateForm.setTitle("新增机构信息");
orgStore.loadPage(1);
},
failure: function (form, action) {
errorsChoose('保存机构信息出错', action.result.errors)
}
});
}
}
}
]
});
//创建表单元素
var form_update_sorgcode = createTextfield('机构代码', 'sorgcode', false); // 机构代码
//显示的表单 双击某一行 弹出 window 在其中修改
就是想在弹出的window中修改 表单内容 使其ID为只读
// 机构列表
var orgTable = Ext.create('Ext.grid.Panel', {
store: orgStore,
id: 'orgTable',
title: '机构信息列表',
border: 1,
margins: '10',
selModel: new Ext.selection.CheckboxModel(),
columns: [
{header: '机构代码', dataIndex: 'sorgcode'},
{header: '机构名称', dataIndex: 'sorgname'},
{header: '上级机构代码', dataIndex: 'sparent'},
{header: '上级机构名称', dataIndex: 'sparentorgname'},
{header: '顶级机构代码', dataIndex: 'stoporgcode'},
{header: '顶级机构名称', dataIndex: 'stoporgname'},
{header: '所在地区', dataIndex: 'sareaname'},
{header: '机构类型', dataIndex: 'sorgtype'},
{header: '机构级别', dataIndex: 'slevel', renderer: getOrgLevelName},
{header: '状态', dataIndex: 'istate', renderer: getStateName}
],
forceFit: true,
dockedItems: [
{
xtype: 'pagingtoolbar',
store: orgStore,
dock: 'bottom',
displayInfo: true
}
],
// 双击表格
listeners: {
dblclick: {
element: 'body',
waitMsg: '请等待...',
fn: function () {
var id = getSelectedRowCell(orgTable, "sorgcode"); // 获得选中行iid
// Ext.getCmp('sorgcode').getEl().dom.readOnly = true;
// 加载详细信息表单数据
updateForm.getForm().load({
url: ORG_GET_URL + id,
method: 'GET',
success: function (form, action) {
orgWindow.show();
setFormFieldValue(updateForm, 'action', 'modify'); // 设置表单action为修改
updateForm.getForm().findField('sorgcode').getEl().dom.readOnly = true;
orgWindow.setTitle("修改机构信息");
},
failure: function (form, action) {
// Ext.Msg.alert('出错', action.errors);
errorsChoose('出错', action.result.errors)
}
});
}
}
}
});
塚本八雲的猫咪
10 years, 9 months ago
Answers
我用的相对比较简单。
我给表单中的每一项都给了itemId这个属性值
然后在Controller中在refs里声明ID这个component
接着就在controller代码里这样用即可：
对于填写表单和修改表单这两种情况的区分，总有不同的触发点吧？比如新建有新建按钮，修改是直接点击这个record，我的建议是在controller内部加个flag来记录下状态吧。
还有一个建议是：
Extjs有提供很多Event来监听各种鼠标和键盘操作，例如双击表格也可以设置个监听，这样就能拿到状态flag
17夜前1夜
answered 10 years, 9 months ago