求Extjs 表格的增删改查 (来者有分)

shihuaxian123 2010-12-26 07:26:13



Ext.onReady(function(){

    //var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});

    var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});

    var cm = new Ext.grid.ColumnModel([

        //new Ext.grid.RowNumberer(),

        new Ext.grid.RowNumberer(),//显示行号

        sm,

        {header: '编号',dataIndex: 'id', sortable:true}    ,

        {header: '名称',dataIndex: 'name'},

        {header: '时间',dataIndex: 'date'},

        {id:'descn', header: '描述', dataIndex: 'descn'}

    ]);

    

    var data = [

        ['1','name1','2010-11-22','descn1'],

        ['2','name2','2010-11-23','descn2'],

        ['3','name3','2010-11-24','descn3'],

        ['4','name4','2010-11-25','descn4'],

        ['5','name5','2010-11-26','descn5'],

        ['6','name11','2010-11-27','descn11'],

        ['7','name21','2010-11-28','descn21'],

        ['8','name31','2010-11-29','descn31'],

        ['9','name41','2010-11-30','descn41'],

        ['10','name51','2010-12-1','descn51'],

        ['11','name15','2010-12-2','descn15'],

        ['12','name1','2010-12-3','descn1'],

        ['13','name2','2010-12-4','descn2'],

        ['14','name3','2010-11-1','descn3'],

        ['15','name4','2010-11-2','descn4'],

        ['16','name5','2010-11-3','descn5'],

        ['17','name11','2010-11-4','descn11'],

        ['18','name21','2010-11-5','descn21'],

        ['19','name31','2010-11-6','descn31'],

        ['20','name41','2010-11-7','descn41'],

        ['21','name51','2010-11-8','descn51'],

        ['22','name15','2010-11-9','descn15'],

        ['23','name1','2010-11-10','descn1'],

        ['24','name2','2010-11-11','descn2'],

        ['25','name3','2010-11-12','descn3'],

        ['26','name4','2010-11-13','descn4'],

        ['27','name5','2010-11-14','descn5'],

        ['28','name11','2010-11-15','descn11'],

        ['29','name21','2010-11-16','descn21'],

        ['30','name31','2010-11-17','descn31'],

        ['31','name41','2010-11-18','descn41'],

        ['32','name51','2010-11-19','descn51'],

        ['33','name15','2010-11-20','descn15'],

        ['34','name51','2010-11-19','descn51'],

        ['35','name15','2010-11-20','descn15']

    ];

    

    var store = new Ext.data.Store({

        proxy: new Ext.data.PagingMemoryProxy(data),

        reader: new Ext.data.ArrayReader({},[

            {name: 'id'},

            {name: 'name'},

            {name: 'date'},

            {name: 'descn'}

        ])

    });

    

    

    var grid = new Ext.grid.GridPanel({

        autoHeight: true,

        renderTo: 'grid',

        store:store,

        stripeRows: true,//斑马线

        cm:cm,

        sm: sm,

        bbar: new Ext.PagingToolbar({

            pageSize: 10,

            store: store,

            displayInfo: true,

            displayMsg: '显示第{0}条到{1}条记录,一共{2}条',

            emptyMsg: "没有记录"

        }),

        

        viewConfig:{

            columnsText: '显示的列',

            forceFit: true, 

            sortAscText: '升序',/*调试成可用的*/

            sortDescText: '降序'

        },

        autoExpandColumn: 'descn'

    });

    store.load({params:{start:0, limit:10}});

    //删除checkbox选中的某一行

    Ext.get("delete").on('click',function(){

        //帮忙写一下函数操作

    });

     //增加一行数据

    Ext.get("add").on('click',function(){

        //帮忙写一下函数操作

    });

 //查看checkbox选中的某一行

    Ext.get("look").on('click',function(){

        //帮忙写一下函数操作

    });

//修改checkbox选中的某一行

    Ext.get("edit").on('click',function(){

        //帮忙写一下函数操作

    });

});

希望给出添加的弹出框，和修改的弹出框，还有查看的，不只是函数执行的提示，包括操作输入框那样的谢谢



<body>

   <div id="grid"></div>

   <div id="add"></div>

   <div id="delete"></div>

   <div id="edit"></div>

   <div id="look"></div>

</body>

...全文

610 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

passself 2010-12-28

打赏
举报

我大致看了一下，楼主可以这样做比较简单，每次来操作data的数据，在load一遍就可以了，比如添加一条数据的话就在data数组中加入一条数据，store.load()重新load一下就可以了，至于删除修改，同样可以用操作数组的方法来操作，查看的话也是一样，只是那时把标签的属性设置成 readonly true就可以了

passself 2010-12-28

打赏
举报

[Quote=引用 10 楼 shihuaxian123 的回复:]

你们这些水货，牛就把代码贴出来，不行就别说了，自以为很懂，其实还不如我
[/Quote]
楼主太偏激了，很多人都是从顶帖开始的，而且很多就是滥竽充数的，呵呵

qwe065560 2010-12-27

打赏
举报

ext没学过

我只是来学习的

shihuaxian123 2010-12-27

打赏
举报

你们这些水货，牛就把代码贴出来，不行就别说了，自以为很懂，其实还不如我

看看山观观海 2010-12-27

打赏
举报

[Quote=引用 4 楼 zoujp_xyz 的回复:]
JScript code
var win = new Ext.Window({
title: "添加",
width: 400, height: 250,
buttonAlign: "center",
constrain: true, layout: "fit",
items: {
xtype: "form", bodyStyl……
[/Quote]

可以的这个。

wsxing008 2010-12-27

打赏
举报

你可以下个extjs的文档，里面有好多例子，有你想要的

shihuaxian123 2010-12-27

打赏
举报

大哥，我不是不练，是本来就不会，而且看代码才能看懂啊，希望有个详细的代码啊，有增删改视图的，你们只会说，你们会代码吗？

彩票虫虫 2010-12-27

打赏
举报

哥们你真有点懒了，你不练怎么学好啊。嗨

flyerwing 2010-12-27

打赏
举报

这东西好象没什么说的呀。

zoujp_xyz 2010-12-27

打赏
举报

var win = new Ext.Window({

    title: "添加",

    width: 400, height: 250,

    buttonAlign: "center",

    constrain: true, layout: "fit",

    items: {

        xtype: "form", bodyStyle: "padding:10px;", labelWidth: 60,

        items: [{

            layout: "column", border: false,

            items: [

                { layout: "form", items: { xtype: "textfield", name: "", fieldlabel: "编号", anchor: "90%" }, columnWidth: .5 },

                { layout: "form", items: { xtype: "textfield", name: "", fieldlabel: "名称", anchor: "90%" }, columnWidth: .5 },

            ]

        },

        {

            layout: "column", border: false,

            items: [

                { layout: "form", items: { xtype: "datefield", name: "", fieldlabel: "时间", anchor: "90%" }, columnWidth: .5 },

                { layout: "form", items: { xtype: "textfield", name: "", fieldlabel: "备注", anchor: "90%" }, columnWidth: .5 },

            ]

            }]

        },

        buttons: [

        { text: "提交", handler: function() {

            win.get(0).form.submit({

                url: "",

                success: function(form, action) {



                }

            })

        }

        },

        { text: "关闭", handler: function() { } }

    ]

    })

十一文 2010-12-27

打赏
举报

ext没学过

我只是来学习的

shihuaxian123 2010-12-27

打赏
举报

我是菜鸟啊，帮忙写一下代码啊（增改查），就是弹出一个框上面有名称等输入框的视图

shihuaxian123 2010-12-27

打赏
举报

[Quote=引用 13 楼 wanghailong0115 的回复:]

引用 10 楼 shihuaxian123 的回复:

你们这些水货，牛就把代码贴出来，不行就别说了，自以为很懂，其实还不如我

很NB吗就自己做呗干嘛问别人啊问别人问题还这么嚣张真没见过就算会也不告诉你
[/Quote]
会就会，像孟子一样，别在这里说大话

KK3K2005 2010-12-27

打赏
举报

[Quote=引用 10 楼 shihuaxian123 的回复:]

你们这些水货，牛就把代码贴出来，不行就别说了，自以为很懂，其实还不如我
[/Quote]

贴了你还是要问的 EXT的添删改根据MVC原则直接可以做个大致的代码生成器

wanghailong0115 2010-12-27

打赏
举报

[Quote=引用 10 楼 shihuaxian123 的回复:]

你们这些水货，牛就把代码贴出来，不行就别说了，自以为很懂，其实还不如我
[/Quote]
很NB吗就自己做呗干嘛问别人啊问别人问题还这么嚣张真没见过就算会也不告诉你

jcx396158820 2010-12-27

打赏
举报

你可以下个extjs的文档，里面有好多例子，有你想要的

zoujp_xyz 2010-12-26

打赏
举报

1。
删除的
//删除选中的行
var rs = grid.getSelectionModel().getSelections();
var Ids = [];//要删除的id
for (var i = 0; i < rs.length; i++) {
Ids.push(rs[i].id);
}
Ext.Ajax.request({
url: "",
method: "POST",
params: { Ids: Ids.join(",") },
success: function(response, opts) {
if (Ext.decode(response.responseText).success === true) {
grid.getStore().reload();
}
}）;
2。
添加我编辑的要布局一下就好了。
用loadRecord把你选中的信息加载到布局好的form中。然后提交。
不明白的话可以看看api官方的例子