学步园

Ext2.0:  Ext.form.Combobox使用Dwr作为远程数据源：

 

一、定义dataSource

 

  var roleComboStore = new Ext.data.Store({
         proxy: new Ext.data.DWRProxy( UserService.getUsableRole , true),
         reader:new Ext.data.ListRangeReader({
              totalProperty: 'totalSize',
              id: 'id'
          }, Ext.data.Record.create([
                    {name: 'retrunValue',mapping:'userId', type:'string'},
                    {name: 'displayText',mapping:'username',type:'string'}
                   ])
           )
    }) ;

  其中mapping对应的userId和username是java对象中的字段名，

  而name对应的则为Ext.form.ComboBox中对应的valueField和displayField

 

二、获取Combobox

var r_roleId   = formx.getCombo( roleComboStore , 'roleId','<b>角   色</b>',150,'请选择角色',false,false) ;

为了偷懒，将new Ext.form.ComboBox放到一个js函数里面了。不要的属性的全干掉了

////////////////////////////////

function FormX(){
}

 

FormX.prototype = {
   
 getYesNoStore : function(){
     var store = new Ext.data.SimpleStore({
          fields: ["retrunValue", "displayText"],
          data: [[1,'是'],[0,'否']]
     }) ;
     return store ;
 },
 
 getValidStore : function(){
     var store = new Ext.data.SimpleStore({
          fields: ["retrunValue", "displayText"],
          data: [[1,'有效'],[0,'无效']]
     }) ;
     return store ;
 },
 
 getSexStore : function(){
     var store = new Ext.data.SimpleStore({
          fields: ["retrunValue", "displayText"],
          data: [[1,'男'],[2,'女']]
     }) ;
     return store ;
 },
 
 
 
 getCombo : function(store,name,filedLabel,width,emptyText,allowBlank,editable){
    var combo = new Ext.form.ComboBox({
   xtype:'combo',
   store: store ,
      valueField :"retrunValue",
      displayField: "displayText",
      mode: 'local',
      forceSelection: true,
      blankText:emptyText,
      emptyText:emptyText,
      hiddenName:name,
      editable: editable,
      triggerAction: 'all',
   allowBlank:allowBlank,
   fieldLabel: filedLabel ,
   name:name,
      width:width
  }) ;
  return combo ;
 }
}

 

三、定义form

var UserRoleForm = new Ext.form.FormPanel({
        el:"add-user-role-panel",defaultType: 'textfield',labelAlign: 'right',
     title: '11',labelWidth:50,frame: true,anchor: '100%',height:150,
        items: [
            r_userId,
            r_roleId
        ]
 });

没有将button放到form里面

四、定义窗体

      var add_user_role_win =  new Ext.Window({
        el:'add-user-role-win',
        layout:'fit',
        width:300,
        frame:true,
        height:150,
       
        closeAction:'hide',
        plain: true,
       
        items: UserRoleForm ,//tree,//

 

        buttons: [
        {
            text:'保存',
            disabled:false,
            handler: saveUserRole
        },{
            text: '关闭',
            handler: function(){
                add_user_role_win.hide();
            }
        }]
    });