ExtJS练手
Ext.onReady(function () { //给grid添加数据源
var store = new Ext.data.JsonStore({
root: 'rows',
totalProperty: 'total',
url: 'RareWords.aspx?opt=init',
fields: ['RWLID', 'RWLNAME', 'CHARACTERS', 'PRONUNCE']
}); function createStore(url) {
return new Ext.data.JsonStore({
root: 'rows',
totalProperty: 'total',
url: url,
fields: ['RWLID', 'RWLNAME', 'CHARACTERS', 'PRONUNCE']
});
} //分页工具栏
var p = new Ext.PagingToolbar({
store: store
, pageSize: 20
, autoWidth: true
, displayInfo: true
, displayMsg: '第{0}条到{1}条,一共{2}条'
, emptyMsg: '没有记录'
});
//列名
var columns = new Ext.grid.ColumnModel([
{
header: '编号',
sortable: true, //设置这个属性进行排序
dataIndex: 'RWLID',
width: 80
}, {
header: '生僻字',
sortable: true, //设置这个属性进行排序
dataIndex: 'RWLNAME',
width: 80
}, {
header: '部首',
sortable: true, //设置这个属性进行排序
dataIndex: 'CHARACTERS',
width: 80
}, {
header: '读音',
sortable: true, //设置这个属性进行排序
dataIndex: 'PRONUNCE',
gridwidth: 80
}
]);
//创建一个Grid
var grid = new Ext.grid.GridPanel({
cm: columns
, loadMask: { msg: '正在加载页面,请稍候...' }
// , width: document.documentElement.clientWidth - 8
// , height: document.documentElement.clientHeight - 5
, width: 600
, height: 600
, autoScroll: true
, collapsible: false
, animCollapse: false
, enableHdMenu: false
, title: '生僻字'
, renderTo: 'RareWords'
, store: store
, bbar: p
, tbar: [{ text: '新增', id: 'btn_add', handler: Add, iconCls: 'newIcon' }, //添加一个生僻字
'-',
{ text: '修改', id: 'btn_sub', handler: Modify, iconCls: 'modIcon' }, //修改生僻字
'-',
{ text: '删除', id: 'btn_del', handler: Delete, iconCls: 'delIcon' },
'->',
{ xtype: 'tbtext', text: '部首:' },
{ xtype: 'textfield', id: 'Characters' },
'-',
{ xtype: 'tbtext', text: '读音:' },
{ xtype: 'textfield', id: 'Prounce' },
'-',
{ text: '查询', handler: Search, iconCls: 'search' } ]
}); //按部首、读音查询
function Search() {
var opt = 'Search';
var characters = Ext.getCmp('Characters').getValue();
var prounce = Ext.getCmp('Prounce').getValue();
//escape
var receive_url = 'RareWords.aspx?opt=' + opt + '&Characters=' + escape(characters) + '&Pronunce=' + escape(prounce); store = createStore(receive_url);
store.reload({ params: { start: 0, limit: 20} });
grid.reconfigure(store, grid.getColumnModel()); $('#dialog input').val('');
};
//初始化数据
query();
function query() {
grid.getStore().reload({ params: { start: 0, limit: 20} });
grid.reconfigure(grid.getStore(), grid.getColumnModel());
};
//定义全局变量
var ID;
var opt = '';
//生僻字弹出层
$('#dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
minWidth: 200,
minHeight: 200,
maxWidth: 400,
maxHeight: 400,
title: '生僻字',
modal: true,
buttons: {
"确定": function () {
var RWLNAME = $('#RWLNAME').val();
var CHARACTERS = $('#CHARACTERS').val();
var PRONUNCE = $('#PRONUNCE').val(); var rnt = requestUrl('RareWords.aspx', { opt: opt, RwlId: ID, RwlName: RWLNAME, Characters: CHARACTERS, Pronunce: PRONUNCE });
$(this).dialog('close');
grid.getStore().reload({ params: { start: 0, limit: 20} });
Ext.Msg.alert('提示', rnt);
},
"关闭": function () {
$(this).dialog('close');
}
}
}); //新增生僻字
function Add() {
//打开遮层
opt = 'Add';
$('#dialog input').val('');
$('#dialog').dialog('open');
}; //修改生僻字
function Modify() {
//选中一条记录
var rows = grid.getSelectionModel().getSelections();
if (rows.length == 0) { alert('请至少选择一条记录'); return; }
opt = 'Update';
$('#dialog').dialog('open');
var RWLID = rows[0].get('RWLID');
var RWLNAME = rows[0].get('RWLNAME');
var CHARACTERS = rows[0].get('CHARACTERS');
var PRONUNCE = rows[0].get('PRONUNCE');
$('#RWLNAME').val(RWLNAME);
$('#CHARACTERS').val(CHARACTERS);
$('#PRONUNCE').val(PRONUNCE);
ID = RWLID;
}; //删除生僻字
function Delete() {
//选中一条记录
var rows = grid.getSelectionModel().getSelections();
if (rows.length == 0) { alert('请至少选择一条记录'); return; }
var RWLID = rows[0].get('RWLID');
var opt = 'Delete';
var receive_url = 'RareWords.aspx';
var data = { 'opt': opt, 'RwlId': RWLID };
if (confirm('你确定要删除吗?')) {
$.ajax({
url: receive_url,
async: false,
data: data,
success: function () {
//删除之后更新页面数据
grid.getStore().reload({ params: { start: 0, limit: 20} });
}
});
}
}; });
ExtJS练手的更多相关文章
- Python学习路径及练手项目合集
Python学习路径及练手项目合集 https://zhuanlan.zhihu.com/p/23561159
- Cocos2d-Lua (练手) 微信打飞机
学习下lua,目前入门级,使用版本为 v3.3 Final For Win,空闲时间不足,只能断断续续写点东西. 一.子弹效果 子弹只做了一种,扇形发射,可以增加扇形大小,子弹的 ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- webpack练手项目之easySlide(三):commonChunks(转)
Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...
- webpack练手项目之easySlide(二):代码分割(转)
在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...
- webpack练手项目之easySlide(一):初探webpack (转)
最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力. webpack是一个前端的打包管理工具,大家可以前往:http:/ ...
- JAVA大数类练手
今天突然看到了OJ上的大数类题目,由于学习了一点大数类的知识.果断水了6道题......都是非常基础的.就当的练手的吧. 学到的只是一些大数类的基本操作.以后多做点这样的题,争取熟练运用水大数题... ...
- Python之路【第二十四篇】:Python学习路径及练手项目合集
Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...
- node论坛练手
当时学node,自己写了个论坛练手,现在看还是有很多问题,有时间好好改改 https://github.com/hitbs228/countdown
随机推荐
- Codevs 1904 最小路径覆盖问题
1904 最小路径覆盖问题 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 大师 Master 传送门 题目描述 Description 给定有向图G=(V,E).设P 是G 的一个 ...
- STL库之单链表:forward_list
class template forward_list <forward_list> template < class T, class Alloc = allocator<T ...
- IOS 学习笔记 2015-03-22 OC-API-日期
一 API 1 NSdate 2 NSDateFormatter 二 适用场景 1 获取当前日期 2 增加时间差 3 比较时间差 4 返回较早时间 5 日期格式话 6 日期转字符串 7 字符串转日期 ...
- top工具
top 显示进程所占系统资源 能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top命令打印出了很多信息,包括系统负载(loadaverage).进程数(Tasks).c ...
- SQL Proc(存储过程)/tran(事物)
存储过程好比C#方法 1.事物写在过程里面,直接调用存储过程 1.1没有参数的过程 /*transaction事物,procedure存储过程*/ create proc CopyTable_1_10 ...
- InkPicture 控件使用_01
private System.ComponentModel.Container components = null; private Microsoft.Ink.InkOverlay m_InkOv ...
- JavaScript学习总结【11】、JS 运动
动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...
- 跨线程操作UI控件
写程序的时候经常会遇到跨线程访问控件的问题,看到不少人去设置Control.CheckForIllegalCrossThreadCalls = false;这句话是告诉编译器不要对跨线程访问作检查,可 ...
- (转载).Net HttpPost的发送和接收示例代码
HttpPost在不同系统进行数据交互的时候经常被使用.它的最大好处在于直接,不像Webservice或者WCF需要wsdl作为一个双方的"中介".在安全性上,往往通过IP限制的方 ...
- POJ 2635 The Embarrassed Cryptographer 大数模
题目: http://poj.org/problem?id=2635 利用同余模定理大数拆分取模,但是耗时,需要转化为高进制,这样位数少,循环少,这里转化为1000进制的,如果转化为10000进制,需 ...