Combobox extjs组合框中的MultiSelect
我正在尝试在Extjs的combobox中进行多重选择，在我选择项目后，会呈现tpl索引，如果要呈现远离单元格时选择的displayfield值，我如何才能实现这一点 这是密码Combobox extjs组合框中的MultiSelect,combobox,multi-select,Combobox,Multi Select,我正在尝试在Extjs的combobox中进行多重选择，在我选择项目后，会呈现tpl索引，如果要呈现远离单元格时选择的displayfield值，我如何才能实现这一点 这是密码 function run() { var myStore=Ext.create('Ext.data.Store', { storeId: 'simpsonsStore', fields: ['busname', 'time', 'typebus',], pageS
function run() {
var myStore=Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['busname', 'time', 'typebus',],
pageSize:2,
proxy: {
type: 'memory',
enablePaging: true
},
data: [{
busname: 'ABCD',
time: '15:30:00',
typebus: 'AC Volvo',
}, {
busname: 'aaa',
time: '13:30:00',
typebus: 'Seater',
},{
busname: 'AAAA',
time: '18:30:00',
typebus: 'Sleeper',
},{
busname: 'ABCD',
time: '19:30:00',
typebus: 'AC Volvo',
},]
});
Ext.create('Ext.grid.Panel', {
xtype :'gridpanel',
itemId:'busTimegrid',
pageSize:1,
title: 'BUS DEATILS',
mapperId:'getBusTime',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Bus Name',
dataIndex: 'busname',
editor: 'textfield'
}, {
text: 'Bus Time',
dataIndex: 'time',
xtype: 'gridcolumn',
renderer: function (value) {
if (value instanceof Date)
return Ext.util.Format.date(value, 'H:i:s');
else
return value;
},
flex: 1,
editor: {
xtype: 'timefield',
format: 'H:i:s',
allowBlank: true,
maskRe: /[0-9,:]/,
listeners: {
beforeselect: function(timefield, record) {
var grid = timefield.up('grid');
if(grid.store.find('time', record.data.disp) != -1) {
Ext.Msg.alert("Bus time already exist.");
return false;
}
}
}
}
}, {
header: 'Bus TYpe',
dataIndex: 'typebus',
editable:true,
renderer: function (value) {
if (Ext.isNumber(value)) {
var store = this.getEditor().getStore();
return store.findRecord('id', value).get('name');
}
return value;
},
editor: {
xtype: 'combo',
displayField: 'name',
valueField: 'id',
editable:true,
forceSelection:true,
multiSelect: true,
displayTpl: '<tpl for=".">' +
'{name}' +
'<tpl if="xindex < xcount">, </tpl>' +
'</tpl>',
store: Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [{
id: 1,
name: 'AC Volvo'
}, {
id: 2,
name: 'Seater'
}, {
id: 3,
name: 'Sleeper'
}]
})
}
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
},
listners: [{
fn: 'onUsernamefieldBlur',
event: 'blur',
delegate: 'busname'
}],
onUsernamefieldBlur: function (textfield, e, eOpts) {
if (textfield.getValue() === '') {
Ext.Msg.alert("Busname can't be empty");
textfield.setFocus(true);
}
},
height: 200,
width: 400,
dockedItems: [{
xtype: 'pagingtoolbar',
store: myStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
var gridRow = myStore.getModifiedRecords();
Ext.each(gridRows, function (gridRow) {
var dirtyInd = myStore.indexOf(gridRow);
var newTime = new Date(store.getAt(dirtyInd).data.time);
},
myStore.each(function (record, idx) {
var newT = new Date(record.get('time'));
if (Ext.Date.diff(newTime, newT,Ext.Date.SECOND)=== 0)
{
samebustime = true;
}
}));
if(samebustime){
Ext.Msg.alert('Warning','Same time occured')
}
}
函数运行（）{
var myStore=Ext.create（'Ext.data.Store'{
storeId:“辛普森商店”，
字段：['busname'，'time'，'typebus'，]，
页面大小：2，
代理：{
键入：“内存”，
enablePaging:true
},
数据：[{
总线名称：“ABCD”，
时间：“15:30:00”，
typebus:‘AC沃尔沃’，
}, {
总线名称：“aaa”，
时间：“13:30:00”，
typebus:“座位”，
},{
总线名称：“AAAA”，
时间：“18:30:00”，
typebus:‘卧铺’，
},{
总线名称：“ABCD”，
时间：“19:30:00”，
typebus:‘AC沃尔沃’，
},]
});
Ext.create（'Ext.grid.Panel'{
xtype:“gridpanel”，
itemId:'BusticMeGrid'，
页面大小：1，
标题：“公共汽车死亡”，
mapperId:“GetBustisme”，
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
栏目：[{
标题：“总线名称”，
dataIndex:'busname'，
编辑：“文本字段”
}, {
文字：“公交车时间”，
数据索引：“时间”，
xtype:'gridcolumn'，
渲染器：函数（值）{
if（值instanceof Date）
返回Ext.util.Format.date（值'H:i:s'）；
否则
返回值；
},
弹性：1，
编辑:{
xtype:'时间域'，
格式：“H:i:s”，
allowBlank：是的，
maskRe:/[0-9，：]/,，
听众：{
beforeselect：功能（时间字段、记录）{
var grid=timefield.up（“网格”）；
if（grid.store.find（'time'，record.data.disp）！=-1）{
Ext.Msg.alert（“总线时间已存在”）；
返回false；
}
}
}
}
}, {
标题：“总线类型”，
dataIndex:'typebus'，
是的，
渲染器：函数（值）{
如果（外部isNumber（值））{
var store=this.getEditor（）.getStore（）；
return store.findRecord（'id'，value.get（'name'）；
}
返回值；
},
编辑:{
xtype:'组合'，
displayField:'名称'，
valueField:'id'，
是的，
选择：对，
多选：对，
displayTpl:'+
“{name}”+
', ' +
'',
存储：Ext.create（'Ext.data.store'{
字段：['id'，'name']，
数据：[{
id:1，
名称：“AC沃尔沃”
}, {
id:2，
姓名：'座位'
}, {
id:3，
姓名：“睡眠者”
}]
})
}
}],
selModel:'cellmodel'，
插件：{
p类型：'cellediting'，
单击编辑：1，
},
列出者：[{
fn:“onUsernamefieldBlur”，
事件：“模糊”，
代表：“总线名”
}],
onUsernamefieldBlur：函数（文本字段、e、eOpts）{
if（textfield.getValue（）=''）{
Ext.Msg.alert（“总线名不能为空”）；
textfield.setFocus（true）；
}
},
身高：200，
宽度：400，
摘要：[{
xtype:“pagingtoolbar”，
store:myStore，//使用的是同一个store GridPanel
船坞：“底部”，
displayInfo:true
}],
renderTo:Ext.getBody（）
});
var gridRow=myStore.getModifiedRecords（）；
Ext.each（网格行，函数（网格行）{
var dirtyInd=myStore.indexOf（gridRow）；
var newTime=新日期（store.getAt（dirtyInd.data.time）；
},
myStore.each（函数（记录，idx）{
var newT=新日期（record.get（'time'）；
if（Ext.Date.diff（newTime，newT，Ext.Date.SECOND）==0）
{
samebustime=真；
}
}));
如果（samebustime）{
Ext.Msg.alert（'警告'，'同时发生'）
}
}
我对您的原始源代码做了一些修改。你可能喜欢也可能不喜欢。但在这段代码中，您得到了您所要求的。我不确定这是否正是你想要的
Ext.application({
name: 'Fiddle',
launch: function () {
run();
window.show();
}
});
function run() {
var myStore = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['busname', 'time', 'typebus',],
pageSize: 2,
proxy: {
type: 'memory',
enablePaging: true
},
data: [{
busname: 'ABCD',
time: '15:30:00',
typebus: 'AC Volvo',
}, {
busname: 'aaa',
time: '13:30:00',
typebus: 'Seater',
}, {
busname: 'AAAA',
time: '18:30:00',
typebus: 'Sleeper',
}, {
busname: 'ABCD',
time: '19:30:00',
typebus: 'AC Volvo',
},]
});
var typebusStore = Ext.create('Ext.data.Store', {
storeId: 'typeBusStore',
fields: ['id', 'name'],
data: [{
id: 1,
name: 'AC Volvo'
}, {
id: 2,
name: 'Seater'
}, {
id: 3,
name: 'Sleeper'
}]
})
Ext.create('Ext.grid.Panel', {
xtype: 'gridpanel',
itemId: 'busTimegrid',
pageSize: 1,
title: 'BUS DEATILS',
mapperId: 'getBusTime',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Bus Name',
dataIndex: 'busname',
editor: 'textfield'
}, {
text: 'Bus Time',
dataIndex: 'time',
xtype: 'gridcolumn',
renderer: function (value) {
if (value instanceof Date)
return Ext.util.Format.date(value, 'H:i:s');
else
return value;
},
flex: 1,
editor: {
xtype: 'timefield',
format: 'H:i:s',
allowBlank: true,
maskRe: /[0-9,:]/,
listeners: {
beforeselect: function (timefield, record) {
var grid = timefield.up('grid');
if (grid.store.find('time', record.data.disp) != -1) {
Ext.Msg.alert("Bus time already exist.");
return false;
}
}
}
}
}, {
header: 'Bus TYpe',
dataIndex: 'typebus',
editable: true,
renderer: function (value, md, record) {
var retValue = Array();
if (Ext.isArray(value)) {
Ext.each(value, function(id) {
retValue.push(Ext.data.StoreManager.lookup('typeBusStore').findRecord('id', id).get('name'));
});
}
if (retValue.length > 0) {
return retValue.join(", ");
}
return value;
},
editor: {
xtype: 'combo',
displayField: 'name',
valueField: 'id',
editable: true,
forceSelection: true,
multiSelect: true,
displayTpl: '<tpl for=".">' +
'{name}' +
'<tpl if="xindex < xcount">, </tpl>' +
'</tpl>',
store: typebusStore
}
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
},
listners: [{
fn: 'onUsernamefieldBlur',
event: 'blur',
delegate: 'busname'
}],
onUsernamefieldBlur: function (textfield, e, eOpts) {
if (textfield.getValue() === '') {
Ext.Msg.alert("Busname can't be empty");
textfield.setFocus(true);
}
},
height: 200,
width: 400,
dockedItems: [{
xtype: 'pagingtoolbar',
store: myStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
var gridRows = myStore.getModifiedRecords();
console.log(gridRows)
var samebustime = false;
Ext.each(gridRows, function (gridRow) {
var dirtyInd = myStore.indexOf(gridRow);
var newTime = new Date(store.getAt(dirtyInd).data.time);
myStore.each(function (record, idx) {
var newT = new Date(record.get('time'));
if (Ext.Date.diff(newTime, newT, Ext.Date.SECOND) === 0) {
samebustime = true;
}
})
});
if (samebustime) {
Ext.Msg.alert('Warning', 'Same time occured')
}
}
Ext.application({
名字：“小提琴”，
启动：函数（）{
run（）；
window.show（）；
}
});
函数运行（）{
var myStore=Ext.create（'Ext.data.Store'{
storeId:“辛普森商店”，
字段：['busname'，'time'，'typebus'，]，
页面大小：2，
代理：{
键入：“内存”，
enablePaging:true
},
数据：[{
总线名称：“ABCD”，
时间：“15:30:00”，
typebus:‘AC沃尔沃’，
}, {
总线名称：“aaa”，
时间：“13:30:00”，
typebus:“座位”，
}, {
总线名称：“AAAA”，
时间：“18:30:00”，
typebus:‘卧铺’，
}, {
总线名称：“ABCD”，
时间：“19:30:00”，
typebus:‘AC沃尔沃’，
},]
});
var typebusStore=Ext.create（'Ext.data.Store'{
storeId:'typeBusStore'，
字段：['id'，'name']，
数据：[{
id:1，
名称：“AC沃尔沃”
}, {
id:2，
姓名：'座位'
}, {
id:3，
姓名：“睡眠者”
}]
})
Ext.create（'Ext.grid.Panel'{
xtype:“gridpanel”，
项目一