日期:2014-05-16  浏览次数:20346 次

ExtJs 再次载入panel
JScript code


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();
}

})

但是并没有实现预想的效果。还是只读的。