`
cyril_von
  • 浏览: 3650 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

Extjs4MVC 树不加载,还有怎么实现grid添加和修改通过弹出form来完成支持回车,要是能完成Excel导入导出就更好了

阅读更多
Ext.define('AM.controller.JokeController',{
extend:'Ext.app.Controller',
GridDoActionUtil:Ext.create('AM.util.GridDoActionUtils'),
init:function(){
this.getGridObj=function(button){
return button.ownerCt.ownerCt;
}
this.getTreeObj=function(button){
return button.ownerCt.ownerCt.ownerCt.ownerCt.child('#west-tree').child('#joke-tree');
}
this.getJokeEditObj = function(button){
return button.ownerCt.child('#joke-edit');

}
this.control({
'jokedit button[id=save]':{
click:function(addButton){
alert(this.getJokeEditObj);
// formBind: true,
//         disabled: true,
//         handler: function() {
//    var fform = this.up('window').down('form').getForm();
//    console.info(fform);
//             if (fform.isValid()) {
//             alert('1');
//                 fform.submit({
//                 url:'AppJoke/addUpdateJoke!addOrUpdate',
//                     success: function(fform, action) {
//                        Ext.Msg.alert('Success', action.result.msg);
//                     },
//                     failure: function(fform, action) {
//                         Ext.Msg.alert('Failed', action.result.msg);
//                     }
//                 });
//             }
//         }
}

},
'jokeTree':{
itemclick:function(tree,record,item,index,e,options){
var view= Ext.get('joke-view');
//var store = view.getStore();
this.GridDoActionUtil.changeTab(view,record);
}
},
"winimportview button[id=upload]":{
     click: function(sm, selections,a,c){      
      var form=Ext.getCmp("formimport");               
      if (form.getForm().isValid()) {
        //重置信息提示框
       Ext.getCmp("resultmsg").body.update("正在导入数据,请稍候...");
       form.getForm().submit({
                       url:  Qas.getAppName() + '',
                       method : 'POST',                                           
                       waitTitle:'请等待...',
                       waitMsg: '正在上传Excel文件,分析导入数据,请稍候...',                   
                       success : function(form,action) {                  
                        console.log("ServerJson="+action.response.responseText);
                        Ext.getCmp("resultmsg").body.update(action.result.msg);                                                                                                       
           },
           failure : function(form, action){//500内部错误
            console.log("ServerJson="+action.response.responseText);
                        Ext.getCmp("resultmsg").body.update(action.result.msg);                  
        }
         });
       }                    
     }
},
'jokelist button[id=import]':{
click:function(importButton){
var importWin = Ext.create("AM.view.WinImportView");
importWin.show();
}

},
'jokelist button[id=delete]':{
click:function(deleteButton){
var grid=this.getGridObj(deleteButton);
this.GridDoActionUtil.doDelete(grid);
}

},
'jokelist button[id=save]':{
click:function(saveButton){
var grid=this.getGridObj(saveButton);
this.GridDoActionUtil.doSave(grid);
}
},
'jokelist button[id=add]':{
click:function(addButton){
//var addWin=Ext.getCmp('joke-edit');
var win = Ext.create("AM.view.JokeEdit");
win.show();
}
}//,

//设定列表添加按钮事件

// 'jokelist button[id=add]':{
// click:function(addButton){
//
// var grid=this.getGridObj(addButton);
// var modelObj={
// id:'',
// joke:'',
// type:'',
// createTime:''
// }
// this.GridDoActionUtil.doInsert(grid,modelObj);
//
// }
// }
});
},
views:[
'MainLayout',
'JokeList',
'JokeTree',
'JokeEdit'
],
stores:[
'JokeStore4Tree',
'JokeStore'
],
models:[
'JokeModel'
]
})

Ext.define('AM.model.JokeModel',{
extend:'Ext.data.Model',
fields:[
{name:'id',type:'int'},
{name:'joke',type:'string'},
{name:'type',type:'int'},
{name:'createTime'}
],
validations:[
{type:'presence',field:'joke',
presenceMessage:'内容不能为空'},
{type:'presence',field:'type',
presenceMessage:'类型不能为空'}
]

});

Ext.define('AM.model.JokeModel4Tree',{
extend:'Ext.data.Model',
fields:[
{name:'id',type:'auto'},
{name:'menuBean',type:'auto'},
{name:'text',type:'auto'},
{name:'cls',type:'auto'},
{name:'leaf',type:'auto'},
{name:'type',type:'auto'},
{name:'children',type:'auto'}
]
});


/**
* ClassName:部门实体数据集 
*/
Ext.define('AM.store.JokeStore',{
extend:'Ext.data.Store',
model:'AM.model.JokeModel',
pageSize:25,
proxy:{
api:{
update:'AppJoke/joke!saveOrUpdate',
remove:'AppJoke/joke!delete'
},
type:'ajax',
url:'xxxx/xxxx!list',
reader:{
type:'json',
root:'root',
totalProperty:'total'

},
writer:{
type:'json'
}
},
autoLoad:true

})

Ext.define('AM.store.JokeStore4Tree',{
extend:'Ext.data.TreeStore',
defaultRootId:'root',
proxy:{
type:'ajax',
url:'xxx/xxxxx!list',
reader:'json'

}
})

Ext.QuickTips.init();
Ext.define('AM.view.JokeEdit', {
extend: 'Ext.window.Window',
    alias : 'widget.jokedit',
title : '笑话添加编辑',
layout: 'fit',
id:'joke-edit',
    autoShow: true,
    modal:true,
    frame:false,
    border : false,
bodyBorder : false,
initComponent: function() {
var states = Ext.create('Ext.data.Store', {
    fields: ['type', 'name'],
    data : [
        {"type":0, "name":"xxxxx"},
        {"type":1, "name":"xxxxxxx"},
        {"type":2, "name":"xxxxx"},
        {"type":3, "name":"xxxxx"}
    ]
});
        this.items = [{
                xtype:'form',
                url:'Pmjoke/AppJoke/addUpdateJoke!addOrUpdate',
                defaults:{
               margin:'2 2 2 10',
                labelSeparator :':',//分隔符
                labelWidth : 70,//标签宽度
                //width : 150,//字段宽度
                allowBlank : false,
                blankText : '不允许为空',
                labelAlign : 'right',
                msgTarget :'qtip'         
           },
                items:[{
                        xtype: 'textfield',
                        name :'id',
                        fieldLabel: '序号',
                        hidden:true
                    },{
                        xtype: 'textarea',
                        width:350,
                        height:200,
                        name :'joke',
                        fieldLabel: 'xx'
                    },{
                        xtype: 'comboBox',
                        name : 'type',
                        fieldLabel: 'xx类型',
                        editor:{
xtype:'combobox',
store:states,
displayField:'name',
         valueField:'type',
listeners:{
select:function(combo,record,index){
isEdit = true;
}
}
}
                 },{
                    xtype: 'datefield',
                    name : 'createTime',
                    fieldLabel: '创建时间',
                    hidden:true
                 }]
          }];
        this.buttons = [{
            text: '保存',
            //action: 'save'
            formBind: true,
        //disabled: true,
        handler: function() {
   var fform = this.up('form').getForm();
   console.info(fform);
            if (fform.isValid()) {
            alert('1');
                fform.submit({
                url:'Pmjoke/AppJoke/addUpdateJoke!addOrUpdate',
                    success: function(fform, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(fform, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
         },{
            text: '取消',
            scope: this,
            handler: this.close
       }];
        this.callParent(arguments);
    }
});

/**
* 笑话管理列表实体
*/
Ext.define('AM.view.JokeList',{
extend:'Ext.grid.Panel',
alias:'widget.jokelist',
store:'JokeStore',
id:'joke-view',
// width:550,
// height:500,
forceFit:true,
selModel:{
selType:'checkboxmodel'
},
border:0,
multiSelect:true,
frame:true,
tbar:[
{xtype:'button',text:'添加',id:'add',iconCls:'table_add'},
{xtype:'button',text:'删除',id:'delete',iconCls:'table_remove'},
{xtype:'button',text:'保存',id:'save',iconCls:'table_save'},
{xtype:'button',text:'导入',id:'import',iconCls:'table_import'},
{xtype:'button',text:'导出',id:'export',iconCls:'table_export'}
],
dockedItems:[{
xtype:'pagingtoolbar',
store:'JokeStore',
dock:'bottom',
displayInfo:true
}],
initComponent:function(){

this.editing = Ext.create('Ext.grid.plugin.CellEditing');
this.plugins=[this.editing];
this.callParent(arguments);
},
states:Ext.create('Ext.data.Store', {
    fields: ['type', 'name'],
    data : [
        {"type":0, "name":"普通xx"},
        {"type":1, "name":"xx"},
        {"type":2, "name":"成人xx"},
        {"type":3, "name":"x事"}
    ]
}),
enableKeyNav:true,
columnLines:true,
columns:[
{text:'编号',dataIndex:'id',width:50,
hidden:true
},
{text:'xx',dataIndex:'joke',width:700,
field:{
xtype:'textfield',
allowBlank:false
}
},
{text:'类型',dataIndex:'type',width:100,
editor:{
xtype:'combobox',
store:this.states,
displayField:'name',
     valueField:'type',
listeners:{
select:function(combo,record,index){
isEdit = true;
}
}
}

},

{text:'创建时间',dataIndex:'createTime',width:150,xtype : 'datecolumn',
format:'Y年m月d日'
}
]

})

Ext.define('AM.view.JokeTree',{
extend:'Ext.tree.Panel',
alias:'widget.jokeTree',
rootVisible:true,//不展示根
displayField:'text',
title:'xx导航',
animate:false,
id:'tree-store',
store:'JokeStore4Tree'
})


Ext.define('AM.view.MainLayout',{
extend:'Ext.panel.Panel',
alias:'widget.mainlayout',
defaults:{
split:true,
bodyStyle:'padding:1px'
},
layout:'border',
resizable:true,
items:[{
title:'xx树形',
region:'west',
//iconCls:'joke-tree',
xtype:'treepanel',
margins:'5 2 5 5',
width:200,
collapsible:true,
id:'west-tree',
layout:'fit',
items:[{
title:'xx导航',
xtype:'jokeTree',
id:'joke-tree'

}]
},{
title:'数据表格',
region:'center',
//iconCls:'joke-table',
xtype:'panel',
//width:.85,
id:'center-grid',
margins:'5 5 5 0',
layout:'fit',

items:[{
title:'xx管理',
id:'joke-grid',
xtype:'jokelist'
}]

}]


})

Ext.require(['Ext.form.field.File']);
Ext.define('AM.view.WinImportView', {
extend : 'Ext.window.Window',
alias : 'widget.winimportview',
// width : 450,
// height : 260,
layout : 'fit',
resizable : true,
frame : false,
modal : true,
border : false,
bodyBorder : false,
items : [{//items_win_begin
  border : false,
  bodyBorder : false,
  id:'formimport',
  xtype : 'form', 
  frame: true,
  fileUpload:true,
  layout: 'anchor',
     defaults: {
        anchor: '100%'
      },
  bodyPadding: 5,
  fieldDefaults: {
      labelAlign: 'right',         
      msgTarget : 'side'
  },
  items: [{//item_form_begin
   xtype: 'fieldset',
   collapsible: true,
   title: 'Excel导入',
   defaultType: 'textfield',
   layout: 'anchor',
      defaults: {
       anchor: '100%'
       },
   items: [{//item_fieldset1_begin
    xtype: 'container',
    layout : {
    type : 'table',//内部容器用表格风格排版
    columns : 1,
    bodyStyle : 'padding:0 0 0 0'
    },
    defaultType: 'textfield',          
    items: [{//item_container_begin
     xtype: 'filefield',
              name: 'file',
              fieldLabel: '请选择Excel文件',
              width:400,           
              allowBlank: false,                       
              buttonText: ' 浏 览 ',
              buttonConfig: {
                  //iconCls: 'upload-icon'
              } 
    }/*,{
    width:400,
    html:'<a href='+Pmjoke.getAppName() + '/template/Excel/ApImportTemplate.xls> 模板文件下载 </a>[提示:只有按照模板格式整理Excel表,才允许导入数据]'        
    }*/,{
     xtype:'panel',
     frame:true,
     autoScroll:true,   
     height:120,
     width:400,         
     name:'resultmsg',
     id:'resultmsg',
     html:''//在后台动态更改    
    }]//item_container_end 
  }]//item_fieldset1_end
}]//item_form_END
}],//items_win_end
dockedItems : [ {
  xtype : 'toolbar',
  dock : 'bottom',
  items : [ '->', {
   xtype : 'button',
   text : '导入Excel数据',
   iconCls : 'save',
   action: 'import',
   scale : 'small'
  },{
   xtype : 'button',
   text : '取消',
   iconCls : 'cancel',
   handler : function(m, e) {
    this.ownerCt.ownerCt.close();
   }
  }]
}]//dockedItems结束
});[b]
[/b][b][/b]
分享到:
评论

相关推荐

    extjs grid数据导出excel文件

    总结来说,EXTJS Grid的数据导出到Excel是通过获取Grid数据、转换数据格式、利用SheetJS创建Excel文件,并最终提供下载链接来实现的。这一过程涉及到了EXTJS的Store操作、SheetJS的API使用以及前端文件操作等技术。...

    EXTJS grid导出EXCEL文件

    4. **源码使用**:提到“源码可以直接导入MYECLIPSE使用”,这意味着提供的是一个实际的代码示例,你可以直接在MyEclipse(一个流行的Java集成开发环境)中打开并运行,以便学习和理解如何实现EXTJS Grid到Excel的...

    ExtJs grid导出Excel

    在ExtJs中,你可以通过以下步骤实现Grid数据导出到Excel: 1. 首先,你需要在项目中引入XLSX.js库。这可以通过CDN链接或者将库文件下载并放在项目的静态资源目录下。 2. 创建一个方法,该方法接收Grid的数据源作为...

    Extjs4 grid 导出为Excel

    Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 &lt;link href='...

    实现extjs4 的树、grid、form、query等大部分组件的功能

    EXTJS4的grid和tree都支持内置的查询功能,可以通过配置过滤器实现对数据的快速查找。同时,EXTJS的Store组件也提供了高级查询API,可以编写复杂的查询逻辑。 在实际应用中,EXTJS4的这些组件往往需要配合使用。...

    Extjs4前台前台grid导出excel

    在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页...

    extjs4MVC实现

    ExtJS4.0 MVC 实现详解 ...通过理解并熟练运用 MVC 架构模式,我们可以创建出具有高效数据管理、灵活用户交互和易于维护的 ExtJS 应用程序。学习和掌握这些知识,对于提升你的前端开发技能具有重要意义。

    extjs 导入导出 Exel

    总结,EXTJS 导入导出Excel 功能涉及前后端的协作,通常需要服务器端支持,但也有一些库提供了纯前端的解决方案。了解这些方法可以帮助开发者根据项目需求选择合适的方式来实现数据与Excel 的交互。

    extjs4导出excel

    "extjs4导出excel"的功能就是实现了这个需求,让用户能够在ExtJS 4应用中方便地导出表格数据到Excel文件。 在ExtJS 4中实现数据导出至Excel通常涉及以下几个关键步骤: 1. **数据收集**:首先,你需要收集要导出的...

    ExtJS实现Excel导出

    ### ExtJS实现Excel导出:深入解析与实践 在当今高度数字化的工作环境中,数据的管理和呈现方式至关重要。其中,Excel作为数据处理和分析的重要工具,其导出功能在各种应用场景中显得尤为关键。ExtJS,作为一种强大...

    EXTJS4导出excel示例

    在EXTJS4中,实现导出数据到Excel的功能是一项常见的需求,这可以帮助用户方便地处理和存储大量数据。本示例将详细介绍EXTJS4如何实现Excel导出,并提供相关的代码示例。 EXTJS4的核心是其组件模型,包括表格(Grid...

    ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)

    总的来说,这个插件提供了一种方便的方式来将ExtJS Grid的数据导出到Excel,对于那些需要与Excel交互或者需要提供数据导出功能的应用程序来说,是非常有价值的。通过深入学习和理解相关知识点,开发人员可以更好地...

    EXTJS Grid导出Excel

    在EXTJS Grid中导出数据到Excel是一种常见的需求,它允许用户方便地处理和分析大量数据。EXTJS是一个强大的JavaScript库,专门用于构建富客户端Web应用程序,而Grid组件是其核心部分,用于展示和管理表格数据。在...

    extJS4 MVC demo项目入门

    extJS4 MVC demo项目入门涉及的是前端开发领域的技术要点,主要介绍了extJS4框架中的MVC(Model-View-Controller)模式在实际开发项目中的应用方法,并着重讲述了如何实现前端资源的按需加载和动态加载。在了解这些...

    Extjs4 MVC小实例

    MVC(Model-View-Controller)架构模式是ExtJS 4中一个核心的设计原则,它有助于实现应用的模块化和可维护性。这个“Extjs4 MVC小实例”很可能是为了展示如何在实际项目中有效地运用MVC模式。 **模型(Model)** 在...

    ExtJS拖拽导入Excel数据

    用户可以从excel中选中要导入的数据,直接拖拽到grid中

    extjs实现excel导出

    在本文中,我们将深入探讨如何使用ExtJS框架结合Apache POI库来实现Excel导出功能。首先,让我们了解一些基本概念。 **ExtJS框架** ExtJS是一个强大的JavaScript库,专门用于构建富客户端应用程序。它提供了丰富的...

    ExtJS实现Excel的导出功能(poi)

    在本文中,我们将探讨如何使用ExtJS框架配合Apache POI库来实现Excel的导出功能。ExtJS是一个强大的JavaScript库,专门用于构建富客户端应用程序,它提供了丰富的组件和功能,而无需关注后端技术。Apache POI是Java...

    Ext Grid 导出Excel

    总结来说,"Ext Grid 导出Excel"这个话题涵盖了从JavaScript数据结构到Excel文件格式转换的过程,涉及到的主要技术有Ext JS的Grid和Store组件,以及第三方库SheetJS。这个过程对于那些需要提供数据导出功能的Web应用...

    extjs4Mvc事例

    ExtJS 4 MVC是一个强大的JavaScript框架,用于构建富客户端应用程序。这个"extjs4Mvc"事例提供了关于如何在ExtJS 4中有效地利用MVC(Model-View-Controller)设计模式的详细教程。MVC模式是软件工程中常用的设计模式...

Global site tag (gtag.js) - Google Analytics