用Ext做的后台操作(包括,增,删,改,查)和一个异步加载的Ext树(1)(转)

最新推荐文章于 2022-08-06 15:53:10 发布
最新推荐文章于 2022-08-06 15:53:10 发布
阅读量965 收藏 1
点赞数
文章标签： ext function url stylesheet header layout

最近刚做了Ext的后台操作，我也是刚接触Ext有好多都是边学边做,所以把部分代码写下来,希望能够方便大家，方便自己... 
 
//导包的地方就不多说了 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>电子书列表</title> 
<link rel="stylesheet" type="text/css" 
    href="/js/ext/resources/css/ext-all.css" /> 
<link rel="stylesheet" type="text/css" 
    href="/js/ext/MultiselectItemSelector-3.0/Multiselect.css" /> 
<script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="/js/ext/ext-all-debug.js"></script> 
<script type="text/javascript" 
    src="/js/ext/MultiselectItemSelector-3.0/Multiselect.js"></script> 
<script type="text/javascript" 
    src="/js/ext/app/book/InOutManageWindow.js"></script> 
<script type="text/javascript" 
    src="/js/ext/MultiselectItemSelector-3.0/DDView.js"></script> 
<script type="text/javascript" 
    src="/js/ext/UploadDialog/Ext.ux.UploadDialog.packed.js"></script> 
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '/js/ext/app/img/s.gif'; 
</script> 
</head> 
<body> 
 
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '/js/ext/app/img/s.gif'; 
</script> 
<script type="text/javascript" src="/js/ext/app/book/createBook.js"></script> 
<script type="text/javascript"> 
//ds是从服务器端拿到的一些JSON的数据 
var ds = new Ext.data.Store({ 
    proxy : new Ext.data.HttpProxy({ 
        url : '/AdminBookList/' 
    }), 
    reader : new Ext.data.JsonReader({ 
        totalProperty : 'totalProperty', 
        root : 'bookList', 
        fields : [{ 
            name : 'bookID' 
        }, { 
            name : 'name' 
        }, { 
            name : 'author' 
        }, { 
            name : 'keyWord' 
        }, { 
            name : 'bookTypeIndex' 
        }, { 
            name : 'url' 
        }, { 
            name : 'bookFile' 
        },{ 
            name:'description' 
        }] 
    }) 
}); 
//分页读取的参数 
ds.load({ 
    params : { 
        start : 0, 
        limit : 20 
    } 
}); 
 
//点击列表时会异步的加载一个formPanle 
var sm = new Ext.grid.CheckboxSelectionModel({ 
    // var sm = new Ext.grid.RowSelectionModel({ 
    // singleSelect: true, 
    listeners : { 
        rowselect : function(sm, row, rec) { 
            var form = Ext.getCmp("book-form").getForm(); 
            form.loadRecord(rec); 
            form.findField("multiselect").setValue(rec.get("bookTypeIndex")); 
            var bookID = rec.get('bookID'); 
            addTree(bookID); 
            // t=addTree(bookID); 
 
        } 
 
    } 
}); 
 
//加载异步树 
function addTree(bookID) { 
    var ss = Ext.getCmp("sectionStructure1"); 
    if (ss) { 
        ss.destroy(); 
    } 
    var sectionStructure = new Ext.Panel({ 
        // columnWidth : 0.2, 
        // xtype:'panel', 
        title : '结构', 
        // renderTo:'sectionStructure', 
        layout : 'fit', 
        autoHeight : true, 
        border : false 
 
    }); 
//具体的把一本树展现成树形的结构,可以在枝，叶上做修改 
    var data = new Ext.tree.TreeLoader({ 
        url : '/tree/?bookID=' + bookID 
    }); 
    var root = new Ext.tree.AsyncTreeNode({ 
        text : '根', 
        draggable : false, 
        rootFlag : true 
    }); 
    var tree = new Ext.tree.TreePanel({ 
        id : 'sectionStructure1', 
        renderTo : 'sectionStructure', 
        width : 1000, 
        autoScroll : true, 
        useArrows : true, 
        animate : true, 
        containerScroll : true, 
        rootVisible : false, 
        root : root, 
        loader : data 
    }); 
 
    tree.on('dblclick', itemManage); 
 
    tree.on('contextmenu', outItemTreeContextMenu); 
 
    root.expand(true, true); 
} 
 
Ext.onReady(function() { 
    var bd = Ext.getBody(); 
 
    var cm = new Ext.grid.ColumnModel([sm, 
            // new Ext.grid.RowNumberer(), 
            { 
                header : 'ID', 
                width: 30, 
                dataIndex : 'bookID', 
                sortable : true, 
                editor : new Ext.form.TextField({ 
                    allowBlank : false 
                }) 
            }, { 
                header : '书名', 
                dataIndex : 'name' 
            }, { 
                header : '作者', 
                width: 80, 
                dataIndex : 'author' 
            }, { 
                header : '关键字', 
                width: 80, 
                dataIndex : 'keyWord' 
            }, { 
                header : '是否有文件', 
                dataIndex : 'bookFile' 
            },{ 
                header:'描述', 
                dataIndex: 'description' 
            }]); 
 
    var multiselect = new Ext.ux.Multiselect({ 
        id : "multiselect", 
        xtype : "multiselect", 
        fieldLabel : "类型", 
        name : "bookTypeID", 
        dataFields : ["bookTypeID", "name"], 
        store : dsBookType, 
        valueField : "bookTypeID", 
        displayField : "name", 
        width : 150, 
        height : 200, 
        allowBlank : false, 
        legend : "Multiselect", 
        tbar : [{ 
            text : "重置", 
            handler : function() { 
                form0.getForm().findField("bookTypeID").reset(); 
            } 
        }] 
    }); 
    var s_pannel = new Ext.FormPanel({ 
        height : 60, 
        labelWidth : 80, 
        renderTo : 'grid', 
        baseCls : 'x-plain', 
        defaults : { 
            width : 150, 
            height : 20 
        }, 
        defaultType : 'textfield', 
        items : [{ 
            fieldLabel : '作者', 
            id : 'author', 
            name : 'author' 
        }, { 
            fieldLabel : '书名', 
            id : 'bookName', 
            name : 'bookName' 
        }] 
    }); 
    // create the Grid 
    ds.on('beforeload', function() { 
        Ext.apply(this.baseParams, { 
            author : Ext.get('author').dom.value, 
            bookName : Ext.get('bookName').dom.value 
        }); 
    }); 
    var grid = new Ext.grid.EditorGridPanel({ 
        title : '电子书列表', 
        sm : sm, 
        width : 600, 
        height : 600, 
        fram : true, 
        el : 'grid', 
        ds : ds, 
        cm : cm, 
        bbar : new Ext.PagingToolbar({ 
            pageSize : 20, 
            store : ds, 
            cm : cm, 
            displayInfo : true, 
            // displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 
            displayMsg : '', 
            emptyMsg : "没有记录" 
        }), 
        listeners : { 
            render : function(g) { 
                g.getSelectionModel().selectRow(0); 
            }, 
            delay : 10 
        // Allow rows to be rendered. 
        } 
    }); 
 
    grid.addListener('rowcontextmenu', rowmenu); 
    function rowmenu(grid, rowindex, e) { 
        e.preventDefault(); 
        rightClick.showAt(e.getXY()); 
    } 
 
    var rightClick = new Ext.menu.Menu({ 
        id : 'rightClickCont', 
        items : [{ 
            text : '删除电子书', 
            handler : delBook 
        }] 
    }); 
 
    function delBook() { 
        var c = grid.selModel.selections.keys; 
        if (c.length > 0) { 
            Ext.MessageBox.confirm('警告', '确认要删除所选记录?', doBook); 
        } else { 
            Ext.MessageBox.alert('提示', '最少需要选择一条记录!'); 
        } 
    } 
 
    function doBook(btn) { 
        if (btn == 'yes') { 
            var selectedRows = grid.selModel.selections.items; 
            var jsonData = ''; 
 
            for (var i = 0; i < selectedRows.length; i++) { 
                var row = selectedRows[i]; 
                if (i == 0) { 
                    jsonData = jsonData + row.data['bookID']; 
                } else { 
                    jsonData = jsonData + ',' + row.data['bookID']; 
                } 
            } 
            Ext.MessageBox.show({ 
                msg : '正在请求数据, 请稍侯', 
                progressText : '正在请求数据', 
                width : 300, 
                wait : true, 
                waitConfig : { 
                    interval : 200 
                } 
            }); 
            Ext.Ajax.request({ 
                url : '/deleteBook/', 
                method : 'POST', 
                params : { 
                    bookIDs : jsonData 
                }, 
                callback : function(options, success, response) { 
                    if (success) { 
                        Ext.MessageBox.hide(); 
                        Ext.MessageBox.alert("消息", '删除成功'); 
                    } else { 
                        Ext.MessageBox.hide(); 
                        Ext.MessageBox.alert("失败，请重试", response.responseText); 
                    } 
                }, 
                failure : function(response, options) { 
                    Ext.MessageBox.hide(); 
                    ReturnValue = Ext.MessageBox.alert("警告", "出现异常错误！请联系管理员！"); 
                }, 
                success : function(response, options) { 
                    Ext.MessageBox.hide(); 
                    grid.getStore().reload(); 
                } 
            }) 
 
        } 
    } 
 
    grid.addListener('rowdblclick', rowcontextmenuFunc); 
    // grid.render(); 
 
    var action = new Ext.Action({ 
        text : '新建', 
        handler : createBookWin 
 
    }); 
 
    var winParent = window.opener; 
    if (winParent) { 
        grid.addListener('rowcontextmenu', rightClickFn); 
 
        function doChooseBook() { 
            var selectedRow = grid.getSelectionModel().getSelected(); 
            var winParent = window.opener.document; 
            var url_add = winParent.getElementById('url_add'); 
            var url_update = winParent.getElementById('url_update'); 
            if (selectedRow) { 
                var bookID = selectedRow.data['bookID']; 
                var s = "showBookDetail/?bookID=" + bookID; 
                if (url_add != null) { 
                    url_add.value = s; 
                } 
                if (url_update != null) { 
                    url_update.value = s; 
                } 
            } 
            window.close(); 
        } 
        var rightClick = new Ext.menu.Menu({ 
            id : 'rightClickCont', 
            items : [{ 
                text : '选中', 
                handler : doChooseBook 
            }] 
        }); 
 
        function rightClickFn(grid, rowindex, e) { 
            e.preventDefault(); 
            rightClick.showAt(e.getXY()); 
        } 
    } 
    var gridForm = new Ext.FormPanel({ 
        id : 'book-form', 
        bbar : [action], 
        tbar : [s_pannel, { 
            xtype : "tbseparator" 
        }, { 
            text : ' 搜索', 
            cls : "x-btn-text-icon", 
            handler : function() { 
                // 这里是关键，重新载入数据源，并把搜索表单值提交 
                ds.load({ 
                    params : { 
                        start : 0, 
                        limit : 20, 
                        author : Ext.get('author').dom.value, 
                        bookName : Ext.get('bookName').dom.value 
                    } 
                }) 
            } 
        }], 
 
        frame : true, 
        labelAlign : 'left', 
        title : '电子书列表', 
        bodyStyle : 'padding:5px', 
        width : 1000, 
        layout : 'column', 
        items : [{ 
            columnWidth : 0.5, 
            layout : 'fit', 
            items : grid 
        }, { 
            columnWidth : 0.3, 
            xtype : 'fieldset', 
            labelWidth : 90, 
            title : '详情', 
            defaults : { 
                width : 140 
            }, 
            defaultType : 'textfield', 
            autoHeight : true, 
            bodyStyle : Ext.isIE 
                    ? 'padding:0 0 5px 15px;' 
                    : 'padding:10px 15px;', 
            border : false, 
            style : { 
                "margin-left" : "10px", 
                "margin-right" : Ext.isIE6 
                        ? (Ext.isStrict ? "-10px" : "-13px") 
                        : "0" 
            }, 
            items : [{ 
                fieldLabel : 'ID', 
                name : 'bookID', 
                readOnly : true 
            }, { 
                fieldLabel : '书名', 
                name : 'name' 
            }, { 
                fieldLabel : '作者', 
                name : 'author' 
            },{ 
                fieldLabel : '描述', 
                name : 'description' 
            }, multiselect, { 
                xtype : 'button', 
                text : '更改', 
                handler : function() { 
                    gridForm.getForm().submit({ 
                        url : '/AdminUpdateBasicBook/', 
                        waitMsg : '保存中，请稍候...', 
                        success : function(response, request) { 
                            ds.reload(); 
                            Ext.MessageBox.alert('成功'); 
                        }, 
                        failure : function() { 
                            Ext.MessageBox.alert('失败'); 
                        } 
                    }); 
                } 
            } 
 
            ] 
        } 
 
        ] 
 
    }); 
 
    var p = new Ext.Panel({ 
        width : 1000, 
        title : '结构', 
        renderTo : 'sectionStructure', 
        layout : 'fit', 
        autoHeight : true, 
        border : false 
 
    }); 
    gridForm.render('bd'); 
    form0.addButton({ 
        text : '保存', 
        handler : function() { 
            form0.getForm().submit({ 
                url : '/AdminCreateBasicBook/', 
                waitMsg : '保存中，请稍候...', 
                success : function(response, request) { 
                    Ext.MessageBox.alert('成功'); 
                    ds.reload(); 
 
                }, 
                failure : function() { 
                    Ext.MessageBox.alert('失败'); 
                } 
            }); 
        } 
    }); 
}); 
 
</script> 
<div id="grid" style="height: 265px;"></div> 
<div><span><div id="bd"></div></span></div> 
<span><div id="sectionStructure"></div></span> 
</body> 
</html> 

wangwei22
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[Ext JS 4]后台自动产生图档
oscar999的专栏
12-21 1516
前言[Ext JS 4] 实战之将chart导出为png, jpg 格式的文件承接上一篇， 我们可以做到在Browser端打开一个Chart,并导出为png或是jpg 等格式的图档。但实际的需求会更高级， 希望可以自动产生图档， 并发送email .对报表的需求从主动获取到被动接受， 系统要做得更智能。 需要解决的技术问题：如果在不打开浏览器或是模拟浏览器的状况下产生svg 的代码， 在使用上一篇
Ext与后台（一）
10-10 154
[size=small][b]一段闲话：[/b] 最近做的项目用到了ExtJs，就像每个刚接触Ext的朋友一样，迷茫、无助。 Ext很多资料都是讲解Ext的界面怎么画，很少有人提及到跟后台的交互，以至于一个小小的功能在网上找好长时间，而且还要测试很久才好用。经过一个多月的使用，以及网上一些朋友的文章中的提示，总算是会用了一点。在这里，我认为大家对Ext具备了一定基础，并把自己的一些Ext的用法...
ext 后台java辅助类
zhengyuechuan的专栏
08-28 665
public static class DirectoryInTreeCheck extends DirectoryInTree{ private static final long serialVersionUID = 810485397912266321L; private boolean checked;//为了前台需要添加的，前台可以有多选的功能。 DirectoryInTre
Ext与后台（二）
10-12 87
[size=small] 上一篇中提到了列表显示、增加、删除。这篇说下修改和条件查询。 转载请注明出处：http://simplehumn.iteye.com/blog/486269 [b]2.2修改[/b] [u]第一种方式[/u] 先贴代码 tbar里的items这样写的 [code="java"] ...... { text:'修改' , tooltip : '修改...
用Ext做的后台操作(包括,增,删,改,查)和一个异步加载的Ext树(1)
糖加三勺
07-15 205
http://cam.taoke.alimama.com/event.php?pid=mm_10972871_0_0&eventid=100012 [code="java"]最近刚做了Ext的后台操作，我也是刚接触Ext有好多都是边学边做,所以把部分代码写下来,希望能够方便大家，方便自己... //导包的地方就不多说了 电子书列表 Ext...
Ext 操作数据库，对数据的增删改查，包括数据库，Ajax请求和store请求的设置
05-25
首先，让我们深入了解一下Ext中的"增删改查"（CRUD）操作。CRUD代表创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)，这是任何数据库应用的基础。在Ext中，我们通常会使用Store组件来处理这些操作。Store...
extJs 常用到的增，删，改，查操作代码
10-29
接下来，我们将围绕标题中提到的ExtJs常用增删改查操作，以及在描述和部分给定内容中出现的相关知识点，进行详细的说明。 首先，我们要明白，在ExtJs中，增删改查通常是通过与后端服务（如Java后端）进行通信来实现...
ext简单的增删改查
07-15
在这个"EXT简单的增删改查"项目中，开发者利用EXTJS与SQLServer数据库相结合，实现了基本的数据管理功能，包括添加（Add）、删除（Delete）、修改（Update）和查询（Query）。 1. EXTJS的基本概念： - 组件...
ext用到的增删改查
04-17
在EXT JS中，进行增删改查操作是Web应用程序中常见的功能需求，尤其在数据管理界面。EXT JS提供了一个强大的组件库，可以帮助开发者构建出功能丰富的用户界面。下面将详细解释EXT JS中如何实现这些基本操作。 首先...
ext 同步和异步示例代码
09-05
在EXTJS中，使用`Ext.Ajax.request`方法可以实现异步请求，它接受一个配置对象，包括URL、请求方法、回调函数等。 ```javascript Ext.Ajax.request({ url: '/base/business/SysPublicAction.do', params: { ...
ext 调用php后台,EXT富客户端后台管理系统 初步代码_YUI.Ext相关
weixin_27134143的博客
04-03 103
EXT富客户端后台管理系统 初步代码提供给大家//具体开发 -- BJExtreme类BJExtreme= function(){} ;BJExtreme.prototype.getAuthor = function(){return '许消寒' ;}BJExtreme.prototype.getVersion = function(){return '2008年08月13日 17:00' ;}B...
ext 与java前后台交互_Ext：后台与前端数据传递、前端读取数据显示问题
weixin_32323455的博客
02-26 261
我做了一个窗口，有一个可编辑的grid表单：页面传出数据时，我用encode()方法把对象转换成json格式的字符串，但是中文字符成了“u65f6u95f4”，这样的格式，不知道如何转换为中文？{\"ampm\":\"u65f6u95f4\",\"day1\":2,\"day2\":0,\"day3\":0,\"day4\":0,\"day5\":0,\"day6\":0,\"day7\":0}我...
4.9 Ext JS 模拟后端数据实现
oscar999的专栏
08-06 397
在实际的Ext JS应用中， Store的数据大部分应该是从后端读取， 也就是通过Ajax 的Proxy 获取， 但是在应用开发的初期， 特别是在前后端分离的框架中， 前端可能先需要开发一些页面进行显示；此外， 在对Ext JS 的功能和组件进行教学时， 也可能需要有一些数据进行展示。 基于上述的这些目的，自然就出现了这样的需求： 是否可以使用模拟的数据？...
Ext 后台管理简单登录页面及管理首页布局
寻找。完整的我们
07-11 407
Ext 后台管理简单登录页面及管理首页布局
Ext 简单页面和java后台数据交互
NFA_YY的博客
06-23 1583
前端页面： 余额查询 /content/scripts/extjs/resources/css/ext-all.css"> /content/scripts/extjs/ext-base.js"> /content/scripts/extjs/ext-all.js"> /content/scripts/extjs/ext-lang-zh_CN.js"> /content/scripts/jquer
EXTJs前后台交互
落日小屋
05-23 1万+
Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对象，也可以直接使用“name = value”形式的字符串 params : { name:'value' }, //请求时使用的默认的http方法 method : "post", //请求成功
ExtJS3 - 一个简洁完整的后台管理系统入门实例
般若
01-07 9100
该实例演示了ExtJS 3的一些基本用法，在此基础上可快速搭建实际项目，完成更复杂的业务功能。
Extjs之简单后台管理界面示例
码农的世界
10-14 4392
a{ text-decoration: none; } Ext.onReady(function(){ /** * 主体面板 * */ var centerPanel = Ext.create('Ext.tab.Panel', { region:'center', items:{
ExtJS5 - 一个简洁完整的后台管理系统入门实例
热门推荐
般若
01-19 1万+
ExtJs5新增了对MVVM模式的支持，该实例演示了其基本用法，在此基础上可快速搭建实际项目，完成更复杂的业务功能。 该实例为典型的单页面应用（SPA），各功能模块封装成独立的JS文件，并按需加载（非一次性加载所有JS文件）。
ExtJS表格数据的增删改查操作实例
在本文中，我们将深入探讨如何在ExtJS中进行常用的增删改查（CRUD）操作，以实现对表格数据的有效管理和操作。 首先，让我们理解CRUD操作的基本概念： - **Create** (创建)：在数据库中插入新的记录或数据项。 - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值