`
83026191
  • 浏览: 45781 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs组建化编程(EditorGridPanel)

阅读更多

// JavaScript Document
//EditorGridPanel实现单元格选中
MoneyGrildPanel=Ext.extend(Ext.grid.EditorGridPanel,{
   typeCnb:null,
  
   inserted:[],
   //定义conn对象
   conn:new Ext.data.Connection(),
  
      constructor:function(){
    this.typeCnb= new Ext.form.ComboBox({
                                 triggerAction:'all',
               mode:"local",
         value:"全部",
               displayField:"type",
         listeners:{
          select:{
               fn:this.onViewTypeSelect,
            scope:this
          }
         },
               store:new Ext.data.SimpleStore({
                    data:["收入","支出","全部"],
                 expandData:true,
                          fields:["type"]
                    })
                                 });
   
  MoneyGrildPanel.superclass.constructor.call(this,{
       renderTo:Ext.getBody(),
    width:300,
    //给表格设置行选中
    sm:new Ext.grid.RowSelectionModel({
      //确定单选
      singleSelect:true 
    }),
    height:400,
    tbar:[{text:"保存",
          handler:this.onSaveButtonClick,
       scope:this
       },"-",{
      text:"添加",
          handler:this.onInsertButtonClick,
       scope:this 
       },"-",{
       text:"删除",
          handler:this.onRemoveButtonClick,
       scope:this  
      },"-","查看方式",this.typeCnb],
    store:new Ext.data.SimpleStore({
       autoLoad:true,
       url:"http://localhost/ExtJSTest/server/app/test/18/list.asp",
       fields:["id","type",{name:"money",type:"int"}]
    }) ,
    columns:[{
       header:"类型",
       dataIndex:"type",
       editor: new Ext.form.ComboBox({
                        triggerAction: 'all',
      mode:"local",
      displayField:"type",
      store:new Ext.data.SimpleStore({
          data:["收入","支出"],
       expandData:true,
                fields:["type"]
      })
                    })
     },{
       header:"金额",
       dataIndex:"money",
       editor:new Ext.form.NumberField({
           maxValue:10000,
        minValue:1
       })
       }]
    });
    /* 测试 conn等同于Ext.Ajax*/
    /*
   Ext.Ajax.on("requestcomplete", function(_conn,_response,_options){
                                          //_response.responseText 获取json数据
            //_response.responseXML.xml 回去xml的数据
                                         alert(_response.responseText);
              });
    */
   },

   //select 的时候触发事件
   onViewTypeSelect:function(_combo){
    var _type=_combo.getValue();
    if(_type == "全部")
      //_type== 全部 就把全部的信息显示给用户
         this.getStore().clearFilter();
   
    else
   // alert('sss');
    //fitler 方法会过滤Store中相同的值显示给用户
    this.getStore().filter("type",_combo.getValue());
      // alert(_combo.getValue());
   },
   onSaveButtonClick:function(){
  //modified 保存了 Store 中被修改的行
  var _n=this.getStore().modified;
  
  var _temp=[];
  
  for(var _i=0 ;_i<_n.length;_i++)
  {
     if(_n.get("id")=="")
     {
      continue;
     }
     var _data={};
    
     var _j="";
    
     for(_j in _n[_i].modified)
        _data[_j]=_n[_i].get(_j);
     //_n[_i].modified(修改过的值)把修改过的值放在_temp里
     //Ext.apply({},_n[_i].modified) 把修改的值复制下
     //{id:_n[_i].get("id")} 获取数据库的id值
     //Ext.apply(Ext.apply({},_n[_i].modified),{id:_n[_i].get("id")}) 早把id也复制进去
     //_temp.push(Ext.apply(Ext.apply({},_n[_i].modified),{id:_n[_i].get("id")}));//获取没该的值
     _temp.push(Ext.apply(_data,{id:_n[_i].get("id")}));
     }
  
  for(var _i=0;I<this.inserted.length;_i++)
  {
   //把添加的值给_temp
     _temp.push(this.inserted[_i].data);
    // alert(Ext.util.JSON.encode(_temp));

    
     }
  /* conn等同于Ext.Ajax*///任何Ajax请求发送之前触发
     conn.on("requestcomplete",this.onSaveInsertData,this);
  //提交到数据库 conn等同于Ext.Ajax
  conn.request({url:"http://localhost/ExtJSTest/server/app/test/18/post.asp",
       params:{content:Ext.util.JSON.encode(_temp)}});
  alert(Ext.util.JSON.encode(_temp));
  //var _store=this.getStore();
  //commitChanges回去把修改过的信息进行保存
  this.getStore().commitChanges(); 
  this.onViewTypeSelect(this.typeCnb);
   },
   //添加行
   onInsertButtonClick:function(){
    //添加行初始值
    var _rs=new Ext.data.Record({
         id:"",
         type:"",
         money:0
          });
   
    this.getStore().add(_rs);
    //添加行的时候提示用户保存
    _rs.set("type","收入");
    _rs.set("money",1);
     //指定输入地方  this.getStore().getCount-1 表示表单最后一行
    this.startEditing(this.getStore().getCount-1,0);
    //把——rs的Record放到inserted中
    this.inserted.push(_rs);
   },
  
   //能确保新添加的行也能修改
   onSaveInsertData:function(_conn,response){
    //添加的_xml信息
    var _xml=_response.responseXML;
    //alert(_xml);
    var _root=_xml.documentElement;
    //alert(_root);
    for(var _i=0;_i<_root.childNodes.length;i++)
    {
    // alert(_root.childNodes[_i].getText());
     this.inserted[_i].set("id",_root.childNodes[_i].text);
    }
    //提交
    this.getStore().commitChanges();
   
    this.inserted[];
   },
   //删除
   onRemoveButtonClick:function()
   {
    //获取选中的行
   var _sm=this.getSelectionModel();
   try{
         if(_sm.getCount() == 0)
         {
         throw Error("尚未选定行");
         }
      Ext.Msg.confirm("系统询问","你是否确认删除此记录?",this.onRemoveQuestion,this)
        
    }catch(_err){
       Ext.msg.alert("系统提示",_err.description)
    }
   },
   //删除
   onRemoveQuestion:function(_btn){
     if(_btn=="yes"){
      var _rs=this.getSelectionModel().getSelected();
      //删除
     this.getStore().remove(_rs);
       if(_rs.get("id") != ""){
          this.conn.request({url:"http://localhost/ExtJSTest/server/app/test/18/delete.asp",params:{id:_rs.get("id")}});
       /* conn等同于Ext.Ajax*///任何Ajax请求发送之前触发
           conn.on("requestcomplete",this.onSaveInsertData,this);
    }
    else{
    //用户在没有点击保存的情况下删除
          this.inserted.remove(_rs);
    this.getStore().modifed.remove(_rs);
    }
     }
   }
});

分享到:
评论

相关推荐

    Extjs可编辑的EditorGridPanel

    NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629

    extJS 可视化编程工具破解版

    在标题中提到的“可视化编程工具”,指的是用于简化ExtJS开发过程的一种图形化工具,这种工具允许开发者通过拖拽和配置组件来创建应用的界面,从而提高开发效率。 描述中提到了“extJS汉化中文版”,这表明这个工具...

    EXTjs图开编程EXTJS

    EXTJS的图形组件不仅适用于数据可视化,还适合构建仪表盘和报告,为企业决策提供直观的数据支持。它们可以与其他EXTJS组件(如表格、面板、窗口等)灵活组合,构建出功能完善的业务系统。 在实际开发中,EXTJS的...

    extjs 高级编程

    extjs高级编程extjs高级编程extjs高级编程

    ExtJs可视化开发工具3.0

    ExtJs可视化开发工具3.0是一款专为提升开发效率而设计的工具,它极大地简化了ExtJS应用的创建过程,让开发者无需编写大量的JavaScript代码,就能构建出功能丰富的用户界面。这款工具的核心特性在于其直观的拖放界面...

    ExtJs可视化开发工具

    ExtJs可视化开发工具,或尽然拖放控件轻松实现页面布局,很好用

    extjs可视化设计器

    EXTJS可视化设计器是一款强大的前端开发工具,专门针对EXTJS框架设计,它允许开发者通过图形化界面来构建应用程序,显著提高了开发效率。EXTJS是一个流行的JavaScript库,用于创建数据驱动的富客户端Web应用,其组件...

    extjs组建继承结构图

    extjs组建继承结构图 让你了解extjs的整个架构!

    ExtJs可视化工具(汉化)

    "ExtJs可视化工具(汉化)"指的是专为ExtJs设计的一种图形化开发工具,它使得开发者可以通过拖拽和配置的方式创建用户界面,大大提升了开发效率。 在描述中提到的“汉化包”意味着这个工具已经进行了本地化处理,...

    ExtJs可视化工具

    ExtJs 推出了ExtJs 可视化开发工具,这里是所需的三个文件:AdobeAIRInstaller.zip,Ext_Disigner_Preview.rar,xds_preview.air。请按说明文档一次安装

    Extjs 可视化开发工具(中文)

    ExtJS的可视化开发工具,如标题所提及的“Extjs 可视化开发工具(中文)”,是为方便开发者快速设计和布局UI而设计的。 这个开发工具包含两个主要的文件,即`xds_preview.air`和`Ext_Designer_Preview.rar`。`xds_...

    extjs可视化开发工具

    extjs可视化开发工具,希望可以帮助大家

    EXTJS可视化网页编译器

    EXTJS可视化网页编译器是EXTJS框架的一个重要工具,它允许开发者通过直观的图形界面来设计和编译EXTJS应用,极大地简化了开发流程。 EXTJS编译器的核心特性包括: 1. **可视化设计**:该编译器提供了拖放功能,...

    extjs可视化开发软件

    在“extjs可视化开发软件”中,我们可以推测这是一款专门针对EXTJS的开发工具,它可能提供了图形化的界面来辅助开发者进行EXTJS应用的构建。这样的工具通常会简化代码编写过程,通过拖放组件、设置属性等方式实现...

    extjs 可视化设计器 汉化版

    EXTJS可视化设计器是一款强大的前端开发工具,专为创建基于EXTJS框架的应用程序提供了一个直观的图形界面。汉化版使得中国开发者能够更加便捷地使用这款工具,无需应对语言障碍,从而提高开发效率和理解度。 EXTJS...

    ExtJs的图形化

    在图形化开发环境中,利用合适的工具可以极大地提高开发效率,这就是Eclipse的ExtJS图形化开发插件的作用。 Eclipse是广受欢迎的Java IDE,它支持多种语言和框架的开发,包括ExtJS。这款插件为开发者提供了图形化的...

    ExtJS 可视化设计器

    "ExtJS 可视化设计器"则是针对这个框架设计的一款工具,帮助开发者通过图形化界面来设计和构建ExtJS应用,从而减少了编写代码的工作量,提高了开发效率。 这款可视化设计器包含以下几个核心知识点: 1. **组件拖放...

    Extjs自动最大化panel

    在EXTJS中,"Extjs自动最大化panel"是一种高级布局技术,它允许用户创建一个能够自动适应并填充其容器的面板(Panel)。这种特性对于构建响应式和自适应的用户界面至关重要,尤其在现代Web应用中,用户期望界面能够...

    CooliteToolkit(ExtJS可视化控件)Demo

    CooliteToolkit(ExtJS可视化控件)Demo ExtJS JavaScript Framework and asp.net ajax Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件,Coolite Toolkit非常适合做web应用程序的开发,它提供了很多专业的Asp.net...

    Extjs EditorGridPanel中ComboBox列的显示问题

    在EXTJS中,EditorGridPanel是一种可编辑的表格组件,它允许用户直接在表格单元格内编辑数据。然而,当在EditorGridPanel中嵌入ComboBox(下拉选择框)作为编辑器时,可能会遇到一个问题,即ComboBox显示的不是其...

Global site tag (gtag.js) - Google Analytics