本文主要实现的效果是:点击查询按钮,根据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-----------------------------------------------------------------------------------

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

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

extj6.0写增删查改(1)-------查询的更多相关文章

  1. Extjs6(六)——增删查改之查询

    本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onS ...

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

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

  3. 3.EF 6.0 Code-First实现增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-entity-framework-5-0-code- ...

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

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

  5. 6.在MVC中使用泛型仓储模式和依赖注入实现增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  6. 5.在MVC中使用泛型仓储模式和工作单元来进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  7. 在MVC中使用泛型仓储模式和工作单元来进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  8. 在MVC中使用泛型仓储模式和依赖注入实现增删查改

    标签: 原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository ...

  9. jQuery-DOM增删查改

    1.绑定事件 $().事件名(function(){功能}) 事件名:鼠标事件 键盘事件 表单事件 事件委托:$().on('事件名',#####'target',function(){功能}) 额外 ...

随机推荐

  1. html 框架 2017-03-11

    1. 框架frameset   (不在body中编写) Eg: 显示如下框架 第一步: <frameset rows="100,100,*" frmameborder=&qu ...

  2. 【转】nginx配置:location配置方法及实例详解

    location匹配的是nginx的哪个变量? $request_uri location的匹配种类有哪些? 格式 location [ 空格 | = | ~ | ~* | !~ | !~* ] /u ...

  3. 【CNMP系列】VIM编辑器详解

    缘起 大学的时候做过Linux内核驱动程序研发,之前写C语言就是用的Vim编辑器,当年的Vim还不如今天之强大,当时的插件也没有现在这么多,只是觉得这个编辑器能满足我想要的所有,查看Linux内核代码 ...

  4. sqrt()平方根计算函数的实现1——二分法

    C语言标准库: http://www.cplusplus.com/reference/cmath/ 在一个区间中,每次拿中间数的平方来试验,如果大了,就再试左区间的中间数:如果小了,就再拿右区间的中间 ...

  5. 打印时鼠标键盘移动的div创建

    function createDiv(id, label, offset_left, offset_top) { $("body").append($("<div& ...

  6. Node.js编程之异步

    异步操作 Node采用V8引擎处理JavaScript脚本,最大特点就是单线程运行,一次只能运行一个任务.这导致Node大量采用异步操作(asynchronous opertion),即任务不是马上执 ...

  7. 深入PHP变量存储结构 标签: PHP存储

    1.深入PHP变量存储结构 标签: PHP存储  分类: 编程语言(10)  首先声明,我并没有去读PHP的源码,只是对于PHP的有时候诡异的表现感兴趣,找了一下开发人员laruence的博客结合PH ...

  8. 老李分享:《Linux Shell脚本攻略》 要点(七)

    老李分享:<Linux Shell脚本攻略> 要点(七)   1.显示给定文件夹下的文件的磁盘适用情况 [root@localhost program_test]# du -a -h ./ ...

  9. 如何在IDEA中调试 Jar文件

    原创文章,转载请注明出处:http://www.cnblogs.com/acm-bingzi/p/6668333.html   问题: 一般情况下,可以打成Jar包的项目,它的源码运行Applicat ...

  10. cmd输入svn提示svn不是内部或外部命令

    已经安装了svn,但是在cmd中输入svn命令的时候提示svn不是内部或外部命令是因为没有安装svn client. 解决办法: windows安装svn的时候默认是不安装 svn comand li ...