Home > Web Front-end > JS Tutorial > body text

Application of dynamic combobox embedded in grid in extjs_extjs

WBOY
Release: 2016-05-16 18:12:39
Original
1503 people have browsed it

Get the data of combobox

Copy the code The code is as follows:

comboDS = new Ext.data.JsonStore ({
url : 'test.do',
fields : [{
name : 'id'
}, {
name : 'display'
}]
});

combobox definition
The id in the combobox must be present, and the combobox value must be obtained based on the id.
Copy code The code is as follows:

var comboBox = new Ext.form.ComboBox({
id : "cb", //Must have
typeAhead : true,
readOnly : true,
allowBlank : false,
autoScroll : true,
selectOnFocus : true,
emptyText : 'Please select...',
store : comboDS,
forceSelection : true,
triggerAction : 'all',
displayField : 'display',
valueField : 'id'
});

Grid definition:
Copy code The code is as follows:

ds = new Ext.data.Store({
baseparams : {
start : 0,
limit : RowCount
},
proxy : new Ext.data .HttpProxy({
url :'test2.do'
}),
reader : new Ext.data.JsonReader({
root : 'data',
totalProperty : 'totalCount'
}, [{
name : "bh"
}, {
name : "test"
}]);
});
var cm = new Ext .grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : "Number",
dataIndex : "bh"
}, {
header : "Test",
dataIndex : "test",
renderer : renderer,
editor : comboBox
}]);
grid = new Ext.grid.EditorGridPanel({
title : 'Test',
ds : ds,
cm : cm,
clicksToEdit : 1,
viewConfig : {
forceFit : true
},
bbar : new Ext.PagingToolbar({
pageSize : RowCount,
store : ds,
displayInfo : true,
displayMsg : 'Display records {0} to {1}, {2} in total',
emptyMsg : "No record"
})
});

cm renderer function
This method is to solve the problem of combobox being modified and displayed as id
Copy code The code is as follows:

function renderer(value, p, r) {
var index = comboDS.find(Ext .getCmp('cb').valueField, value);
var record = comboDS.getAt(index);
var displayText = "";
if (record == null) {
displayText = value;
} else {
displayText = record.data.display; // Get the value of the display field in the data set in record
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!