新学Extjs,做一个表单的CRUD,看到网上有介绍rowEditing插件的就想尝试着用用,但是在startEdit(0,0)这句上会报错,提示Uncaught TypeError: Object 0 has no method 'get' 不知道是什么原因,希望能有人帮忙解释一下。附上grid,store,model,controller的部分代码。
希望大家能不吝赐教。
grid:
plugins: [ Ext.create('Ext.grid.plugin.RowEditing', {
pluginId:'rowEditing',
saveBtnText: '保存',
cancelBtnText: "取消",
clicksToEdit: 1
}) ],
store:
Ext.define("staffManagement.store.staffStore",{
extend:"Ext.data.Store",
model:"staffManagement.model.staffModel",
pageSize:4,
proxy:{
type:"ajax",
waitMsg : '数据加载中...',
url:"/SSH/js/loadAllStaffAction.action",
/*url:"/SSH/js/test.json",*/
reader:{
type:"json",
root:"list",
totalProperty :'totalCount'
},
writer:{
type:"json"
}
},
autoLoad:true
});
model:
Ext.define("staffManagement.model.staffModel",{
extend:"Ext.data.Model",
fields:[
{name:"userId",type:"int",srotable:true},
{name:"name",type:"string",srotable:true},
{name:"userPassword",type:"string",srotable:true},
{name:"sex",type:"string",srotable:true},
{name:"birthday",type:"date",srotable:true}
]
});
controller:
Ext.define("staffManagement.controller.staffController", {
extend : "Ext.app.Controller",
init : function() {
this.getGrid = function(button) {
return button.ownerCt.ownerCt;
};
this.control({
"staffGrid button[id=add]" : {
click : function(button) {
var store = Ext.getStore('staffStore');
var adminObj = Ext.create('staffManagement.model.staffModel',{});
store.insert(0,adminObj);
var rowEditing = Ext.getCmp('staffGrid').editingPlugin;
rowEditing.startEdit(0,0);
}
},
问题补充:store:
Ext.define("staffManagement.store.staffStore",{
extend:"Ext.data.Store",
model:"staffManagement.model.staffModel",
pageSize:4,
proxy:{
type:"ajax",
waitMsg : '数据加载中...',
url:"/SSH/js/loadAllStaffAction.action",
/*url:"/SSH/js/test.json",*/
reader:{
type:"json",
root:"list",
totalProperty :'totalCount'
},
writer:{
type:"json"
}
},
autoLoad:true
});
model:
Ext.define("staffManagement.model.staffModel",{
extend:"Ext.data.Model",
fields:[
{name:"userId",type:"int",srotable:true},
{name:"name",type:"string",srotable:true},
{name:"userPassword",type:"string",srotable:true},
{name:"sex",type:"string",srotable:true},
{name:"birthday",type:"date",srotable:true}
]
});
onready:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name:"staffManagement",
appFolder:"admin/staffManagement",
launch:function(){
Ext.create("Ext.container.Viewport",{
items:[{
xtype:"staffGrid",
title:"员工列表"
}]
});
},
controllers:[
"staffController"
]
});
});
grid:
Ext.define("staffManagement.view.staffGrid", {
extend : "Ext.grid.Panel",
alias : "widget.staffGrid",
id : "staffGrid",
/*width:700,
height:350,*/
selModel : {
selType : "checkboxmodel"
},
border : 0,
multiSelect : true,
frame : true,
tbar : [{
xtype : 'button',
text : '添加',
id : 'add'
}, {
xtype : 'button',
text : '删除',
id : 'delete'
}, {
xtype : 'button',
text : '保存',
id : 'save'
}, {
xtype : 'button',
text : '导出',
id : 'excel'
}],
bbar : {
xtype : 'pagingtoolbar',
store : 'staffStore',
dock : 'bottom',
displayMsg:"显示第 {0} 条到 {1} 条记录,一共 {2} 条",
emptyMsg:"没有记录",
beforePageText:'第',
afterPageText:'页 共{0}页',
firstText:'首页',
prevText:'上一页',
nextText:'下一页',
lastText:'尾页',
refreshText:'刷新',
/*displayInfo : true*/
},
enableKeyNav : true,
columnLines : true,
plugins: [ Ext.create('Ext.grid.plugin.RowEditing', {
pluginId:'rowEditing',
saveBtnText: '保存',
cancelBtnText: "取消",
clicksToEdit: 1
}) ],
columns : [{
text:"序号",
dataIndex:"userId",
width:50
},{
text : "姓名",
dataIndex : "name",
width : 150,
field : {
xtype : "textfield"
}
}, {
text : "密码",
dataIndex : "userPassword",
width : 150,
field : {
xtype : "textfield"
}
}, {
text : "性别",
dataIndex : "sex",
width : 40,
field : {
xtype : "textfield"
}
}, {
text : "出生日期",
xtype : "datecolumn",
dataIndex : "birthday",
format : "Y年m月d日",
width : 110,
field : {
xtype : "datefield",
format : "y-m-d"
}
}],
initComponent : function() {
this.editing = Ext.create("Ext.grid.plugin.CellEditing");
this.plugins = [this.editing];
this.callParent(arguments);
},
store : "staffStore"
});
controller:
Ext.define("staffManagement.controller.staffController", {
extend : "Ext.app.Controller",
init : function() {
this.getGrid = function(button) {
return button.ownerCt.ownerCt;
};
this.control({
"staffGrid button[id=add]" : {
click : function(button) {
/*var grid = this.getGrid(button);*/
var store = Ext.getStore('staffStore');
/*var store = grid.getStore();*/
/*var edit = grid.editing;*/
/*var model = store.model;*/
var adminObj = Ext.create('staffManagement.model.staffModel',{});
;
/*edit.cancelEdit();*/
store.insert(0,adminObj);
var rowEditing = Ext.getCmp('staffGrid').editingPlugin;
rowEditing.startEdit(0,0);
/*edit.startEditByPosition({
row : 0,
column : 2
});*/
}
},
"staffGrid button[id=delete]" : {
click : function(button) {
var grid = this.getGrid(button);
var store = grid.getStore();
var records = grid.getSelectionModel().getSelection();
var data = [];
Ext.Array.each(records, function(model) {
data.push(model.get("userId"));
});
alert(data.join(","));
if (data.length > 0) {
Ext.Ajax.request({
url : "/ssh_extjs/csdn/deleteAdmins.action",
params : {
ids : "" + data.join(",") + ""
},
method : "POST",
timeout : 4000,
success : function(response, opts) {
Ext.Array.each(records,
function(model) {
store.remove(model);;
});
Ext.Msg.alert("提示", "删除成功!");
}
});
} else {
Ext.Msg.alert("提示", "你没有选中数据,不能执行操作!");
}
}
},
"staffGrid button[id=save]" : {
click : function(button) {
var grid = this.getGrid(button) ;
var store = grid.getStore();
var tempModel = store.getUpdatedRecords();
alert(tempModel) ;
}
},
"staffGrid button[id=excel]" : {
click : function(button) {
}
}
});
},
views : ["staffGrid"],
stores : ["staffStore"],
models : ["staffModel"]
});
相关推荐
4. **API调整**:新版本的RowEditing插件可能引入了一些新的API方法和事件,允许开发者更方便地控制编辑过程。例如,可能增加了开始编辑、结束编辑、取消编辑等方法,以及编辑开始、编辑结束等事件,这些都为开发者...
在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid 组件,tree 也被更新,所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中,API 也发生了很...
在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...
EXTJS4中的核心概念包括`Ext.onReady`和`Ext.application`方法。`Ext.onReady`在DOM加载完成后自动调用,确保所有元素都可被脚本引用。例如,可以在这个方法内添加`alert('hello world!')`,在页面加载完毕后弹出...
在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...
在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
- **Ext.application**:这是ExtJS4中的一个初始化应用的方法,它会自动调用Ext.onReady,确保应用的初始化代码在DOM加载完毕后执行。这个方法是学习ExtJS时经常首先接触到的。 #### 4. 获取页面元素 ExtJS4提供了...
EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require) EXTJS...
开发者可以在这个版本上进行学习和开发,了解ExtJS4的内部工作原理,并根据需要自定义或扩展组件。 **4. 视频教程** `在Eclipse中开发Extjs4代码.mp4`是一个高清视频教程,可能涵盖了如何配置Eclipse环境,安装...
另外,ExtJS4在事件处理上更加高效。新版本引入了“观察者模式”,允许组件之间通过事件进行通信,提高了代码的可维护性和模块化。同时,ExtJS4还引入了“委托”(Delegation)机制,使得在一个容器内处理多个子组件...
2. **布局管理**:EXTJS4提供多种布局方式,如Fit布局、Border布局、Form布局等,能够灵活地调整组件在页面上的排列和尺寸。 3. **数据绑定**:EXTJS4支持双向数据绑定,使得视图与模型之间的数据同步变得简单,...
在"ExtJS4多文件上传,带进度条及管理"的场景下,文件管理意味着用户可以选择、暂停、继续或取消单个文件的上传。这种控制允许用户在上传过程中对文件有更高的自主权,提高交互性。 **六、实现步骤** 1. **创建...
ExtJS4正式版(官方完整下载包):含所有的源代码,html,api文档,示例。官方网站下载现在需要注册,这个仅供爱好者个人学习使用,如果项目中使用请至官方网站购买。
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
ExtJs 4 API 中文
在Extjs4应用中使用Ext.Loader ======================================= 11条jquery常用技巧和方法整理列表 8个超棒的学习jQuery的网站 JQuery 1.5 getJSON 的使用 JQuery AJAX提交中文乱码的解决方案 Jquery css...
在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分主流浏览器,包括从IE6到最新版本的Chrome...
通过以上内容的介绍,我们可以了解到在Extjs4中如何利用`form.load()`方法实现从后台加载JSON数据,并将其映射到表单字段中显示的过程。这不仅有助于提高开发效率,还能增强应用程序的灵活性。希望本文能够帮助您更...