ext构造自己的组件

/**
* @title:新闻中心模块
* @author:余晓天
* @date:2009/2/13
*/
/**初始化FormPanel***************************************************************************************************/
NewsFormPanel=Ext.extend(Ext.FormPanel,{
   //传参
url:null,
    constructor:function(_cfg){
        if(_cfg==null)
         _cfg={};
        Ext.apply(this,_cfg);
        //初始化构造函数
        NewsFormPanel.superclass.constructor.call(this,{
           width:250,
           height:210,
           frame:true,
           resizable:false,
           layout:"form",
           labelWidth:60,
           buttonAlign:"center",
           defaultType:"textfield",
           baseCls:"x-plain",
           items:[
            {
             name:"name",
             fieldLabel:"姓名",
             anchor:"90%",
             allowBlank:false,
             emptyText:"姓名不能为空"
            },
            {
             xtype:"combo",
             mode:"local",
             value:"男",
             hiddenName:"sex",
             triggerAction:"all",
             displayField:"sex",
             readOnly:true,
             store:new Ext.data.SimpleStore(
               {
                fields:["sex"],
                data:[["男"],["女"]]
               }
               ),
             name:"sex",
             fieldLabel:"性别",
             anchor:"90%"
            },
            {
             name:"age",
             fieldLabel:"年龄",
             anchor:"90%",
             vtype:"age",
             allowBlank:false
            },
            {
             name:"pwd",
             inputType:"password",
             fieldLabel:"密码",
             allowBlank:false,
             anchor:"90%"
            },
            {
             xtype:"datefield",
             readOnly:true,
             name:"time",
             fieldLabel:"注册时间",
             anchor:"90%",
             allowBlank:false,
             format:"Y-m-d"
            }
           ]
          })
      this.addEvents("submit");
       },
     //按钮事件提交方法
     submit:function(_params){
      if(_params==null)
       _params={};
      if(this.url!=null)
       this.getForm().submit({url:this.url,params:_params,success:this.onSubmit,waitTitle:"数据传送",waitMsg:"数据传送中．．．",scope:this});
     },
     //得到form列表值方法
     getValues:function(){
      return new Ext.data.Record(this.getForm().getValues());
     },
     //设置form列表值方法
     setValues:function(_rs){
      this.getForm().loadRecord(_rs);
     }
     ,
     //清空form列表
     reset:function(){
      this.getForm().reset();
     },
     //提交事件触发定义
     onSubmit:function(_form,_action)
     {
      this.fireEvent("submit",this,_action);
     }
    });
/**初始化window*******************************************************************************************************/
NewsWindow=Ext.extend(Ext.Window,{
form:null,
url:"",
//初始化参数
constructor:function(_cfg){
      if(_cfg==null)
       _cfg={};
      Ext.apply(this,_cfg);
      //添加form
      this.form=new NewsFormPanel({url:this.url});
      NewsWindow.superclass.constructor.call(this,{
         width:250,
         height:230,
         plain:true,
         modal:true,
         resizable:false,
         buttonAlign:"center",
         items:this.form,
         bodyStyle:"padding:3px",
         closeAction:"hide",
         buttons:[{
          text:"确 定",
          handler:function(){
             this.OnSubmit();
            },
          scope:this
         },{
          text:"取 消",
          handler:function(){
           this.OnExitClick();
          },
          scope:this
         }]
        }
      );
     this.addEvents("submit");
     this.form.on("submit",this.OnSubmitClick,this);
     },
   //获取内置form提交事件
   OnSubmit:function()
   {
    this.form.submit();
   },
   //触发内置form提交事件
   OnSubmitClick:function(_form,_action)
   {
    this.fireEvent("submit",this,_action);
    this.close();
   },
   //关闭当前window事件
   OnExitClick:function()
   {
    this.close();
   },
   //关闭当前window方法
   close:function(){
    this.form.reset();
    this.hide();
   }
    
});
/**初始化增加对话window********************************************************************************************/
NewsInsertGridWin=Ext.extend(NewsWindow,{
       title:"增加新闻",
      url:"../dboperition/add.aspx"
      });
/**初始化修改对话window********************************************************************************************/
NewsUpdateGridWin=Ext.extend(NewsWindow,{
       title:"修改新闻",
       params:"",
      url:"../dboperition/update.aspx",
       load:function(_rs)
        {
         var srecord=_rs;
         this.form.setValues(srecord);
         this.params=_rs.get("id");
        },
       OnSubmit:function()
       {
        this.form.submit({id:this.params});
       }
      });
/**********************************************************************************************/
/**初始化gridpanel***************************************************************************************************/
NewsGridPanel=Ext.extend(Ext.grid.GridPanel,{
   //增加window初始化
   insertwin:new NewsInsertGridWin(),
   //修改window初始化
   updatewin:new NewsUpdateGridWin(),
   //数据读取
   store:new Ext.data.Store({
           url: "NewsData.aspx",
           reader: new Ext.data.JsonReader({
            root:"data",
            totalProperty:"pagescount"
           },
           [
           {name:"id",type:"int"},
           {name:"moduleName"},
           {name:"channelName"},
           {name:"title"},
           {name:"releaseTime"},
           {name:"releaseMan"}])
          }),
   //初始化参数
   constructor:function(){
    //参数初始化
    NewsGridPanel.superclass.constructor.call(this,{
          id:"newspanel",
          frame:true,
          anchor:"100%",
          renderTo:Ext.getBody(),
          height:300,
          bodyStyle:'width:100%',
          iconCls:"icon-grid",
          loadMask:{msg:"数据载入中...."},
          tbar:[{text:"增加",
            tooltip:"新增",
            iconCls:"addicon",
            handler:function(){
               this.insertwin.show();
              },
            scope:this
            },"-"
            /*{text:"修改",
            tooltip:"修改",
            iconCls:"option",
            handler:function(){
              this.updatewin.show();
              try
              {
              
               this.updatewin.load(this.getSelected());
              }
              catch(err){Ext.Msg.alert
              (
               "系统提示",err.description
              );
               this.updatewin.close();
              };
            },
            scope:this
            },"-",
            {text:"删除",
            tooltip:"删除",
            iconCls:"remove",
            handler:function(){
              try
              {this.getSelected();
              Ext.Msg.confirm("系统提示","你确认删除这条记录吗?",this.onRemove,this);
              }
              catch(err){Ext.Msg.alert("系统提示",err.description)};
             },
            scope:this
            },"-"*/
            ],
          columns:[
             {header:"序号",width:80,dataIndex:"id",sortable:true,align:"center"},
             {header:"模块名称",dataIndex:"moduleName",sortable:true,align:"center"},
             {header:"频道名称",width:120,dataIndex:"channelName",sortable:true,align:"center"},
             {header:"标题",width:200,dataIndex:"title",sortable:true,align:"center"},
             {header:"发布时间",width:150,dataIndex:"releaseTime",sortable:true,align:"center"},
             {header:"发布人",dataIndex:"releaseMan",sortable:true,align:"center"},
             {header:"修改",width:60,dataIndex:"id",renderer:this.UpdateRender,align:"center"},
             {header:"删除",width:60,dataIndex:"id",renderer:this.DelRender,align:"center"}
          ],
          sm:new Ext.grid.RowSelectionModel({
                singleSelect:true
                }),
          store:this.store,
          bbar:new Ext.PagingToolbar({
           pageSize:5,
           store:this.store,
           displayInfo:true,
           displayMsg:"当前显示{0}-{1}条记录/共{2}条记录",
           emptyMsg:"无数据可显示!"
          })
         });
      this.store.load({params:{start:0,limit:5}});
      this.insertwin.on("submit",this.onInsert,this);
      this.updatewin.on("submit",this.onUpdate,this);
   },
   //修改按钮呈现
   UpdateRender:function(value){
     return '<a id="newupdate" href="#)">修改</a>';
    }
   ,
   //删除按钮呈现
   DelRender:function(value){
     return '<a id="newdel" href="#">删除</a>';
    }
   ,
   //删除记录
   del:function(){
    try
    {
     var _sel=this.getSelected();
     Ext.Ajax.request({
     url:"../dboperition/del.aspx",
      params:{id:_sel.get("id")},
      success:function(_rs,_op)
       {
        var result=Ext.util.JSON.decode(_rs.responseText);
        if(result.success==false)
         Ext.Msg.alert("系统信息","删除失败!")
       }
     });
     this.getStore().remove(_sel);
     this.getStore().reload();
    }catch(err)
    {
     Ext.Msg.alert("系统信息","你尚未选择一条记录!")
    }
   },
   /*getSelected:function(){
    if(this.getSelectionModel().getCount()==0)
    {
     throw Error("你尚未选择一条记录!")
    }
    else
     return this.getSelectionModel().getSelected();
   },*/
   //增加事件
   onInsert:function(_win,_rs)
   {
    this.store.reload();;
   },
   //修改事件
   onUpdate:function(_win,_rs)
   {
    this.store.reload();
   },
   //删除事件
   onRemove:function(_btn)
   {
    if(_btn=="yes")
     this.del();
   }
})