ExtJs 再次载入panel

Question

var _orderPanel = new Ext.form.FormPanel(
{
id : "id_deliveryPanel",
iconCls : "icon-grid",
defaults : {
labelWidth : 65
},
tbar : [ btn_edit, "-"],
items : [ {
items : {
layout : "column",
border : false,
items : [
{
xtype : "container",
columnWidth : .25,
layout : "form",
style : "padding: 0px 15px 0px 0px",
items : {
id : "id_deliveryCode",
fieldLabel : "发货单编号",
xtype : "textfield",
name : "deliveryM.deliveryCode",
maxLength : 50,
maxLengthText : '不能超过50个字符',
value : s,
// labelWidth : 20,
// width : 171,
// labelPad : 0,
readOnly : isOrderPanelOnlyRead,
allowBlank : false
}
},

{
xtype : "container",
columnWidth : .25,
layout : "form",
style : "padding: 0px 15px 0px 0px",
items : {
id : "id_orderCode",
fieldLabel : "订单编号",
xtype : "textfield",
anchor : '100%',
maxLength : 50,
maxLengthText : '不能超过50个字符',
allowBlank : false,
readOnly : isOrderPanelOnlyRead,
name : 'deliveryM.orderCode'


}
},formpanel的定义如上代码。可以看到很多控件的readOnly值都是一个变量isOrderPanelOnlyRead。
刚开始载入页面的时候，isOrderPanelOnlyRead为true。所以这些控件都是只读的
想实现在点下某个按钮之后，将isOrderPanelOnlyRead置为false,然后再次载入panel。于是那些控件变成可以编辑的。formpanel上
var btn_edit = new Ext.Button( {
text : "编辑",
id : "btn_edit",
handler : function() {
              isOrderPanelOnlyRead =true;
              _orderPanel.doLayout();
}

})但是并没有实现预想的效果。还是只读的。请问具体应该如何让formpanel再次载入？

Answer 1

你可以先remove之前的面板再add当前的面板试试

Answer 2

回复myjlvzlp：
我这个_orderPanel是另一个panel的item项var _totalPanel = new Ext.Panel( {
id : "id_totalPanel",
iconCls : "icon-grid",
border : false,
loadMask : {
msg : '数据正在加载中，请稍候...'
},
region : "center",
trackMouseOver : true,
frame : true,
items : [ _orderPanel],
autoScroll : true,
bodyStyle : "overflow-x:hidden"
});按照你的意思，这样写：
var btn_edit = new Ext.Button( {
text : "编辑",
id : "btn_edit",
handler : function() {
        _totalPanel.remove(_orderPanel);
_orderPanel.doLayout();
_totalPanel.add(_orderPanel);
_totalPanel.doLayout();
}
})
 但是最后一句居然报错。

Answer 3

或者我每个控件都改变一次它的readonly值。Ext.getCmp("id_deliveryPanel").getForm().findField('id_deliveryCode').getEl().dom.readOnly = false;如果是textfield的话就变成可以编辑了，但如果是datefield或者combo的话，的那个可以点的东西没有出来。Ext.getCmp("id_deliveryPanel").getForm().findField('id_deliveryDate').trigger.setDisplayed(true);这样的话是选择日期或者下拉是出来了，但combo的下拉点了之后没反应。大神们求帮助啊。到底该如何把一个readonly的comboBox变成可以下拉的comboBox呢？

Answer 4

如果你重新布局，readOnly : isOrderPanelOnlyRead,这个属性还是会加上去的。所以不要刷新，直接清空属性，或者改变属性值。

Answer 5

回dongvsning:
var btn_edit = new Ext.Button( {
text : "编辑",
id : "btn_edit",
handler : function() {
  isOrderPanelOnlyRead =true;   //有这一句也是一样的
  _totalPanel.remove(_orderPanel);
_orderPanel.doLayout();
_totalPanel.add(_orderPanel);
_totalPanel.doLayout();
}
})
问题出现在_totalPanel.doLayout();导致ext_all报错ext3.0 comboBox的readonly配置项为true时，它的外观跟一个textfield没两样。现在只想知道怎么动态地变成readonly为false的正常的可以下拉的comboBox