什么是Linux 什么又是web服务器
2016-03-05 14:26
656 查看
这几天学习ext 做了一个简单的ext grid
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"> <script src="./ext/adapter/ext/ext-base.js"></script> <script src="./ext/ext-all-debug.js"></script> <script type="text/javascript"> Ext.onReady(function(){ //================data================ var store = new Ext.data.Store({ data: [ [ 1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1 ],[ 3, "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 2, "Altered State Police", "14.95", 1 ] ], reader: new Ext.data.ArrayReader({id:'id'}, [ 'id', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', 'price', 'available' ]) }); var genres = new Ext.data.SimpleStore({ fields: ['id', 'genre'], data : [['1','男'],['2','女']] }); //======================end data============== //======================data model=========================== var ds_model = Ext.data.Record.create([ 'id', 'coverthumb', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', {name: 'price', type: 'float'}, {name: 'available', type: 'bool'} ]); //======================end data model========================== //=======================editor================================= var title_edit = new Ext.form.TextField(); var director_edit = new Ext.form.TextField({vtype: 'name'}); var tagline_edit = new Ext.form.TextField({ maxLength: 10 }); var release_edit = new Ext.form.DateField({ format: 'Y-m-d'}); var genre_edit = new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', mode: 'local', store: genres, displayField:'genre', valueField: 'id' }); var genre_name = function(val){ return val==1?'男':'女'; }; //=============================end editor======================== //=========================validate====================================== Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+ [A-Z][A-Za-z\-]+$/; Ext.form.VTypes['nameMask'] = /[A-Za-z\- ]/; Ext.form.VTypes['nameText'] = 'In-valid Director Name.'; Ext.form.VTypes['name'] = function(v){ return Ext.form.VTypes['nameVal'].test(v); } //=========================end validate================================== //========================panel============================ var grid = new Ext.grid.EditorGridPanel({ renderTo: document.body, frame:true, title: 'Movie Database', height:200, width:517, clickstoEdit:1, store: store, selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//singleSelect为false 否则无法删除 //=====================tool bar======================================== tbar: [{ text: 'Remove Movie', //icon: './ext/resources/images/default/toolbar/tb-btn-sprite.gif', handler: function() { var sm = grid.getSelectionModel(); var sel = sm.getSelected(); if (sm.hasSelection()){ Ext.Msg.show({ title: 'Remove Movie', buttons: Ext.MessageBox.YESNOCANCEL, msg: 'Remove '+sel.data.title+'?', fn: function(btn){ if (btn == 'yes'){ grid.getStore().remove(sel); } } }); }; } },{ text: 'Add Movie (First)', //icon: './ext/resources/images/default/toolbar/tb-btn-sprite.gif', handler: function() { grid.getStore().insert( 0, new ds_model({ title:'New Movie', director:'', genre:0, tagline:'' }) ); grid.startEditing(0,0); } },{ text: 'Add Movie (Last)', handler:function(){ grid.getStore().insert( grid.getStore().getCount(), new ds_model({ title:'New Movie', director:'', genre:0, tagline:'' }) ); grid.startEditing(grid.getStore().getCount()-1,0); } }], //==================================end toolbal=================== //===========================columns============================== columns: [ {header: "Title", dataIndex: 'title',editor: title_edit}, {header: "Director", dataIndex: 'director',editor: director_edit}, {header: "Released", dataIndex: 'released', renderer: Ext.util.Format.dateRenderer('Y-m-d'), editor:release_edit}, {header: "Genre", dataIndex: 'genre',renderer:genre_name,editor:genre_edit}, {header: "Tagline", dataIndex: 'tagline',editor: tagline_edit} ], //=========================end columns============================= //=====================listeners=================== listeners: { afteredit: function(e){ if (e.field == 'director' && e.value == 'Mel Gibson'){ Ext.Msg.alert('Error','Mel Gibson movies not allowed'); e.record.reject(); }else{ e.record.commit(); } } } //===================end listeners================= }); }); </script> </head> <body> </body> </html>
相关文章推荐
- Linux内核分析作业第二周
- 学习linux决心书
- linux下面自动打包备份并且删除5 天前的文件
- linux分页机制
- arm-linux-gnueabi-gcc/g++ 编译opencv
- 安装zookeeper
- linux 数组的简单总结
- linux ---jenkins的安装与配置
- linux 下的编程效率分享
- CentOS7安装mysql数据库
- Linux学习之路——目录解释
- “Linux内核分析”实验报告二
- Linux14.04 下安装Swift
- centos下cp -r 命令可拷贝文件夹
- linux学习之c语言swap函数
- 查看linux下mysql版本
- 解决Linux 下 root用户删除文件提示:Operation not permitted
- 常用的linux命令
- Redhat Linux上mysql安装-binary package安装
- centos配置虚拟主机多网站