ext 条件查询grid显示的问题（菜鸟问题）~

2009-08-28 09:07:52 600 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

告别有线：用PVE直通无线网卡，打造一台真正的‘无线’Win10软路由/测试机本文详细介绍了如何通过PVE直通无线网卡技术，构建全无线Win10软路由或测试机。从硬件选型、PVE环境配置到PCIe和USB双模直通技术，逐步指导实现Wi-Fi AP和蓝牙连接功能，为家庭实验室和小型办公环境提供灵活高效的网络解决方案。阅读详情

提交一个表单，包括combo，datefield，textfield，用grid显示，不知道提交的buttons怎么写，初学者，没找到这方面的资料，一下代码怎么能提交到grid读取？



var form = new Ext.form.FormPanel({

        title: '条件查询',

        region: 'east',

        frame: true,

        width: 300,

        autoHeight: true,

        labelAlign: 'right',

        labelWidth: 60,

        defaultType: 'textfield',

        defaults: {

            width: 200,

            allowBlank: false

        },

        items: [

        {

            xtype: 'hidden',

            name: 'id'

        },

        {

            fieldLabel: '名',

            name: 'gameName',

            xtype: 'combo',

            store: new Ext.data.SimpleStore({

                fields: ['text'],

                data: [['a'],['b'],['c']]

            }),

            emptyText: '请选择',

            mode: 'local',

            triggerAction: 'all',

            valueField: 'text',

            displayField: 'text',

            readOnly: true

        }

        ,{

            fieldLabel: 'name2',

            name: 'serverName',

        },{

        		name:'begin',

        		xtype:'datefield',  

        		//name='publishDate',

        		emptyText:'请选择',

        		format :'Y-m-d',

        		minValue :'01/01/2007',

        		maxValue:new Date(),

        		readOnly: true

        	},{

        		name:'finish',

        		xtype:'datefield',  

        		emptyText:'请选择',

        		format :'Y-m-d',

        		minValue :'01/01/2007',

        		maxValue:new Date(),

        		readOnly: true

        	},

       		{

            name: 'gameType',

            xtype: 'combo',

            store: new Ext.data.SimpleStore({

                fields: ['text'],

                data: [['1'],['2'],['3'],['4']]

            }),

            emptyText: '请选择',

            mode: 'local',

            triggerAction: 'all',

            valueField: 'text',

            displayField: 'text',

            readOnly: true

        }

        ],

        buttons: [{

            text: '提交',

            handler: function() {

            	if (!form.getForm().isValid()) {

                    return;

                }



                form.getForm().submit({

                        url: './jsp/query.jsp',

                        success: function(f, action) {

                            if (action.result.success) {

                                Ext.Msg.alert('消息', action.result.msg, function() {

                                    grid.getStore().reload();

                                    form.getForm().reset();

                                    form.buttons[0].setText('提交');

                                });

                            }

                        },

                        failure: function() {

                            Ext.Msg.alert('错误', "提交失败");

                        }

                    });

                                	

;

            }

        },{

            text: '清空',

            handler: function() {

                form.getForm().reset();

                form.buttons[0].setText('提交');

            }

        }]

    });

...全文

网课、网页视频倍速播放简单脚本一个简单的网页视频倍速脚本阅读详情

H~~~

Ajax 52,778 成员 25,334 内容

+ 关注 + 加入社区

切换为时间正序

college0531 2012-06-07

打赏
举报

buttons: [{
text: '确定',
listeners: {
'click': function () {
ds.baseParams.username = Ext.getCmp('username').getValue();
ds.baseParams.passport = Ext.getCmp('passport').getValue();
ds.baseParams.describe = Ext.getCmp('describe').getValue();
ds.load();
}
}
}, {
text: '重置',
listeners: {
'click': function () {
listPanel.getForm().reset();
}
}
}]

luyanvv 2009-09-03

打赏
举报

-_-现在怎么都要用回复的才能看到答案呀.晕倒

胡须棉花糖 2009-08-28

打赏
举报

8楼大侠写的很详细了。

hookee 2009-08-28

打赏
举报



<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="extjs/ext-all.js"></script>

<script>

var form;

var store = new Ext.data.JsonStore({

    url: 'test1.asp',

    baseParams:{},

    root: 'root',

    fields: ['id', 'gameName', 'serverName', 'begin', 'finish', 'gameType']

});

store.load();



Ext.onReady(function(){

form = new Ext.form.FormPanel({

        title: '条件查询',

        //region: 'east',

        renderTo:'pad',

        frame: true,

        width: 300,

        autoHeight: true,

        labelAlign: 'right',

        labelWidth: 60,

        defaultType: 'textfield',

        defaults: {

            width: 200,

            allowBlank: false

        },

        items: [

        {

            xtype: 'hidden',

            name: 'id'

        },

        {

            fieldLabel: '名',

            name: 'gameName',

            xtype: 'combo',

            store: new Ext.data.SimpleStore({

                fields: ['text'],

                data: [['a'],['b'],['c']]

            }),

            emptyText: '请选择',

            mode: 'local',

            triggerAction: 'all',

            valueField: 'text',

            displayField: 'text',

            readOnly: true

        }

        ,{

            fieldLabel: 'name2',

            name: 'serverName'

        },{

                name:'begin',

                xtype:'datefield',  

                //name='publishDate',

                emptyText:'请选择',

                format :'Y-m-d',

                minValue :'01/01/2007',

                maxValue:new Date(),

                readOnly: true

            },{

                name:'finish',

                xtype:'datefield',  

                emptyText:'请选择',

                format :'Y-m-d',

                minValue :'01/01/2007',

                maxValue:new Date(),

                readOnly: true

            },

               {

            name: 'gameType',

            xtype: 'combo',

            store: new Ext.data.SimpleStore({

                fields: ['text'],

                data: [['1'],['2'],['3'],['4']]

            }),

            emptyText: '请选择',

            mode: 'local',

            triggerAction: 'all',

            valueField: 'text',

            displayField: 'text',

            readOnly: true

        }

        ],

        buttons: [{

            text: '提交',

            handler: function() {

            	store.baseParams = {id:'',gameName:'',serverName:'',begin:'',finish:'',gameType:''};

            	store.baseParams.id = form.items.get(0).getValue();

            	store.baseParams.gameName = form.items.get(1).getValue();

            	store.baseParams.serverName = form.items.get(2).getValue();

            	store.baseParams.begin = form.items.get(3).getValue();

            	store.baseParams.finish = form.items.get(4).getValue();

            	store.baseParams.gameType = form.items.get(5).getValue();

            	store.reload();

            }

        },{

            text: '清空',

            handler: function() {

                form.getForm().reset();

                form.buttons[0].setText('提交');

            }

        }]

    });

    

    grid = new Ext.grid.GridPanel({

        store: store,

        columns: [

            {header: "id", dataIndex: 'id'},

            {header: "gameName", dataIndex: 'gameName'},

            {header: "serverName", dataIndex: 'serverName'},

            {header: "begin", dataIndex: 'begin'},

            {header: "finish", dataIndex: 'finish'},

            {header: "gameType", dataIndex: 'gameType'}

        ],

        width:600,autoHeight:true,

        //frame:true,

        title:'EXAMPLE',

        renderTo:'grid_pad'

    });





});



</script>

<div id="pad"></div>

<div id="grid_pad"></div>

test1.asp



<%

If Request("gameName")<>"" Then

  id = Request("id")

  gameName = Request("gameName")

  serverName = Request("serverName")

  begin = Request("begin")

  finish = Request("finish")

  gameType = Request("gameType")

  '查询生成数据

%>

{root:[{id:1<%=id%>,gameName:'<%=gameName%>',serverName:'<%=serverName%>',begin:'<%=begin%>',finish:'<%=finish%>',gameType:'<%=gameType%>'}]}

<%

Else

%>

{root:[{id:1,gameName:'xx',serverName:'xxx',begin:'2009-1-1',finish:'2009-1-1',gameType:11}]}

<%

End If

%>

xiuyouxu 2009-08-28

打赏
举报

[Quote=引用 5 楼 wlh86618 的回复:]
引用 3 楼 xiuyouxu 的回复:
后台返回数据，在表单提交的回调函数里处理就行了

form.getForm().submit({
url: './jsp/query.jsp',
success: function(f, action) {
if (action.result.success) {
Ext.Msg.alert('消息', action.result.msg, function() {
grid.getStore().reload();
form.getForm().reset();
form.buttons[0].setText('提交');
});
}
},
failure: function() {
Ext.Msg.alert('错误', "提交失败");
}
});

提交成功后，如果正确返回，则success这个回调函数会被调用，否则failure会被调用，在这里将数据放到grid里就可以了

我用这段代码的问题是：可以提交到query.jsp，我返回的是grid的json数据,grid没有显示~
[/Quote]

success: function(f, action) {
if (action.result.success) {
Ext.Msg.alert('消息', action.result.msg, function() {
grid.getStore().reload();
form.getForm().reset();
form.buttons[0].setText('提交');
});
}
}
改一下，不要在alert里处理
if (action.result.success) {
Ext.Msg.alert('消息', action.result.msg);
//这里用reload似乎不对，因为数据是通过表单提交获取的，这里把数据重新组织一下，再放到grid里，或者根据＃4的建议处理
grid.getStore().reload();
form.getForm().reset();
form.buttons[0].setText('提交');
}

H~~~ 2009-08-28

打赏
举报

[Quote=引用 4 楼 hookee 的回复:]
如果grid的store是通过url获取的，那么，没有必要递交form表单，直接修改grid的baseParams，然后reload()就可以得到新的数据了。
[/Quote]

我是初学者，没太理解你的意思。
grid的store是通过url获取的，baseParams是什么？能给我简单的例子吗？谢谢了~

H~~~ 2009-08-28

打赏
举报

[Quote=引用 3 楼 xiuyouxu 的回复:]
后台返回数据，在表单提交的回调函数里处理就行了

form.getForm().submit({
url: './jsp/query.jsp',
success: function(f, action) {
if (action.result.success) {
Ext.Msg.alert('消息', action.result.msg, function() {
grid.getStore().reload();
form.getForm().reset();
form.buttons[0].setText('提交');
});
}
},
failure: function() {
Ext.Msg.alert('错误', "提交失败");
}
});

提交成功后，如果正确返回，则success这个回调函数会被调用，否则failure会被调用，在这里将数据放到grid里就可以了
[/Quote]

我用这段代码的问题是：可以提交到query.jsp，我返回的是grid的json数据,grid没有显示~

hookee 2009-08-28

打赏
举报

如果grid的store是通过url获取的，那么，没有必要递交form表单，直接修改grid的baseParams，然后reload()就可以得到新的数据了。

xiuyouxu 2009-08-28

打赏
举报

后台返回数据，在表单提交的回调函数里处理就行了

form.getForm().submit({
url: './jsp/query.jsp',
success: function(f, action) {
if (action.result.success) {
Ext.Msg.alert('消息', action.result.msg, function() {
grid.getStore().reload();
form.getForm().reset();
form.buttons[0].setText('提交');
});
}
},
failure: function() {
Ext.Msg.alert('错误', "提交失败");
}
});

提交成功后，如果正确返回，则success这个回调函数会被调用，否则failure会被调用，在这里将数据放到grid里就可以了

H~~~ 2009-08-28

打赏
举报

[Quote=引用 1 楼 xiuyouxu 的回复:]
问题描述不清楚，提交表单，然后和grid有什么关系？
[/Quote]

表单是查询条件，grid显示这些条件筛选过后的数据，我想知道怎么通过表单提交到后台处理，然后返回给grid.

xiuyouxu 2009-08-28

打赏
举报

问题描述不清楚，提交表单，然后和grid有什么关系？

hookee 2009-08-28

打赏
举报

我的root是'root',你用result的话改成 root:'result'

另外开头多了个{
{totalCount:1,result:[{gameName:'xx',serverName:'xxx',begin:'2009-1-1',finish:'2009-1-1',gameType:11}]}

H~~~ 2009-08-28

打赏
举报

[Quote=引用 10 楼 wlh86618 的回复:]
引用 8 楼 hookee 的回复:
HTML code <linkrel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> <scripttype="text/javascript" src="extjs/adapter/ext/ext-base.js"> </script> <scripttype="text/javascript" src="extjs/ext-all.js"> </script> <script>var form;var store=new Ext.data.JsonStore({
url:'test1.asp',
baseParams:{},
root:'root',
fields: ['id','gameName','serverName','begin','finish','gameType']
});
store.load();

Ext.onReady(function(){
form=new Ext.form.FormPanel({
title:'条件查询',//region: 'east', renderTo:'pad',
frame:true,
width:300,
autoHeight:true,
labelAlign:'right',
labelWidth:60,
defaultType:'textfield',
defaults: {
width:200,
allowBlank:false
},
items: [
{
xtype:'hidden',
name:'id'
},
{
fieldLabel:'名',
name:'gameName',
xtype:'combo',
store:new Ext.data.SimpleStore({
fields: ['text'],
data: [['a'],['b'],['c']]
}),
emptyText:'请选择',
mode:'local',
triggerAction:'all',
valueField:'text',
displayField:'text',
readOnly:true
}
,{
fieldLabel:'name2',
name:'serverName'
},{
name:'begin',
xtype:'datefield',//name='publishDate', emptyText:'请选择',
format :'Y-m-d',
minValue :'01/01/2007',
maxValue:new Date(),
readOnly:true
},{
name:'finish',
xtype:'datefield',
emptyText:'请选择',
format :'Y-m-d',
minValue :'01/01/2007',
maxValue:new Date(),
readOnly:true
},
{
name:'gameType',
xtype:'combo',
store:new Ext.data.SimpleStore({
fields: ['text'],
data: [['1'],['2'],['3'],['4']]
}),
emptyText:'请选择',
mode:'local',
triggerAction:'all',
valueField:'text',
displayField:'text',
readOnly:true
}
],
buttons: [{
text:'提交',
handler:function() {
store.baseParams= {id:'',gameName:'',serverName:'',begin:'',finish:'',gameType:''};
store.baseParams.id= form.items.get(0).getValue();
store.baseParams.gameName= form.items.get(1).getValue();
store.baseParams.serverName= form.items.get(2).getValue();
store.baseParams.begin= form.items.get(3).getValue();
store.baseParams.finish= form.items.get(4).getValue();
store.baseParams.gameType= form.items.get(5).getValue();
store.reload();
}
},{
text:'清空',
handler:function() {
form.getForm().reset();
form.buttons[0].setText('提交');
}
}]
});

grid=new Ext.grid.GridPanel({
store: store,
columns: [
{header:"id", dataIndex:'id'},
{header:"gameName", dataIndex:'gameName'},
{header:"serverName", dataIndex:'serverName'},
{header:"begin", dataIndex:'begin'},
{header:"finish", dataIndex:'finish'},
{header:"gameType", dataIndex:'gameType'}
],
width:600,autoHeight:true,//frame:true, title:'EXAMPLE',
renderTo:'grid_pad'
});

}); </script> <divid="pad"> </div> <divid="grid_pad"> </div>

test1.asp
HTML code <%If Request("gameName") <>""Then
id= Request("id")
gameName= Request("gameName")
serverName= Request("serverName")
begin= Request("begin")
finish= Request("finish")
gameType= Request("gameType")'查询生成数据%>
{root:[{id:1 <%=id%>,gameName:' <%=gameName%>',serverName:' <%=serverName%>',begin:' <%=begin%>',finish:' <%=finish%>',gameType:' <%=gameType%>'}]} <%Else%>
{root:[{id:1,gameName:'xx',serverName:'xxx',begin:'2009-1-1',finish:'2009-1-1',gameType:11}]} <%EndIf%>

这个代码可以提交，后台的代码也可以执行，但是无法显示~
[/Quote]

我找到原因了，我的json格式是：{{totalCount:1,result:[{gameName:'xx',serverName:'xxx',begin:'2009-1-1',finish:'2009-1-1',gameType:11}]}
多了一个分页的参数，
如果按照你的方式改，这个属性怎么能加上？

hookee 2009-08-28

打赏
举报

光上述代码，测试过可以的。
如果照此修改的话，只要返回的是纯粹的json数据，没有html标签，格式正确的话就可以显示了，单独访问数据产生页面看下浏览器中的源代码。

H~~~ 2009-08-28

打赏
举报

[Quote=引用 8 楼 hookee 的回复:]
HTML code<linkrel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/><scripttype="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><scripttype="text/javascript" src="extjs/ext-all.js"></script><script>var form;var store=new Ext.data.JsonStore({
url:'test1.asp',
baseParams:{},
root:'root',
fields: ['id','gameName','serverName','begin','finish','gameType']
});
store.load();

Ext.onReady(function(){
form=new Ext.form.FormPanel({
title:'条件查询',//region: 'east', renderTo:'pad',
frame:true,
width:300,
autoHeight:true,
labelAlign:'right',
labelWidth:60,
defaultType:'textfield',
defaults: {
width:200,
allowBlank:false
},
items: [
{
xtype:'hidden',
name:'id'
},
{
fieldLabel:'名',
name:'gameName',
xtype:'combo',
store:new Ext.data.SimpleStore({
fields: ['text'],
data: [['a'],['b'],['c']]
}),
emptyText:'请选择',
mode:'local',
triggerAction:'all',
valueField:'text',
displayField:'text',
readOnly:true
}
,{
fieldLabel:'name2',
name:'serverName'
},{
name:'begin',
xtype:'datefield',//name='publishDate', emptyText:'请选择',
format :'Y-m-d',
minValue :'01/01/2007',
maxValue:new Date(),
readOnly:true
},{
name:'finish',
xtype:'datefield',
emptyText:'请选择',
format :'Y-m-d',
minValue :'01/01/2007',
maxValue:new Date(),
readOnly:true
},
{
name:'gameType',
xtype:'combo',
store:new Ext.data.SimpleStore({
fields: ['text'],
data: [['1'],['2'],['3'],['4']]
}),
emptyText:'请选择',
mode:'local',
triggerAction:'all',
valueField:'text',
displayField:'text',
readOnly:true
}
],
buttons: [{
text:'提交',
handler:function() {
store.baseParams= {id:'',gameName:'',serverName:'',begin:'',finish:'',gameType:''};
store.baseParams.id= form.items.get(0).getValue();
store.baseParams.gameName= form.items.get(1).getValue();
store.baseParams.serverName= form.items.get(2).getValue();
store.baseParams.begin= form.items.get(3).getValue();
store.baseParams.finish= form.items.get(4).getValue();
store.baseParams.gameType= form.items.get(5).getValue();
store.reload();
}
},{
text:'清空',
handler:function() {
form.getForm().reset();
form.buttons[0].setText('提交');
}
}]
});

grid=new Ext.grid.GridPanel({
store: store,
columns: [
{header:"id", dataIndex:'id'},
{header:"gameName", dataIndex:'gameName'},
{header:"serverName", dataIndex:'serverName'},
{header:"begin", dataIndex:'begin'},
{header:"finish", dataIndex:'finish'},
{header:"gameType", dataIndex:'gameType'}
],
width:600,autoHeight:true,//frame:true, title:'EXAMPLE',
renderTo:'grid_pad'
});

});</script><divid="pad"></div><divid="grid_pad"></div>

test1.asp
HTML code<%If Request("gameName")<>""Then
id= Request("id")
gameName= Request("gameName")
serverName= Request("serverName")
begin= Request("begin")
finish= Request("finish")
gameType= Request("gameType")'查询生成数据%>
{root:[{id:1<%=id%>,gameName:'<%=gameName%>',serverName:'<%=serverName%>',begin:'<%=begin%>',finish:'<%=finish%>',gameType:'<%=gameType%>'}]}<%Else%>
{root:[{id:1,gameName:'xx',serverName:'xxx',begin:'2009-1-1',finish:'2009-1-1',gameType:11}]}<%EndIf%>
[/Quote]

这个代码可以提交，后台的代码也可以执行，但是无法显示~

ext 条件查询grid显示的问题（菜鸟问题）~

相关推荐