ext 动态删除行的问题

[a2048763]

Ext.onReady(function() {
var store= Ext.create('Ext.data.Store', {
fields: ['id', 'username', 'password'],
proxy: {
type: 'ajax',
url:'userlogin!list.action',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad:true
});

var productPanel = new Ext.Panel({
title : ' 模块 1 ',
//layout : 'fit',
id:'productPanel',
bbar : [{
text : '添加',
iconCls : 'add',
handler :showAddBook
}, {
text : '删除',
iconCls : 'remove'
handler :removeUser 在这边家一个function实现点击某一行在按删除 实现删除功能
}, {
text : '修改',
iconCls : 'option'
}
],
defaults : {
// applied to each contained panel
bodyStyle : 'padding:0px'
},
layout: {
type: 'accordion',
animate: true

},
items : [{
title : '参数配置',
xtype: 'grid',
columns: [
{ text: 'Id', dataIndex: 'id' },
{ text: 'Username', dataIndex: 'username', flex: 1 },
{ text: 'Password', dataIndex: 'password' }
]
,store:store

},{
title : '参数配置',
html : '<P align="center"><a href="http://www.baidu.com" target="ifrMID">想看百度就点我</a></p>'
},
{
title : '参数配置',
html : '<p>这是参数配置</p>'
}]
});

var systemconfPanel= new Ext.Panel({
title : ' 模块2 ',
//layout : 'fit',
id:'systemconfPanel',
defaults : {
// applied to each contained panel
bodyStyle : 'padding:0px'
},
layout: {
type: 'accordion',
animate: true
},
items : [{
title : '系统初始化',
html : '<p>这是系统初始化</p>'
}, {
title : '参数配置',
html : '<p>这是参数配置</p>'
}, {
title : '知识管理',
html : '<p>这是知识管理</p>'
}]
});

var viewport = new Ext.Viewport({
layout : 'border',
renderTo : Ext.getBody(),
items : [//viewport的ITEM开始
//北方
{
title : '<marquee width="400px">This is ext</marquee>',
id : "north",
region : 'north',
xtype : 'panel',
spilt : true,
height : 120,
html : '<p>GPS导航业务</p>',
bbar : [{
iconCls : 'add',
text : '管理员'
}, '-', {
text : Ext.Date.format(new Date(), 'Y年m月d日 a g:i ')
}, '->', {
text : '退出',
iconCls : 'remove',
handler : exit
}],
bodyStyle : 'backgroud-color:#99bbe8;line-height : 50px;padding-left:20px;' +
'font-size:22px;color:#000000;font-family:黑体;font-weight:bolder;'+
'background: -webkit-gradient(linear, left top, left bottom, ' +
'color-stop(0%, rgba(153,187, 232, 0.4) ),' +
'color-stop(50%, rgba(153, 187, 232, 0.8) ),' +
'color-stop(0%, rgba(153, 187, 232, 0.4) ) );'
},
//西方
{
title : '菜单',
region : 'west',
iconCls : 'option',
id : 'west', // see Ext.getCmp() below
width: 280, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 0 0 0',
collapsible: true,
split: true,
layout: 'fit', // specify layout manager for items
items: // 西部的ITEM开始 // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
activeTab : 0,
width : 200,
defaults : {
autoScroll : true
},
items :
[productPanel,
systemconfPanel
]

})//tabPanel结束

//西部ITEM的结束
},

//中间
{
title : '中间',
region : 'center',
xtype : 'panel',
html: '<iframe frameborder="0" marginheight="0" width="100%" height="100%" marginwidth="0" scrolling="auto" name="ifrMID"></iframe>',
spilt : true
}]
//viewport的ITEM结束
});
var bookForm = new Ext.FormPanel({
labelSeparator: ":",
frame:true,
border:false,
items:[
{
xtype:'hidden',
name:'id'
},{
xtype:'textfield', //文本区
width:220,
allowBlank:false,
blankText:'用户名不能为空',
name:'user.username',
fieldLabel:'用户名 '
},{
xtype:'textfield',
width:220,
allowBlank:false,
blankText:'密码不能为空',
name:'user.password',
fieldLabel:'密码'
}
],
buttons:[
{
text:'关闭',
handler:function(){
win.hide();
}
},{
text:'提交',
handler:function(){
if(bookForm.getForm().isValid()) {
Ext.MessageBox.show({
title:'请等待',
msg:'正在加载',
progressText:'',
width:300,
progress:true,
closable:'false',
animEl:'loding'
});
var f = function(v){
return function(){
var i=v/11;
Ext.MessageBox.updateProgress(i,'');
}
}
for(var i=1;i<33;i++){
setTimeout(f(i),i*1500);
}
//提交到服务器操作
bookForm.form.doAction('submit',{
url:'userlogin!add.action',
method:'post',
success:function(form,action){
Ext.Msg.alert("添加成功！");
win.hide();
store.reload()


},
failure:function(form,action){
Ext.Msg.alert("添加失败！",action.result.message);
}
});
}
}
}
]
});

var win = new Ext.Window({ //创建弹出窗口
layout:'fit',
width:250,
closeAction:'hide',
height:200,
resizable:false,
shadow:true,
modal:true,
closable:true,
bodyStyle:'padding:5 5 5 5',
animCollapse:true,
items:[bookForm]
});

function showAddBook(){
bookForm.form.reset();
bookForm.isAdd = true;
win.setTitle('新增用户');
win.show();
}
function exit(){
document.location="login.jsp";
}
function removeUser(){
我的想法是弹出一个框 问确定删除吗 点击确定的时候 执行后台的action传来的方法 ~ （方法已写好~）想象添加用户那样 没头绪 不知道怎么写 请大大告知 小弟菜鸟~
}
});

[Go 旅城通票]

grid加个id方便获取实例 items : [{ title : '参数配置', xtype: 'grid', id:'xxGrid', ....

    function removeUser() {
        if (confirm('确认删除？！')) {
            var grid = Ext.getCmp('xxGrid');
            var recs = grid.getSelectionModel().getSelection(); //获取所有选择的行
            if (recs.length < 1) { alert('没有选择记录！'); return false; }
            var rec = recs[0]; //去第一个记录

            Ext.Ajax.request({//ajax请求动态页执行删除
                url: 'xxx.action',
                params: {
                    id: rec.get('id')//传递id
                },
                success: function (response) {
                    var text = response.responseText;
                    if (text == "1") {//action正常删除输出1就行，其他的视为无效
                        store.remove(rec); store.commitChanges(); //删除行并提交，更新grid的UI
                    } else alert('删除失败\n' + text);
                },
                failure: function (response) {
                    alert('动态页有问题\n' + response.responseText)
                }
            });
        }
    }

[a2048763]

引用 6 楼 showbo 的回复:

java不知道，你要做的是浏览器查看那个地址只有1输出，如果输出其他的你要修改js是否成功删除的判断

success: function (response) {
var text = response.responseText;
if (text == "1") {//action正常删除输出1就行，其他的视为无效
store.remove(rec); store.commitChanges(); //删除行并提交，更新grid的UI
} else alert('删除失败\n' + text);
},

请问有没有别的方法 因为我后台Action只要返回值是SUCCESS json 就会把所有是SUCCESS的值往前台传 那样得到的json是一大堆东西就是这样

肯定判断不了 是不是等于1 我想说有没有别的方法 接受后台随便一个参数 然后再前台进行判断 只接受其中一个参数就可以了~

[a2048763]

引用 1 楼 showbo 的回复:

grid加个id方便获取实例 items : [{ title : '参数配置', xtype: 'grid', id:'xxGrid', ....

    function removeUser() {
        if (confirm('确认删除？！')) {
            var grid = Ext.getCmp('xxGrid');
            var recs = grid.getSelectionModel().getSelection(); //获取所有选择的行
            if (recs.length < 1) { alert('没有选择记录！'); return false; }
            var rec = recs[0]; //去第一个记录

            Ext.Ajax.request({//ajax请求动态页执行删除
                url: 'xxx.action',
                params: {
                    id: rec.get('id')//传递id
                },
                success: function (response) {
                    var text = response.responseText;
                    if (text == "1") {//action正常删除输出1就行，其他的视为无效
                        store.remove(rec); store.commitChanges(); //删除行并提交，更新grid的UI
                    } else alert('删除失败\n' + text);
                },
                failure: function (response) {
                    alert('动态页有问题\n' + response.responseText)
                }
            });
        }
    }

这个删除的原理 我不是很明白 传递ID 是传递对象里面的ID吗 那我删除的时候 是要根据ID删除呢 还是用其他的方法呢。那其他方法是什么 ~版主每次都细心为我解答 真心感谢 ~因为初学EXT 很多东西 原理不是搞得很明白 理解不到~

[Go 旅城通票]

就是store里面配置的id字段，至于这个id字段是否为你数据库记录的唯一id就不知道你了 你删除记录肯定要依据一个唯一键来删除记录吧，如果你发往客户端的数据中不包含唯一键的数据，那就无法删除了

[a2048763]

可是ext不是接受的是success吗
那我这个方法 返回值是boolean 按照您的意思 是不是返回值要用int 表示呢
我页面删不了 显示这样

[a2048763]

引用 3 楼 showbo 的回复:

就是store里面配置的id字段，至于这个id字段是否为你数据库记录的唯一id就不知道你了 你删除记录肯定要依据一个唯一键来删除记录吧，如果你发往客户端的数据中不包含唯一键的数据，那就无法删除了

忘记引用您了

[Go 旅城通票]

java不知道，你要做的是浏览器查看那个地址只有1输出，如果输出其他的你要修改js是否成功删除的判断 success: function (response) { var text = response.responseText; if (text == "1") {//action正常删除输出1就行，其他的视为无效 store.remove(rec); store.commitChanges(); //删除行并提交，更新grid的UI } else alert('删除失败\n' + text); },

[a2048763]

引用 6 楼 showbo 的回复:

java不知道，你要做的是浏览器查看那个地址只有1输出，如果输出其他的你要修改js是否成功删除的判断 success: function (response) { var text = response.responseText; if (text == "1") {//action正常删除输出1就行，其他的视为无效 store.remove(rec); store.commitChanges(); //删除行并提交，更新grid的UI } else alert('删除失败\n' + text); },

版主您好 我现在要把表格修改成可编辑表格 要如何改呢 ~请教一下 谢谢

[a2048763]

引用 8 楼 u011782936 的回复:

[quote=引用 6 楼 showbo 的回复:]
java不知道，你要做的是浏览器查看那个地址只有1输出，如果输出其他的你要修改js是否成功删除的判断

success: function (response) {
var text = response.responseText;
if (text == "1") {//action正常删除输出1就行，其他的视为无效
store.remove(rec); store.commitChanges(); //删除行并提交，更新grid的UI
} else alert('删除失败\n' + text);
},

版主您好 我现在要把表格修改成可编辑表格 要如何改呢 ~请教一下 谢谢[/quote]
我直接把xtype改成editorgrid
显示不出来 还报错 怎么解决呢