本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据)

一、静态页面

1、查询按钮

        {
text:'查询',
handler: 'onSearch'
},

2、写查询条件的form

     {
fieldLabel: '条件一',
name: 'code',
minWidth: 180
},
{
fieldLabel: '条件二',
name: 'name',
minWidth: 180
}

3、显示数据的Grid

//store要create一下,要不然取不到

store:Ext.create('app.store.system.organization.OrganizationListStore',{
        storeId:'organizationListStore'
  }),

//**********************************

columns: [

        {
text: '组织编码',
dataIndex: 'organizationCode',
flex: 1,
minWidth:135
},
{
text: '组织名称',
dataIndex: 'organizationName',
flex: 2,
minWidth:180
}
],
});

二、写查询按钮的点击事件onSearch及store

1、onSearch,写在controller里面

  onSearch: function () {var form = this.getView().lookupReference('organizationList-main').lookupReference('organizationListForm');//取得查询条件form,getView得到引用了controller的页面,lookupReference方法下面说
var data = {};
form.getForm().getFields().each(function() { //遍历form
var name = this.getName();
var value = this.getValue();
if(value instanceof Array && value != null){ //若value不为空 且是Array类型
value = value.join(","); //给value中的值用逗号隔开
}
data[this.getName()] = value; //把value放到data里
}); var organizationGrid = this.getView().lookupReference('organizationList-main').lookupReference('organizationListGrid'); //取得grid
OrganizationListStore = organizationGrid.store; //取得store OrganizationListStore.on('beforeload', function (OrganizationListStore) {
OrganizationListStore.getProxy().extraParams = data; //把data中的搜索条件传入store中
}); OrganizationListStore.load({ //分页的时候写,加载后起始页码
params: {
start: 0,
page:1
}
});
},

2、store

ajax请求,post方法,数据存放在body中

proxy: {
type: 'ajax',
url: xxxxx/find,
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
rootProperty: 'body'
},
paramsAsJson: true
},
autoLoad: false

三、重置form

  1、重置按钮

      {
text:'重置',
iconCls:'x-fa fa-refresh',
handler: 'reset'
}

  2、重置函数reset

    通过lookupReference找到form,然后对form进行重置。

Ext.define('Learning.view.personalInfo.personalController', {
extend: 'Ext.app.ViewController', alias: 'controller.personalInfo', reset: function () {
var form = this.getView().lookupReference('personalForm');
form.getForm().reset();
},
});

  

四、其它(关于各种get)

1、Ext.getCmp("id名");

  通过id获取,要给对象加一个id属性。

  注:id是唯一的,也就是在整个项目中都不能有重复的id名,否则就会出错,所以用reference显然更好。

2、getView()

  得到整个页面。

  如this.getView(),就是得到当前controller所在的页面。

3、lookupReference('reference值')  (这个好像没有get呀,哈哈)

  在需要用到reference的父页面加入  referenceHolder: true,

  然后给对象加上reference属性。

4、getSelection() , getLastSelected()

  得到被选中的对象,得到最后被选中的对象。

  例如:得到选择框选中的那个对象 xxxx.selModel.getSelection();

5、get('一个form的name')

  得到这个name的form中的值。

6、getForm() , getName() , getValue()  , getProxy()

  都是字面意思。

----------------------------------------------------------------------------------------

补充:

例如:下图是项目中的某一个页面

orderMonitor:是这个页面的主框,由form,grid,toolbar三部分组成

popups:页面的弹框

Controller:逻辑功能

Store:页面加载的数据

END-----------------------------------------------------------------------------------

“金牛,金牛,你对减肥有什么看法呀?”

“我自己挣钱辛苦吃胖的,你凭什么让我减呀!”

Extjs6(六)——增删查改之查询的更多相关文章

  1. ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!

    转自:http://www.cnblogs.com/lt-style/p/3457399.html 数据表: 学生表:学生编号.姓名.性别.班级编号.年龄 班级表:班级编号.班级名称 开发过程: 1. ...

  2. SSH框架的多表查询和增删查改 (方法一)上

    原创作品,允许转载,转载时请务必标明作者信息和声明本文章==>  http://www.cnblogs.com/zhu520/p/7772823.html   因为最近在做Android 练习的 ...

  3. SSH框架的多表查询和增删查改 (方法一)中

    原创作品,允许转载,转载时请务必标明作者信息和声明本文章==>http://www.cnblogs.com/zhu520/p/7774144.html   这边文章是接的刚刚前一遍的基础上敲的  ...

  4. SSH框架的多表查询(方法二)增删查改

     必须声明本文章==>http://www.cnblogs.com/zhu520/p/7773133.html  一:在前一个方法(http://www.cnblogs.com/zhu520/p ...

  5. JavaWeb实现增删查改(图书信息管理)——之查询

     关于此次CRUD所需要的jar包,本人把文件放在了百度网盘,需要的自行去下载: 链接:https://pan.baidu.com/s/1Pqe88u6aPaeVjjOq1YFQ-w  提取码:pim ...

  6. Sql Server的艺术(一) 视图的增删查改

    视图是从一个或者多个表中查询数据的另一种方式.利用视图可以集中.简化定制数据库,同时还能保障安全. 视图其结构和数据是建立在对应的查询基础上的.和表一样,视图也是包括几个被定义的数据列和多个数据行,但 ...

  7. JDBC终章- 使用 DBUtils实现增删查改- C3P0Utils数据源/QueryRunner runner连接数据源并执行sql

    JDBC终章- 使用 DBUtils实现增删查改 1.数据库结构 Create Table CREATE TABLE `user` ( `id` ) NOT NULL AUTO_INCREMENT, ...

  8. json字符串转换成json增删查改节点

    一.功能实现 1.节点树查询: 按ID查询树 2.节点新增: http://host/tree_data/node/${treeId} in: {node: {key: ..., ...}, pare ...

  9. 4.在MVC中使用仓储模式进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-using-the-repository-pattern-in-mvc/ 系列目录: ...

随机推荐

  1. MySQL DECIMAL数据类型

    https://blog.csdn.net/zyz511919766/article/details/49335565

  2. 5 Transforms 转移 笔记

    5 Transforms 转移 笔记   Transforms    Unfortunately, no one can be told what the Matrix is. You have to ...

  3. CSS——BFC

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算 元素若不是bf ...

  4. [转] NTFS Permission issue with TAKEOWN & ICACLS

    (转自:NTFS Permission issue with TAKEOWN & ICACLS - SAUGATA   原文日期:2013.11.19) Most of us using TA ...

  5. Sublime Text 2/3 输入法修复[Ubuntu(Debian)]

    一直想找一个可以替代sublime的IDE主要还是hi因为没有好的方法解决中文输入的问题, 今天在网上找到一个非常不错的方法,亲自实验是可行的,就记录下来了,我的系统是ubuntu16.04 Subl ...

  6. java的回调方式

    经常写js的回调,js的回调很简单,直接传方法名称,但是java中方法不能作为参数传递 但是java中可以传一个对象,在对象中编写多个方法,然后作为参数传递到对象里以后,就可以在适当的时机调用该对象里 ...

  7. h5编写帧动画

    var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame; var ...

  8. 【计算机网络】2.2 Web和HTTP

    第二章第二节 Web和HTTP 这一章中,我们需要讨论5种重要的应用:Web.文件传输.电子邮件.目录服务.P2P:这一节中,我们将讨论Web和它的应用层协议HTTP. Outline Web简介 H ...

  9. 【BIEE】新建用户,并且赋予组BIconsumer,访问BIpublisher报表报错:检索数据xml时出错

    问题描述 今天新建一个用户用户查看报表,并且赋予该用户属于BIConsumer组,但是在访问报表的时候出现以下两个错: 1.xdo格式类的报表 2.RTF模板制作的报表 解决方案: 出现这个问题的原因 ...

  10. [驱动] 一个简单内核驱动,通过qemu调试(1)

    模块 通过在HOST上修改linux kernel源代码,重新编译一个vmlinux,然后,通过qemu根据这个bzImage 启动一个vm,进行调试 #cat drivers/char/test.c ...