//54814002-25516950
//54814002-25516950
//54814002-25516950
//54814002-25516950
//54814002-25516950
13795211360 lj
15710126915 zyx
3310+339+261+325+205+294+199+74=
/**
*
*/
Ext.require([
'Ext.query.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
Ext.onReady(function() {
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
'Property',
'Value 1',
'Value 2'
]
});
Ext.tip.QuickTipManager.init();
// Define the model for a State
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'label'},
{type: 'string', name: 'value'}
]
});
var states = [{"label":"abc", "value":"abc"}, {"label":"bcde","value":"bcde"}, {"label":"ace","value":"ace"}];
var statesStore = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});
var combo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: '<b>Subject</b>',
renderTo: 'inputSubject',
displayField: 'label',
width: 300,
labelWidth: 80,
store: statesStore,
queryMode: 'local',
typeAhead: true,
transform: 'inputSubject',
forceSelection: true
});
combo.on('beforequery',function(e){
var combo = e.combo;
if(!e.forceAll){
var value = e.query;
combo.store.filterBy(function(record,id){
var text = record.get(combo.displayField);
return (text.indexOf(value)!=-1);
});
combo.expand();
return false;
}
});
var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
},
sorters: [{
property: 'email',
direction: 'ASC'
}]
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Content',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
// { //header: 'Name',
//dataIndex: 'name',
// flex:1
// },
{
name: "name",
hidden: false,
hideable: true,
header: "Name",
editor: {
xtype: "combo",
typeAhead: true,
triggerAction:"all",
lazyRender: true,
listClass: "x-combo-list-small",
store:[
[ "0" , "Staff Account" ], //the value at index 0 is
//assumed to be the combo value
[ "1" , "Admin Account" ], //the value at index 1 is
//assumed to be the combo text
[ "2" , "Super Account" ]
]
},
width:150
},
{ header: 'Email',
dataIndex: 'email',
flex:1,
editor: {
allowBlank: true
}
},
{ header: 'Phone',
dataIndex: 'phone',
flex:1,
editor: {
allowBlank: true
}
}
],
height: 300,
width: 800,
renderTo: 'content',
tbar: [{
itemId: 'saveTemplateBtn',
text: '<b>Save Template</b>',
// iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
var store = grid.getStore();
var count = store.getCount();
if(count == 0)
Ext.MessageBox.alert('Warn', 'Please input parameters!');
for(var i=0; i<count; i++) {
var rowData = store.getAt(i).data;
var email = rowData.email;
var phone = rowData.phone;
}
}
}, {
itemId: 'publishBtn',
text: '<b>Publish</b>',
// iconCls: 'employee-remove',
handler: function() {
// var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
// store.remove(sm.getSelection());
// sm.select(0);
store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"a", "email":"a@simpsons.com", "phone":"-1224"},
{"name":"b", "email":"b@simpsons.com", "phone":"-1234"},
{"name":"c", "email":"c@simpsons.com", "phone":"-1244"},
{"name":"d", "email":"d@simpsons.com", "phone":"-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
},
sorters: [{
property: 'email',
direction: 'ASC'
}]
});
store.load();
},
disabled: false
}, {
itemId: 'addRow',
text: '<b>Add Row</b>',
// iconCls: 'employee-remove',
handler: function() {
rowEditing.cancelEdit();
var r = Ext.ModelManager.create({
name: 'Ch',
email: 'charles@citi.com',
phone: '123456'
}, 'Book');
store.insert(0, r);
rowEditing.startEdit(0, 0);
},
disabled: false
}, {
itemId: 'deleteRow',
text: '<b>Delete Row</b>',
// iconCls: 'employee-remove',
handler: function() {
if(grid.getStore().getCount() == 0) return;
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
sm.select(0);
},
disabled: false
}],
plugins: [rowEditing]
});
});
分享到:
相关推荐
本文将深入探讨“图片查看 - jq插件”这一主题,重点关注如何使用jQuery来实现图片的单图查看、多图查看、旋转和放大缩小功能。 首先,我们来看“jQueryViewer”这个文件名,这很可能是一个基于jQuery的图片查看器...
根据提供的标题、描述、标签及部分内容,我们可以了解到这篇文章主要聚焦于介绍“最优秀的50个JQ插件”。这里,“JQ”通常指的是jQuery,一个非常流行的JavaScript库,用于简化HTML文档遍历、事件处理、动画以及Ajax...
"JQ插件第五十六:17种翻页插件"是一个专门解决这个问题的jQuery插件,它提供了丰富的翻页解决方案,适应多种不同的应用场景。 这个插件的核心在于它的灵活性和易用性。只需要提供记录总数、URL以及是否使用AJAX...
"jq 插件 实现拖拽"的主题涉及到了如何利用jQuery来创建一个允许用户通过拖动来移动元素的功能。这个功能在各种应用场景中都非常常见,例如在网页布局、拖放文件上传或交互式界面设计中。 拖拽功能的实现通常涉及到...
标题中的“很爽的jq插件,大家来下载了”暗示了这是一款基于jQuery的高效易用的弹出层插件。描述进一步说明了这款插件的特性,它集成了各种弹出层效果,用户只需进行简单的配置,就能实现丰富的弹出框功能,非常适合...
"JQ插件第五十二:自定义上传HTML控件"就是一个针对这种需求的解决方案,它利用jQuery库来创建一个美观且功能丰富的文件上传组件。这个插件允许用户选择文件,然后在上传成功后展示图片,提供了良好的用户体验。 在...
"JQ插件简单实用步骤条"是一个利用jQuery来创建的用户界面组件,主要用于指导用户按照一系列步骤完成任务,常见于表单提交、注册流程或者多步骤购物体验等场景。这个插件为开发者提供了一个方便、直观的方式来展示和...
"好用文件上传JQ插件"是这样一款工具,旨在简化前端开发人员在实现文件上传时的工作流程。这个插件特别强调了对文件类型的判断、文件路径的获取、文件大小的检测以及预览图的展示等功能,这些都是在实现文件上传时必...
总的来说,"CheckBox美化 jq插件 滑动开关"是一个实用的工具,它结合了jQuery的便利性和滑动开关的交互优势,使得网页上的复选框功能更加生动有趣,同时也提高了用户操作的直观性和效率。在实际开发中,这样的插件...
**jQuery 插件的理解** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。而 jQuery 插件则是开发者为了扩展 jQuery 功能而编写的代码模块。这些插件可以增加新的功能,...
本文将详细讲解如何利用jQuery插件来实现打印功能,具体以"JQ插件调用打印机实现打印功能"为主题,涉及的核心文件有`jquery-1.11.3.min.js`、`jquery.jqprint-0.3.js`和`jquery-migrate-1.2.1.min.js`。 首先,`...
"jq插件生成二维码"是指利用jQuery这一流行的JavaScript库来创建自定义的二维码。jQuery简化了DOM操作,使得在网页上动态生成和展示二维码变得更加便捷。 jQuery QRCode是一个实用的jQuery插件,它允许开发者通过...
【JQ插件3D立体墙动画】是一种利用JavaScript(JS)和CSS3技术实现的交互式网页元素展示效果。这种动画技术常用于网站的图片展示、产品目录或虚拟画廊,为用户带来视觉上的独特体验。在网页设计中,3D立体墙动画通过...
"仿百度图片鼠标移动效果(jq插件)"是一个利用jQuery创建的插件,旨在实现类似百度图片网页上的交互体验。这种效果通常涉及到动态的视觉反馈,当用户鼠标指针从不同方向进入或离开一个容器时,容器会呈现出不同的...
该项目是一个基于微信小程序的wx-jq插件设计源码库,包含246个文件,涵盖65个JavaScript文件、45个JSON配置文件、38个PNG图片、38个wxss样式文件、36个wxml模板文件、7个CSS文件、5个HTML文件、5个JPG图片、2个ACSS...
首先,我们要理解JQ插件的工作原理。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。开发者可以通过创建插件来扩展jQuery的功能,使其满足特定需求。在这个案例中,我们讨论...
jq插件-tojson
"汉字转拼音"是一种常见需求,而"汉字转拼音的JQ插件"正是解决这一问题的有效工具。这个插件小巧而实用,特别适合那些希望快速实现汉字到拼音转换功能的开发者。 jQuery是一款广泛使用的JavaScript库,它简化了DOM...
【jq插件】Grade-打分效果是一种常见的前端交互功能,用于实现用户对内容或服务进行评分。在网页设计中,这种打分效果通常通过JavaScript库,尤其是jQuery来实现,以提供动态、友好的用户体验。本插件的核心是利用...
jq插件简单例子