EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框,并点一次触发一次事件
主要代码:
{
header: '属性值',
dataIndex: 'PropertyValueName',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
name:'PropertyValueName',
store: comboData_DynaPropertyValue,
valueField: "PropertyValueName",
displayField: "PropertyValueName",
mode: 'remote',//local
editable: false,
triggerAction: 'all',
autoload: true,
listeners: {
"expand": function (combo, store, index) {
var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;
comboData_DynaPropertyValue.load({
params: {
PropertyId: selectedData.PropertyId, //获取当前选择行的字段ID
start: startDynaProperty,
limit: limitDynaProperty
}
});
}
}
})
}
详细代码:
var startDynaProperty = 0;
var limitDynaProperty = 30;
Ext.define('DynaProperty', {
extend: 'Ext.data.Model',
fields: [
{ name: "PropertyId", type: "int" },
{ name: "PropertyName", type: "string" },
{ name: "PropertyEngName", type: "string" },
{ name: "PropertyValueId", type: "string" },
{ name: "PropertyValueName", type: "float" }
]
}); var store_DynaProperty = Ext.create('Ext.data.Store', {
model: 'DynaProperty',//这个地方DynaProperty不是一个对象,而是一个类
remoteSort: false,
remoteFilter: true,
pageSize: limitDynaProperty, //页容量20条数据
method: 'POST',
proxy: {//代理
type: 'ajax',
url: "/UI/HttpHandlerData/GalleryManagement/GalleryManagement.ashx?operation=SearchPicList",//请求
extraParams: {
start: startDynaProperty,
limit: limitDynaProperty
},
reader: {
type: 'json',
root: 'Table', //根节点
totalProperty: 'result' //数据总条数
}
},
sorters: [{
//排序字段。
property: 'PropertyId',
//排序类型,默认为 ASC
direction: 'ASC'
}],
autoLoad: true //即时加载数据
}); var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
}); var comboData_DynaPropertyValue = Ext.create('Ext.data.Store', {
fields: ['PropertyValueId', 'PropertyValueName'],
autoLoad: true,
proxy: {
type: "ajax",
url: '/UI/HttpHandlerData/TrademarkCar/TrademarkCar.ashx?operation=Search',
reader: {
type: "json",
root: "Table"
}
}
}); var grid_DynaProperty = Ext.create('Ext.grid.Panel', {
store: store_DynaProperty,
autoWidth: true,
aotuHeight: true,
animCollapse: false,
enableColumnMove: false,
enableHdMenu: false,
loadMask: true,
loadMask: {
msg: '正在载入数据,请稍候...'
},
viewConfig: {
forceFit: true,
stripeRows: true
},
forceFit: true, //列表宽度自适应
stripeRows: true,//斑马线
autoSizeColumns: true, //根据每一列内容的宽度自适应列的大小
trackMouseOver: true, //鼠标移动时高亮显示
selModel: { selType: 'checkboxmodel' }, //选择框
scroll: true,
plugins: [rowEditing],
columns: [
{ header: '序号', xtype: 'rownumberer', align: 'left', width: 50 },
{
header: '属性', dataIndex: 'PropertyName', width: 200
}, {
header: '填值方式', dataIndex: 'ValueMethod', width: 200
},{
header: '属性值', dataIndex: 'PropertyValueName', width: 200
}, {
header: '属性值',
dataIndex: 'PropertyValueName',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
name:'PropertyValueName',
store: comboData_DynaPropertyValue,
valueField: "PropertyValueName",
displayField: "PropertyValueName",
mode: 'remote',//local
editable: false,
triggerAction: 'all',
autoload: true,
listeners: {
"expand": function (combo, store, index) {
var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;
comboData_DynaPropertyValue.load({
params: {
PropertyId: selectedData.PropertyId, start: startDynaProperty,
limit: limitDynaProperty
}
});
}
}
})
}
]
});
EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框,并点一次触发一次事件的更多相关文章
- 自定义SWT控件二之自定义多选下拉框
2.自定义下拉多选框 package com.view.control.select; import java.util.ArrayList; import java.util.HashMap; im ...
- EXTJS 4.2 资料 控件之Grid 那些事
最近在学习Extjs4.2 ,积累文章,看得不错,再此留年: //表格数据最起码有列.数据.转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = ...
- EXTJS 4.2 资料 控件之Grid 添加行,编辑行,删除行
//SiteVariableConfigValue类,创立一个模型类 Ext.define("SiteVariableConfigValue", { extend: "E ...
- EXTJS 4.2 资料 控件之Grid Columns 列renderer 绑定事件
columns: [ { header: '序号', xtype: 'rownumberer', align: 'center', width: 100 }, { header: 'CompanyId ...
- EXTJS 4.2 资料 控件之Grid 列鼠标悬停提示
columns: [ { header: }, { header: }, { header: , renderer: function (v, ctx, record) { ctx.tdAttr = ...
- C# 如何定义让PropertyGrid控件显示[...]按钮,并且点击后以下拉框形式显示自定义控件编辑属性值
关于PropertyGrid控件的详细用法请参考文献: 1.C# PropertyGrid控件应用心得 2.C#自定义PropertyGrid属性 首先定义一个要在下拉框显示的控件: using Sy ...
- 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
- EXTJS 3.0 资料 控件之 html 潜入label用法
这是在Extjs 中插入html 控件label! html: "<div><label id='howMany'>您共选中了</label><br ...
- EXTJS 4.2 资料 控件之combo 联动
写两个数据源: 1.IM_ST_Module.js { success:true, data:[ { ModuleId: '1', ModuleName: '资讯' } , { ModuleId: ' ...
随机推荐
- 接收POst数据流数据
var data = ""; using (StreamReader readStream = new StreamReader(context.Re ...
- controller,link,compile不同
测试案例 .directive('testDirective', function() { return { restrict: 'E', template: '<p>Hello {{nu ...
- [转]Using Replacement Strings with Regex.Replace
本文转自:http://www.knowdotnet.com/articles/regereplacementstrings.html The String.Replace function has ...
- Java计算文件的SHA码和MD5码
可参考:http://blog.csdn.net/hudashi/article/details/8394158 /** * 计算文件的MD5码 * @param file * @return */ ...
- Groovy选型
Groovy是一门基于JVM的动态语言,同时也是一门面向对象的语言,语法上和Java非常相似.它结合了Python.Ruby和Smalltalk的许多强大的特性,Groovy 代码能够与 Java 代 ...
- 使用Mat分析大堆信息
在定位一线问题时经常碰测试中出现Out Of Memory的问题, 通过jmap查看,发现JVM heap全用满了.有很多工具可以查看JVM堆的信息, 收费的比如JProfiler, YourKit, ...
- 【转】Nginx模块开发入门
转自: http://kb.cnblogs.com/page/98352/ 结论:对Nginx模块开发入门做了一个helloworld的示例,简单易懂.也有一定的深度.值得一看. Nginx模块开发入 ...
- MongoDB - Installing MongoDB on Linux
1. 下载最新稳定版本的安装包. [huey@huey mongodb]$ wget -c --no-check-certificate https://fossies.org/linux/misc/ ...
- oracle中比较两表表结构差异和数据差异的方法
在工作中需要完成这么一个需求:比较两个表的表结构是否形相同,并找出差异.比较两个表中的数据是否相同,并找出差异数据? 分析:由于表结构中字段比较多,手工比较很浪费时间,而且不能保证不出错误.对于 ...
- DOS批处理命令-goto命令
goto是一个流程控制语句 rem goto语句是一个大家都不怎么喜欢的语句,因为他的随意性太强,导致可维护性大大的降低. 语法: goto [lable] [lable]是bat程序中任意定义的 ...