Extjs radio和FormPanel问题

Question

1.Radio的事件。
items: [{
     checked: true,
     xtype: 'radio',
     fieldLabel: '123',
     boxLabel: '属性',
     height: 30,
     width: 70,
     name: 'type',
     handler:function(){
         alert("1");
       }
    },      
    {
     xtype: 'radio',
     fieldLabel: '123',
     boxLabel: '文本',
     width: 70,
     height: 30,
     name: 'type',
     handler:function(){
alert("2");
      }
    },
   {
    xtype: 'radio',
    fieldLabel: '123',
    boxLabel: '数字',
    width: 70,
    height: 30,
    name: 'type',
    handler:function(){
alert("3");
      }
    }
]
点击一个radio事件会执行两次！这是为什么？ 比如点文本先弹出 1 然后是 2 。2.做了一个GridPanel动态列。点击按钮出来一个Window上有FormPanel 根据在文本框里的值添加列标题。
  现在是点击添加动态列是能出来。可是window关闭不了。只能点击右上角的关闭按钮。
  关了以后在打开Window添加的值就是上一次关闭以后的值文本框里输入不管用。下面是代码。var sxgrid;
var cm;
var store;
var fileSet1;
var fileSet2;
var fileSet3;
var showAdd;
Ext.onReady(function() { 
 Ext.QuickTips.init();
cm = [{
header: '项目名称',
mapping: 'a',
resizable:false,
anchor:.1
},
{
header: '项目内容',
mapping: 'b',
resizable:false,
anchor:.1
},
{
header: '申报金额',
mapping: 'c',
resizable:false,
anchor:.1
},
{
header: '备注',
mapping: 'd',
resizable:false,
anchor:.1
}
];
var myData = [
    ];
store = new Ext.data.ArrayStore({
        fields: [
           {name: 'a'},
           {name: 'b'},
           {name: 'c'},
           {name: 'd'},
        ]
    });
store.loadData(myData);

sxgrid = new Ext.grid.GridPanel({
renderTo: document.body,
frame: true,
store: [],
height:200,
cm: new Ext.grid.ColumnModel(cm),
tbar: [{
text: '添加属性',
handler: function() {
//alert(cm.getColumnCount());
//var c = sxgrid.getColumnModel();
//c.setConfig(m);
//cm.push({header:'a'+sxgrid.getColumnModel().getColumnCount(),mapping:'e',anchor:.1});
//sxgrid.reconfigure(store,new Ext.grid.ColumnModel(cm));
showAddsx();
}
},
{
text: '删除属性',
handler: function() {
alert("2");
}
},
{
text: '修改属性',
handler: function() {}
},
{
text: '左移'
},
{
text: '右移'
}]
});
         win1 = new Ext.Window({
                width:700,
                height:300,
                plain: true,
modal: true,
items:[sxgrid],
                buttons: [{
                    text:'保存',
                    disabled:true,
handler:function(){

}
                },{
                    text: '取消',
                    handler: function(){
                        win1.close();
                    }
                }]
            });
        win1.show();});
function showAddsx(){
    var formPanel = new Ext.FormPanel({
        title: '设置属性',
        labelWidth: 50,
        labelAlion: 'right',
        layout: 'form',
        padding: '5 5 5 5',
        width: 350,
        frame: true,
        height: 260,
        frame: true,
        items: [{
            xtype: 'textfield',
            fieldLabel: '名称',
name:'sxname',
            anchor: '100%',
            colspan: 2,
allowBlank:false
        },
        {
            layout: 'column',
            anchor: '100%',
            items: [{
                layout: 'form',
                columnWidth: .3,
                items: [{
                    xtype: 'fieldset',
                    title: '字段类型',
                    layout: 'column',
                    anchor: '98%',
                    height: 140,
                    items: [{
                        checked: true,
                        xtype: 'radio',
                        fieldLabel: '123',
                        boxLabel: '属性',
                        height: 30,
                        width: 70,
                        name: 'type',
handler:function(){
}
                    },
                    {
                        xtype: 'radio',
                        fieldLabel: '123',
                        boxLabel: '文本',
                        width: 70,
                        height: 30,
                        name: 'type',
handler:function(){
}
                    },
                    {
                        xtype: 'radio',
                        fieldLabel: '123',
                        boxLabel: '数字',
                        width: 70,
                        height: 30,
                        name: 'type',
handler:function(){
}
                    },
                    {
                        xtype: 'radio',
                        fieldLabel: '123',
                        boxLabel: '日期',
                        width: 70,
                        height: 30,
                        name: 'type',
handler:function(){
}
                    }]
                }]
            },
            {
                layout: 'form',
                columnWidth: .7,
                items: []
            }]
        }],
        buttons: [{
            text: '确定',
handler:function(){
//添加到指定位置
cm.splice(3,0,{header:Ext.get('sxname').getValue(),mapping:'e',anchor:.1});
//GridPanel重新加载数据和更
sxgrid.reconfigure(store,new Ext.grid.ColumnModel(cm));
showAdd.close();
}
        },
        {
            text: '取消',
            handler: function() {
                showAdd.close();
            }
        }]
    });

   showAdd = new Ext.Window({
width:365,
                height:280,
                plain: true,
        renderTo: document.body,
modal: true,
items:[formPanel]
 }).show(win1);
}

Answer 1

1.当checked值发生变化即触发，两个radio发生checked值变化，自然弹出两次
2.window的renderTo去掉

Answer 2

1.那应该怎么改？
2.我去掉了还是一样。FormPanel好像就没有销毁。
谢谢

Answer 3

问题2解决了  是因为Ext包的过. 换了一个就没有问题了

Answer 4

1、不要放在同一个item中就可以了，就是点击1不影响2的值就可以了。如果点击1，2的值发生了变化2个都会执行。
2、你的关闭按钮，用隐藏。不要真的关闭，构建dom是耗资源的。建议将closeAction: "hide"

Answer 5

 var fp = new Ext.FormPanel({
        title: 'Radio',
        frame: true,
        labelWidth: 110,
        width: 600,
        renderTo:document.body,
        bodyStyle: 'padding:0 10px 0;',
        items:[{
  checked: true,
  xtype: 'radio',
  fieldLabel: '123',
  boxLabel: '属性',
  height: 30,
  width: 70,
  name: 'type',
  handler:function(){
  alert("1");
  }
  },   
  {
  xtype: 'radio',
  fieldLabel: '123',
  boxLabel: '文本',
  width: 70,
  height: 30,
  name: 'type',
  handler:function(){
alert("2");
  }
  },
  {
  xtype: 'radio',
  fieldLabel: '123',
  boxLabel: '数字',
  width: 70,
  height: 30,
  name: 'type',
  handler:function(){
alert("3");
  }
  }
        ]
        buttons: [{
            text: 'Save',
            handler: function(){
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });这是我测试的代码

Answer 6

这样就可以了：var fp = new Ext.FormPanel({
  title: 'Radio',
  frame: true,
  labelWidth: 110,
  width: 600,
  renderTo:document.body,
  bodyStyle: 'padding:0 10px 0;',
  items:[{   xtype: 'radio',
  fieldLabel: '123',
  boxLabel: '属性',
  height: 30,
  width: 70,
  name: 'type',
  id:'11',
  handler:function(){if(r1.checked){alert('1');}}
  },
  {
  xtype: 'radio',
  fieldLabel: '123',
  boxLabel: '文本',
  width: 70,
  height: 30,
  name: 'type',
  id:'22',
  handler:function(){if(r2.checked){alert('2');}}
  },
  {
  xtype: 'radio',
  fieldLabel: '123',
  boxLabel: '数字',
  width: 70,
  height: 30,
  name: 'type',
  id:'33',
  handler:function(){if(r3.checked){alert('3');}}
  }
  ],
  buttons: [{
  text: 'Save',
  handler: function(){
   alert("4");
  }
  },{
  text: 'Reset',
  handler: function(){
  fp.getForm().reset();
  }
  }]
   });   var r1 = Ext.getCmp('11');
   var r2 = Ext.getCmp('22');
   var r3 = Ext.getCmp('33');

Answer 7

当radio触发事件后，你return下 阻止事件冒泡

Answer 8

恩. 是个思路.. 谢谢
我用的是focus这个事件.. 
获得焦点时触发..

Answer 9

回复9楼..
 问题解决了. 用的是focus事件.
谢谢