ExtJS基础知识总结:常用控件使用方式(一)
概述
最近一直在做相关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基础知识总结:常用控件使用方式(一)的更多相关文章
- B/S一些小知识及常用控件
一: B/S网页的运行 页面在设计的时候,本身就是一个类.在运行的时间,是一个对象. 其中aspx和aspx.cs是在同一个类下. aspx是主要是负责界面,而aspx.cs主要是负责数据逻辑. 呈现 ...
- Android学习之基础知识五—ListView控件(最常用和最难用的控件)
ListView控件允许用户通过上下滑动来将屏幕外的数据拉到屏幕内,把屏幕内的数据拉到屏幕外. 一.ListView的简单用法第一步:先创建一个ListViewTest项目,在activity_mia ...
- qt 5 基础知识 2(控件篇)
QVBoxLayout *lay = new QVBoxLayout(this); // 创建一个竖直的盒子 lebel 篇 lay->addWidget(label = new QLabel( ...
- winform快速开发平台 -> 基础组件之分页控件
一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...
- MFC编程入门之二十二(常用控件:按钮控件Button、Radio Button和Check Box)
本节继续讲解常用控件--按钮控件的使用. 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box)等.命令按钮就是我们前面多次提到的侠义的 ...
- MFC之常用控件(四)
常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控件.列表控件.树形控件和进度条控件等等.本节教程先来讲解静态文本框的使用. 控件的通知消息 在将静态文本框的使用之 ...
- [转]easyui常用控件及样式API中文收藏
[转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报 分类: java ee(5) 目录(?)[+] CSS类定义: div easyu ...
- GUI创建各常用控件(二)
继续接着上一篇! 在我看来有一点需要申明:由于是GUI的相关知识,所以我只是在复习中粗略的总结而已,因此参考价值可能有限,更多的是当作自己学习的一个记录以及便于自己查阅. 好啦!干货继续: 1.类似于 ...
- Winform控件学习笔记【第二天】——常用控件
背景:期末考试刚过就感冒了,嗓子火辣辣的,好难受.但是一想起要学习总结就打起精神来了,Winform控件网上也没有多少使用教程,大部分都是自己在网上零零散散的学的,大部分用的熟了,不总结会很容易忘得. ...
随机推荐
- BZOJ4516: [Sdoi2016]生成魔咒
果然SA比SAM+map快~加了fread目前rank1. 首先这是SAM裸题,然而SA求本质不同子串个数也很容易.考虑倒着建SA,这样没错加一个字符就变成加一个后缀,其他后缀都不变,那么i的答案就是 ...
- 配置LVS + Keepalived高可用负载均衡集群之图文教程
负载均衡系统可以选用LVS方案,而为避免Director Server单点故障引起系统崩溃,我们可以选用LVS+Keepalived组合保证高可用性. 重点:每个节点时间都同步哈! C++代码 [r ...
- Matlab编程知识点
容易忘记的小知识点: Matlab程序首行程序: clear:close all:clc:程序运行开始最好清理下之前残留的各种数据,不然matlab可能会出错. clear(清理变量空间),close ...
- 日期格式转换 java 2016-09-03T00:00:00.000+08:00
/** * 日期格式转换yyyy-MM-dd'T'HH:mm:ss.SSSXXX (yyyy-MM-dd'T'HH:mm:ss.SSSZ) TO yyyy-MM-dd HH:mm:ss * @ ...
- MySql简易配置
选择standard configuration ,然后next Service Name :服务名字 Launch the MySQL Server automatically:是否开机启动mysq ...
- 【bzoj1700】Problem Solving 解题
题目描述 过去的日子里,农夫John的牛没有任何题目. 可是现在他们有题目,有很多的题目. 精确地说,他们有P (1 <= P <= 300) 道题目要做. 他们还离开了农场并且象普通人一 ...
- 使用php+swoole对client数据实时更新(下)
上一篇提到了swoole的基本使用,现在通过几行基本的语句来实现比较复杂的逻辑操作: 先说一下业务场景.我们目前的大多数应用都是以服务端+接口+客户端的方式去协调工作的,这样的好处在于不论是处在何种终 ...
- svn sync主从同步学习
svn备份的方式有三种: 1svnadmin dump 2)svnadmin hotcopy 3)svnsync. 优缺点分析============== 第一种svnadmin dump是官方推荐 ...
- angularjs $scope.$watch(),监听值得变化
myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval ...
- java模拟post请求发送json
java模拟post请求发送json,用两种方式实现,第一种是HttpURLConnection发送post请求,第二种是使用httpclient模拟post请求, 方法一: package main ...