概述

  最近一直在做相关ExtJs方面的项目,遇到了ExtJs使用方面的一系列问题,现在将使用技巧做个记录汇总,以便于下次能够快速使用。以下都是ExtJs控件的常用方法,做简单汇总,俗话说,好记星不如烂笔头,总一天会使用的。

基础控件使用技巧

1、Grid表格操作:获取Store的数据信息和操作列表行数据

//创建一个grid
var rowPanel = Ext.create('Ext.grid.Panel', {}); //获取grid对应的Store的数据条数
rowPanel.getStore().getCount(); //将grid第2列设置为不选中
rowPanel.getSelectionModel().deselect(); //获取grid正在使用的选择模型,将grid全部不选中
rowPanel.getSelectionModel().deselectAll();
rowPanel.getSelectionModel().clearSelections(); //清除勾选 //判断grid的第一列是否选中
rowPanel.getSelectionModel().isSelected(); //将grid的对应的store数据相同arr选中
rowPanel.getSelectionModel().select(arr); //获取选中grid数据长度
grid.getSelectionModel().getSelection().length; //获取选中grid数据第1行的数据ID
grid.getSelectionModel().getSelection().obj[].get("Id");
grid.getSelectionModel().getSelection().obj[].getId(); //store的each使用:
rowPanel.getStore().each(function (record) {
var operationIdAll = record.data.Id;//获取数据ID
//处理逻辑
}); //获取store的index为1的数据id
rowPanel.getStore().getAt().data.Id; //移除所有数据
rowPanel.getStore().removeAll()

2、设置控件的值setValue:

//发票类型
var invKind: Ext.data.IStore = ({
fields: ["name", "id"],
data: [
{ name: "全部", id: "" },
{ name: "启用", id: "Ordinary" },
{ name: "禁用", id: "Special" }
]
});
items: [{
flex: 0.2,
xtype: "combobox",
store: invKind,
displayField: "name", //显示出来的是name
valueField: "id", //值是id
fieldLabel: " 启用状态", //label
editable: false, //不可编辑
id: "invkind", //id
labelWidth:
}
]
//设置第一项选中
invkind对应的数据源自动加载数据,之后设置0
Ext.getCmp("invkind").setValue("");

3、ExtJS异步请求Ajax

/*************************************Ext Ajax数据请求*****************************/
Ext.MessageBox.confirm("提示", "你确定要禁用吗?",
function (btn) {
if (btn == "yes") {
Ext.Ajax.request({
url: '/User/userEnable',
method: "POST",
params: {
userID: ids,
isDisabled: '禁用'
},
waitMsg: '正在启用数据...',
waitTitle: '提示',
success: function (reps) {
Ext.MessageBox.alert('提示', '禁用成功!');
store.load();
},
failure: function (reps) {
Ext.MessageBox.alert("提示", '禁用失败!');
}
});
}
});

4、Form表单提交

/**********获取Form数据,提交*****************************/
function saveUser_ajaxSubmit4() {
new Ext.form.BasicForm('userForm').submit( {
waitTitle : '请稍后...',
waitMsg : '正在保存用户信息,请稍后...',
url : 'user_save.action',
method : 'post',
success : function(form, action) {
alert(action.result.msg);
},
failure : function(form, action) {
alert(action.result.msg);
}
});
} /**********获取Form数据,重置值*****************************/
formPanel_ResetPwd.form.reset();

5、ExtJs弹窗等待

//弹窗等待

Ext.get("btn5").on("click", function () {
Ext.MessageBox.wait("正在处理,请稍候...", "等待");
Ext.defer(function () {
Ext.MessageBox.close();
}, );
});

6、checkboxgroup的使用:change事件监控

{
xtype: "checkboxgroup",
id:"cbgsmdetailmerge",
margin: '0 0 0 15',
width: ,
fieldLabel: "狗子",
style: 'color:red;',
columns: ,
//flex: 1,
items: [
{
boxLabel: "宠物狗", id: "cbsmproductinfo", name: "cbsmproductinfo", inputValue: "", checked: true, listeners: {
change: function (v, v1, v2) {
alert(v1);
}
} }
]
}
, {
xtype: "checkboxgroup",
id: "cbgsmordermerge",
fieldLabel: "熊猫",
columns: ,
width: ,
style: 'color:red;',
//flex: 1,
items: [
{ boxLabel: "熊猫1", id: "cbsmcustomer", name: "cbsmcustomer", inputValue: "", checked: true },
{
boxLabel: "熊猫2", id: "cbsmproducttax", name: "cbsmproducttax", inputValue: "", checked: true
},
{
boxLabel: "熊猫3", id: "cbsmproductline", name: "cbsmproductline", inputValue: "", checked: false
}
]
, listeners: {
change: function (v) {
var r = v.getChecked();
for (var i = ; i < r.length; i++)
{
if (r[i].name == "cbsmproducttax")
{
Ext.getCmp("cbsmcustomer").setValue("");
}
if (r[i].name == "cbsmproductline") {
Ext.getCmp("cbsmcustomer").setValue("");
}
}
}
}
}

ExtJS基础知识总结:常用控件使用方式(一)的更多相关文章

  1. B/S一些小知识及常用控件

    一: B/S网页的运行 页面在设计的时候,本身就是一个类.在运行的时间,是一个对象. 其中aspx和aspx.cs是在同一个类下. aspx是主要是负责界面,而aspx.cs主要是负责数据逻辑. 呈现 ...

  2. Android学习之基础知识五—ListView控件(最常用和最难用的控件)

    ListView控件允许用户通过上下滑动来将屏幕外的数据拉到屏幕内,把屏幕内的数据拉到屏幕外. 一.ListView的简单用法第一步:先创建一个ListViewTest项目,在activity_mia ...

  3. qt 5 基础知识 2(控件篇)

    QVBoxLayout *lay = new QVBoxLayout(this); // 创建一个竖直的盒子 lebel 篇 lay->addWidget(label = new QLabel( ...

  4. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

  5. MFC编程入门之二十二(常用控件:按钮控件Button、Radio Button和Check Box)

    本节继续讲解常用控件--按钮控件的使用. 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box)等.命令按钮就是我们前面多次提到的侠义的 ...

  6. MFC之常用控件(四)

    常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控件.列表控件.树形控件和进度条控件等等.本节教程先来讲解静态文本框的使用. 控件的通知消息 在将静态文本框的使用之 ...

  7. [转]easyui常用控件及样式API中文收藏

    [转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报  分类: java ee(5)  目录(?)[+] CSS类定义: div easyu ...

  8. GUI创建各常用控件(二)

    继续接着上一篇! 在我看来有一点需要申明:由于是GUI的相关知识,所以我只是在复习中粗略的总结而已,因此参考价值可能有限,更多的是当作自己学习的一个记录以及便于自己查阅. 好啦!干货继续: 1.类似于 ...

  9. Winform控件学习笔记【第二天】——常用控件

    背景:期末考试刚过就感冒了,嗓子火辣辣的,好难受.但是一想起要学习总结就打起精神来了,Winform控件网上也没有多少使用教程,大部分都是自己在网上零零散散的学的,大部分用的熟了,不总结会很容易忘得. ...

随机推荐

  1. Net中对Object的定义

    如果你问一个.Net程序员什么是Object,他可能会信誓旦旦的告诉你"Object还不简单吗,就是所有类型的基类"这个答案是对的,但是不足以说明Object真正是什么 好在HTM ...

  2. SharePoint "System.Data.SqlClient.SqlException (0x80131904): Parameter '@someColumn' was supplied multiple times.“

    最近在处理SharePoint Office365的相关开发的时候发现了这样一个奇怪的现象: 无法通过API更新Editor field,只要已更新就会throw Exception,由于是Offic ...

  3. 【转】机器学习教程 十四-利用tensorflow做手写数字识别

    模式识别领域应用机器学习的场景非常多,手写识别就是其中一种,最简单的数字识别是一个多类分类问题,我们借这个多类分类问题来介绍一下google最新开源的tensorflow框架,后面深度学习的内容都会基 ...

  4. 关于MapReduce中自定义分组类(三)

    Job类  /**    * Define the comparator that controls which keys are grouped together    * for a single ...

  5. AD域-让共享目录只显示用户有权限访问的文件夹

    问题: 在AD域中,我们一般都会用到共享,如果有很多部门,我们可能还会按部门.职位配置权限.比如CSD,IT,PA等,但文件夹一多,用户看着就头大,而且用户没权限访问的文件夹误点击进去还会提示无权限访 ...

  6. netlink优势

    netlink相对其他应用进程和内核之间通信的方式(ioctrl或者系统文件等方式),全双工,可由内核发起,应用进程可用epoll监听,而其他方式只能由应用进程发起. 顺便记下隧道,隧道可以通过在ip ...

  7. linux防火墙开启端口

    1.使用命令查看端口开启情况(下图为安装时未选择开启防火墙) [root@fullstack ~]# iptables -L -n Chain INPUT (policy ACCEPT) target ...

  8. CentOS 6.5 编译 PHP-7 报错:undefined reference to `libiconv_open 无法编译 PHP libiconv

    ./configure --with-mysql=/backup/mysql --with-freetype-dir --with-jpeg-dir --with-png-dir --with-zli ...

  9. SLF4J: Class path contains multiple SLF4J bindings.

    库冲突导致的异常,由于多次引入SLF4j包导致. It seems you have several implementation of SLF4J; you should exclude all t ...

  10. CNN车型分类总结

    最近在做一个CNN车型分类的任务,首先先简要介绍一下这个任务. 总共30个类,训练集图片为车型图片,类似监控拍摄的车型图片,训练集测试集安6:4分,训练集有22302份数据,测试集有14893份数据. ...