控件之间相互调用

控件之间相互调用 

 

 比如，有一个grid，上面有一个添加按钮。应该弹出一个window，在window进行保存工作。
点击保存之后，grid要更新。

他们之间的相互调用，难道都是使用getCmp（）作为获取控件的途径吗？

 

请看是否达到你的要求，且结构清晰

 

var win;
var addrolewin;
var copywin;
var grid;
var expander;
var ds;

//编辑角色
function actionEditEvent() {
   var record = grid.getSelectionModel().getSelected();
   if (record) {
      win = new Ext.Window({
         id:id,
         title:"编辑用户组",
         iconCls:'edit',
         layout:'fit',
         width:650,
         height:450,
         closeAction:'close',
         collapsible:true,
         maximizable:true,
         plain: true,
         modal:true,
         html : '<iframe frameborder="0" width="100%" height="100%" src="index.php?mo=groupman&do=editrole&id='+record.data['roles_id']+'"></iframe>'
      });
      win.on("beforedestroy",function(){
         ds.reload();
      });
      win.show();
   }
}

//添加角色
function newRole () {
   addrolewin = new Ext.Window({
      id:id,
      title:"添加用户组",
      iconCls:'add_role',
      layout:'fit',
      width:650,
      height:450,
      closeAction:'close',
      collapsible:true,
      maximizable:true,
      plain: true,
      modal:true,
      html : '<iframe frameborder="0" width="100%" height="100%" src="index.php?mo=groupman&do=getroles"></iframe>'
   });
   addrolewin.on("beforedestroy",function(){
      ds.reload();
   });
   addrolewin.show();
}

//复制角色
function copyRole () {
   var id = getId(grid);
   if (!id) {
       Ext.Msg.alert('错误', '请选择一个用户组复制！');
   } else {
      copywin = new Ext.Window({
         id:id,
         title:"添加用户组",
         iconCls:'add_role',
         layout:'fit',
         width:650,
         height:450,
         closeAction:'close',
         collapsible:true,
         maximizable:true,
         plain: true,
         modal:true,
         html : '<iframe frameborder="0" width="100%" height="100%" src="index.php?mo=groupman&do=copyrole&id='+id+'"></iframe>'
      });
      copywin.on("beforedestroy",function(){
         ds.reload();
      });
      copywin.show();
   }
}

//生成表格
function makeGrid(){
   return new Ext.grid.GridPanel({
         border:false,
         viewConfig: {
            forceFit:true
         },
         buttonAlign :'left',
         region:'center',
         plugins: expander,
         loadMask: true,
         store: ds,
         cm: new Ext.grid.ColumnModel([
             expander,
             new Ext.grid.RowNumberer(),
             //new Ext.grid.CheckboxSelectionModel(),
             {header:"ID",width:50,sortable:true,dataIndex:'roles_id'},
             {header:"名称", width:100,sortable:false,dataIndex:'roles_<?php echo $user_languag;?>_name'},
             {header:"类型", width:100,sortable:false,renderer:check,dataIndex:'roles_type'}
            ]),
         //sm:new Ext.grid.CheckboxSelectionModel(),
         //autoExpandColumn:4,
         autoScroll: true,
         tbar: [
            {text:"添加",iconCls:'add_role',handler:newRole},{xtype:'tbseparator'},
            //{text:"删除",iconCls:'del',handler:del},{xtype:'tbseparator'},
             {text:"复制权限",iconCls:'copy',handler:copyRole},{xtype:'tbseparator'},
                {text:"刷新",iconCls:'refresh',handler:function (){ds.reload();}},
            '<font color="red">提示：双击一行可进行编辑！</font>'
         ],
         bbar: new Ext.PagingToolbar({
            pageSize: 50,
            store: ds,
            displayInfo: true,
            displayMsg: '第{0} 到 {1} 条数据 共{2}条',
            emptyMsg: '没有数据'
         })
      });
}

/*//删除
function del() {
   var ids = getIds(grid);
   if (ids) {
      var dialog  = Ext.Msg.show({
         title:"删除用户组", msg: "确认要删除该用户组吗？",
         icon:Ext.MessageBox.QUESTION, width:300,
         fn:function(btn) {
            if (btn =='ok') {
               Ext.MessageBox.show({
                  title: "请稍等",
                  msg: "正在删除",
                  progressText: 'loading...',
                  width:300,
                  wait:true,
                  waitConfig: {interval:500}
               });
               setTimeout(function(){}, 10000);
               //删除开始
               Ext.Ajax.request({
                     url: 'index.php?mo=groupman&do=del&ids='+ids,
                     success: function(result){
                              Ext.Msg.alert("成功","删除成功！");
                              ds.reload();
                     }
                });
               //删除结束
            }
         },
         buttons:{
            ok:"确认",cancel:"取消"
         }
      });
   } else {
      Ext.Msg.alert("错误","服务器出现错误，请稍候再试！");
   }
}*/

//自定义列
function check(value)
{
   if (value==2)
   {
      return '<font color="red">管理员</font>';
   }
   else
   {
      return '普通';
   }
}

Ext.onReady(function(){
    ds = new Ext.data.Store({
      proxy : new Ext.data.HttpProxy({url:'index.php?mo=groupman&do=list&'+Math.random()}),
        reader: new Ext.data.JsonReader({
         root: 'topics',
            totalProperty: 'totalCount',
            id: 'roles_id'
         },[
         'roles_id','roles_<?php echo $user_languag;?>_name','roles_type','games','users'
         ])
    });



   /*********************************************
           Ext.grid.RowExpander插件
   *********************************************/
   Ext.grid.RowExpander = function(config){
      Ext.apply(this, config);

      this.addEvents({
         beforeexpand : true,
         expand: true,
         beforecollapse: true,
         collapse: true
      });

      Ext.grid.RowExpander.superclass.constructor.call(this);

      if(this.tpl){
         if(typeof this.tpl == 'string'){
            this.tpl = new Ext.Template(this.tpl);
         }
         this.tpl.compile();
      }

      this.state = {};
      this.bodyContent = {};
   };

   Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
      header: "",
      width: 20,
      sortable: false,
      fixed:true,
      menuDisabled:true,
      dataIndex: '',
      id: 'expander',
      lazyRender : true,
      enableCaching: true,

      getRowClass : function(record, rowIndex, p, ds){
         p.cols = p.cols-1;
         var content = this.bodyContent[record.id];
         if(!content && !this.lazyRender){
            content = this.getBodyContent(record, rowIndex);
         }
         if(content){
            p.body = content;
         }
         return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
      },

      init : function(grid){
         this.grid = grid;

         var view = grid.getView();
         view.getRowClass = this.getRowClass.createDelegate(this);

         view.enableRowBody = true;

         grid.on('render', function(){
            view.mainBody.on('mousedown', this.onMouseDown, this);
         }, this);
      },

      getBodyContent : function(record, index){
         if(!this.enableCaching){
            return this.tpl.apply(record.data);
         }
         var content = this.bodyContent[record.id];
         if(!content){
            content = this.tpl.apply(record.data);
            this.bodyContent[record.id] = content;
         }
         return content;
      },

      onMouseDown : function(e, t){
         if(t.className == 'x-grid3-row-expander'){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            this.toggleRow(row);
         }
      },

      renderer : function(v, p, record){
         p.cellAttr = 'rowspan="2"';
         return '<div class="x-grid3-row-expander">&#160;</div>';
      },

      beforeExpand : function(record, body, rowIndex){
         if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
            if(this.tpl && this.lazyRender){
               body.innerHTML = this.getBodyContent(record, rowIndex);
            }
            return true;
         }else{
            return false;
         }
      },

      toggleRow : function(row){
         if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
         }
         this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
      },

      expandRow : function(row){
         if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
         }
         var record = this.grid.store.getAt(row.rowIndex);
         var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
         if(this.beforeExpand(record, body, row.rowIndex)){
            this.state[record.id] = true;
            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
            this.fireEvent('expand', this, record, body, row.rowIndex);
         }
      },

      collapseRow : function(row){
         if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
         }
         var record = this.grid.store.getAt(row.rowIndex);
         var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
         if(this.fireEvent('beforcollapse', this, record, body, row.rowIndex) !== false){
            this.state[record.id] = false;
            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.fireEvent('collapse', this, record, body, row.rowIndex);
         }
      }
   });
/////////////////////
    expander = new Ext.grid.RowExpander({
        tpl : new Ext.Template(
            '<br>&nbsp;&nbsp;<b>游戏权限:</b> {games}<br><br>',
            '&nbsp;<b>下属人员:</b> {users}<br><br>'
        )
    });

    grid = makeGrid();
    grid.addListener("rowdblclick", actionEditEvent);
   var viewport = new Ext.Viewport({
        layout:'border',
        items:[grid]
      });

   ds.load({params:{start:0, limit:50}});
});