ExtJS Query Implementation

Above

Page code:

5Ext.QuickTips.init ();//put on the icon will automatically prompt the message6  7Ext.define (' ExtApp.view.StudentList ' , {8Extend: ' Ext.grid.Panel ' ,9ID: ' Studentlistgrid ' ,TenXtype: ' Studentlist ' , OneStore: ' Studentlist ' ,     ADraggable:false,//set to False to disable drag-and-drop to change the column order, -Columnlines:true,//add a column's border style - viewconfig: { theStriperows:true //true to change the color for interlaced -     },     - Tbar: [{ -Xtype: ' Form ',     +ID: ' QUERYFORMSL ' ,         -Width: ' 100% ', + items: [{ AXtype: ' Container ', atPadding:5, -Flex:2, - layout: { -Type: ' Hbox ' -             }, - items: [{ inLabelwidth:60, -LabelAlign: ' Right ',     towidth:200,             +Xtype: ' Combo ', -Fieldlabel: ' Select Grade ', theName: ' Gradecode ',             *ID: ' Cobstudentlistgradecode ', $Store: ' Grade ',                Panax NotoginsengValuefield: ' Gradecode ', -Displayfield: ' Gradename ',                 theEditable:false, +Emptytext: ' Please choose Grade ', AQuerymode: ' Local ' the                  +                },{ -Xtype: ' TextField ',                             $Labelseparator: ': ', $labelwidth:150, -width:300, -LabelAlign: ' Right ',                             theID: ' Slisttextfield ', -Name: ' Usernameorusercode ',WuyiFieldlabel: ' Enter student ID or student name ' the             },{ -Xtype: ' button ', WuID: ' Btnstulistquery ', -Text: ' Query ' About             },{ $Xtype: ' button ', -ID: ' Btnstulistreset ', -Text: ' Reset ' -             }] A         }] +     }], the columns: [ -{xtype: ' Rownumberer ', text: ' Serial number ', flex:1, align: ' center '}, ${text: ' Account ID ', flex:2, align: ' center ', dataindex: ' Usercode ' }, the{text: ' User name ', flex:1, align: ' center ', dataindex: ' UserName '}, the{text: ' Sex ', flex:1, align: ' center ', dataindex: ' Sex '    }, the{text: ' City ', flex:1, align: ' center ', dataindex: ' CityName '    }, the{text: ' School ', flex:1, align: ' center ', dataindex: ' Schoolname '},     -{text: ' Grade ', flex:1, align: ' center ', dataindex: ' Gradecode '},     in{text: ' Contact phone ', flex:2, align: ' center ', Dataindex: ' Tel '}, the{text: ' mailbox ', Flex:2, align: ' center ', dataindex: ' Email '}, the{text: ' QQ ', Flex:2, align: ' center ', dataindex: ' QQ '},             About{header: ' Account registration Time ', align: ' center ', Flex:3,dataindex: ' Firstaccessdate ', xtype: ' Datecolumn ', format: ' Y-m-d h:i:s '}, the{header: ' Details ' , theXtype: ' Actioncolumn ' , theWidth:50 , +Flex:1 , -Align: ' center ', the items: [{BayiIcon: ' Images/grid.png ' ,  theToolTip: ' More info ' , theHandlerfunction(grid, RowIndex, Colindex) { -                     varRecord =Grid.getstore (). GetAt (RowIndex); -                     varWin = ext.create (' ExtApp.view.StudentDetails '). Show (); the                     varform = Win.down (' form '). GetForm ();  the Form.loadrecord (record); the                 }                     the             }] -         } the     ],     the dockeditems:[{ theXtype: ' Pagingtoolbar ',      94Store: ' Studentlist ',//data used in the Gridpanel theDock: ' Bottom ', theDisplayInfo:true the     }]    98});

Click the "Query" button to trigger the event:

1Stulistquery:function(btn,event) {2         varStore= This. GetStore (' Studentlist ');3         varForm=btn.up (' FORM[ID=QUERYFORMSL] ');4         varGrid=form.up (' Grid[id=studentlistgrid] ');5         //var grid=ext.getcmp (' Studentlistgrid ');6         varPagebar = Grid.down (' Pagingtoolbar ')); 7         varUsernameorusercode=form.getform (). GetValues () [' Usernameorusercode ']; form.getForm.getValues () returns an array 8         varGradecode = Form.getform (). GetValues () [' Gradecode ']; 9 Store.setproxy ({TenType: ' Ajax ', One actionmethods:{ AREAD: ' POST ' -             }, -URL: ' Querystudent.action ', theextraparams:{' Usernameorusercode ': Usernameorusercode, -' Gradecode ': Gradecode -                         }, - reader:{ +Type: ' JSON ', -Root: ' Rows ', +Totalproperty: ' Results ' A             }             at         }); - Pagebar.movefirst (); -},

Find the way to find the components in ExtJS Form,extjs:

1,extjs.getcmp

2, through the relationship between components, Up,down

ExtJS Query Implementation