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

H~~~ 2009-08-28 09:07:52
提交一个表单，包括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('提交');

            }

        }]

    });
...全文
544 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
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的宽度高度如何自适应
一个常见问题的解决——Ext grid的宽度高度如何自适应
Ext Grid 中增加复选框并设置回填功能
Ext.grid.CheckColumn.prototype = {  init : function(grid) {   this.grid = grid;   this.grid.on('render', function() {   var view = this.grid.getView();   view.mainBody.on
java程序员菜鸟进阶（十一）Extjs4常用功能（三）——列表grid的使用（带综合查询，分页）...
在开发中，显示数据库表中的列表功能是很常用的功能，一般列表都会带有综合查询和分页功能，在extjs4中为我们提供了强大的列表grid功能，在此记录一下，算是做个备忘 var mystore = Ext.create('Ext.data.Store',...
Ext Grid 查询并能分页的代码
最终完整代码为 [code="java"] onQueryWinSubmit:function(win,rec){ ... var _form = win.form.getForm().getValues();...// var _r = Ext.applyIf(_form,{start:0,... var _d = Ext.util.JS...
extjs的grid控件如何根据值来设置某行的背景颜色
根据不同的值来设置grid的背景颜色 在viewConfig里面配置getRowClass就行了，例： 先自定义一个CSS： .my_row_Red table{ background:Red} ...var QueryGrid=new Ext.grid.GridPanel({  frame:t
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章