extjs combobox drop-down list menu learning
⭐️Extjs notes from many years ago, just an archive, no update! ⭐️
Common configuration items
- emptyText: "–Please select–" //Watermark text when there is no value.
- editable : false, //Whether it is editable, the default is editable, so add
Common monitoring events
event triggered after the afterrender component renders
listeners : {
'afterrender': function(){
Ext.Ajax.request({
method:'post',
url:'/JF/PolicyConfig_SqlInjectRule/getCurrentObject',
success:function(response){
var res = Ext.decode(response.responseText);
//console.log(res.now_object);
Ext.getCmp('databaseObject').setValue(res.now_object);
}
});
},
'change':function( combobox, newValue, oldValue){
combobox drop-down list menu learning
Use the setValue method to set the default value of the drop-down list. Note that the value of the passed parameter valueField is not the value displayed by the displayField, and you can display your choice
Ext.getCmp('databaseObject').setValue(res.now_object);
Set the first row in the default store
Get the selected value of the current drop-down menu, the component has a direct method getValue()
var currentRuleSet = Ext.getCmp('ruleSet').getValue();
How does combobox reduce the distance between fieldLabel and drop-down box
Set labelWidth:80, the width is the same as the width of the table signature, and there will be no spacing; the larger the width, the more obvious the spacing.
4. How to set the width of the drop-down box?
Note that the width here refers to the width of the entire drop-down box component including the width of the label you set, so the width of the drop-down box you want is the
width of width-labelWidth
{
xtype:'combobox',
name:'enable',
id:'enable',
fieldLabel: '是否启用',
labelWidth:60,
width: 130,
store:Ext.create('Ext.data.Store', {
fields: ['value', 'enable' ],
data : [
{
"value":"2", "enable":"全部"},
{
"value":"1", "enable":"启用"},
{
"value":"0", "enable":"关闭"}
]
}),
value:'2',
queryMode: 'local',
displayField: 'enable',
valueField: 'value'
},
Customize the drop-down menu, and then you can add some configuration items of your own, and do some processing when initializing the component, such as requireable: false, the configuration item is not in extjs, it is defined by yourself
在配置该自定义的配置项后，label分割器加*并且布恩那个为空。
Ext.define('Kitchensink.form.JautoComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.JautoComboBox',
editable:false,
requireable: false,
initComponent: function()
{
if(this.requireable)
{
this.labelSeparator = '：<div style="color: red;line-height: 22px;float: right">*</div>';
this.allowBlank = false;
}
this.callParent();
}
//multiSelect: true,//支持多选
});
The drop-down menu needs an all, and the initial value is set, but the store does not return all the content after the ajax request from the server. After selecting it, you can’t see all the options? How to solve
Idea 1: Find a way to add all options to the content returned by the server.
Idea 2: Front-end processing
Add a permanent option under the drop-down menu, so that you can choose to trigger an event, so that a form window will pop up to create a new xx
Idea: Listen to the load event of the front-end store, and then delete the add method of the store; the add method is just right, add it to the last item of the drop-down list` //The
test
is successful, in the drop-down menu component, add the listeners configuration item, listen to the render method and then get The store (getStore) of the component binds the load event method of the store, and uses the add method of the store in the load method
listeners : {
'render':function(combo){
//store的load事件setValue第一行
combo.getStore().on("load",function(s,r,o){
console.log(r[0]);
if(typeof r[0] != 'undefined'){
combo.setValue(r[0].get('id'));
}else{
combo.setValue('该对象暂无规则，请新建');
}
s.add({
id: '0',name: '--新建规则--'});
});
},
'change':function( combobox, newValue, oldValue){
//alert(newValue);
if(newValue == 0){
//触发自定义事件
this.fireEvent('addRuleSet',newValue);
}else{
var store = Ext.ComponentQuery.query('sqlinjectrulelist')[0].getStore();
var rurl = '/JF/PolicyConfig_SqlInjectRule/getList?ruleset_id='+newValue;
store.proxy.url=rurl;
store.type= 'ajax';
store.reload();
}
}
}
Listen to the drop-down box selection event as the above example, you can listen to the change event
If newValue is the value we want, then call fireEvent to trigger a custom event
In the MVC development mode, handle this event in the control, as follows, in the control as follows , pay attention here
init: function(){
console.log('Initialized Users! This happens before ' +
'the Application launch() function is called');
var me = this;
this.control({
//注意点：view中自定义的别名 组件类型[组件中定义name] //试过直接写sqlinjectrulelist不行，要具体到extjs组件上
'sqlinjectrulelist combobox[name=ruleSet]':
{
"addRuleSet": function()
{
alert('xxxxxxxxxxx');
return true;
}
},
//view中的组件如下:
xtype : 'JComboBox', //自定义 继承自'Ext.form.field.ComboBox' 别名 alias: 'widget.JComboBox',
fieldLabel : '规则集',
name : 'ruleSet',
id : 'ruleSet',
editable : false,
displayField : 'name',
valueField : 'id',
queryMode : 'remote',
store : Ext.create('Ext.data.Store',{
fields:['id','name'],
autoLoad:true,
proxy:{
type:'ajax',
url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
}
}),
I found a problem: After one of my drop-down lists was clicked for the first time, after the data was obtained from the remote end, my drop-down list retracted again. After that, the click did not have this problem.
Analysis of the cause, I found that it was a problem with my code. I listened to the render event and bound the load event of the store when the component was rendered. After that, I clicked the drop-down menu for the first time and the load event was triggered. At this time, I setValue to let Selecting the first row caused the problem that my drop-down box suddenly retracted after loading.
listeners : {
'render':function(combo){
//store的load事件setValue第一行
combo.getStore().on("load",function(s,r,o){
console.log(r[0]);
if(typeof r[0] != 'undefined'){
//combo.setValue(r[0].get('id'));
}else{
combo.setValue('该对象无规则，请新建');
}
s.add({
id: '0',name: '--新建规则--'});
});
},
Idea 1: (recommended)
Thinking: When the drop-down menu comobox is clicked for the first time, the store will request remote data, but when the page is loaded, the store has already requested ajax, and there is already a value in the combox, how to If there is a value, the first click on the drop-down menu does not allow the store to ajax the data from the server side?
//It is possible, when you click the drop-down, it will no longer make ajax request, it will only make ajax when the page is loaded, or you can adjust the load by your own code, which solves my problem;
//queryMode : 'remote',
queryMode : 'local',
//完整代码
{
xtype : 'JComboBox',
fieldLabel : '规则集',
name : 'ruleSet',
id : 'ruleSet',
editable : false,
displayField : 'name',
valueField : 'id',
//queryMode : 'remote',
queryMode : 'local',
store : Ext.create('Ext.data.Store',{
storeId:'ruleSetStore',
fields:['id','name'],
//autoLoad:false,
autoLoad:true,
proxy:{
type:'ajax',
url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
}
/*
listeners:{
'load':function(){
var record = this.getAt(0).get('id');
Ext.getCmp('ruleSet').setValue(record);
}
}
*/
}),
Idea 2 (failure): I directly configure the load event handler in the store, and then setValue; the result is the same, but the drop-down list will still retract.
store : Ext.create('Ext.data.Store',{
fields:['id','name'],
//autoLoad:false,
autoLoad:false,
proxy:{
type:'ajax',
url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
},
listeners:{
'load':function(){
var record = this.getAt(0).get('id');
Ext.getCmp('ruleSet').setValue(record);
}
}
}),
Idea 3: In the afterrender event of the combox component, setValue is theoretically possible, but why the result values I found here are all null, so the set value cannot be set- -
'afterrender':function(combo){
//var fLine = Ext.ComponentQuery.query('[name=ruleSet]')[0].value; //null
//var record = this.getStore().getAt(0).get('id');
//失败原因：这里this指向的下拉菜单组件，没有getStore方法
//combo.setValue(fLine);
},
Analysis: The reason is that the understanding of the getStore method is not in place, check the official api to learn:
The following example, a window + form, I use this.getStore in the button component of the window, you must understand that your this here points to the button object, and the button object does not have a getStore method.
Before using this.getStore in the controller in MVC development, this points to the current controller control
to query the official api keyword "getStore" and found that there is Ext.getStore, Ext.app.Controller.getStore, Ext.app.ViewMode.getStorel, etc. , indicating that this method is only available when the controller is integrated - -
Therefore, use the global Ext.getStore instead, and pass the parameter as the storeId value. In the MVC development mode, it is the store name instantiated by the controller configuration item stores.
getStore ( name ) : Ext.data.Store
Shortcut to Ext.data.StoreManager#lookup. Gets a registered Store by id
PARAMETERS
name : Object
RETURNS :Ext.data.Store
storeId : String BINDABLE
Unique identifier for this store. If present, this Store will be registered with the Ext.data.StoreManager, making it easy to reuse elsewhere.
Note that when a store is instantiated by a Controller, the storeId will default to the name of the store if not specified in the class.
Defaults to: null
storeId is a string that uniquely identifies a store. If it exists, the store will be registered with the store manager, making it easy to reuse elsewhere.
Note that when a store is instantiated by the controller, the storeId will default to the name of the store (if it is not defined in the class).
This is the case here. The storeId passed in using the global Ext.getStore is the controller instantiation store.
var dialog = Ext.create('Ext.window.Window', {
title: '新建规则集',
maxHeight: 400,
name: 'add_cmd',
width: 400,
modal: true,
constrainHeader: true,
autoShow:true,
items:[
{
xtype: 'rulesetform' }
],
buttons:
[
{
xtype:'JButton',
text:'保存',
minWidth:62,
handler:function() {
var me = this;
var win = this.up('window');
var form = win.down('form').getForm();
//var store = Ext.getStore('SqlInjectRules'); 错误点
var store = Ext.getStore('SqlInjectRules');
//在store中，我是这样定义的
Ext.define('JUMP.store.SqlInjectRules', {
extend: 'Ext.data.Store',
model: 'JUMP.model.SqlInjectRule',
/*
data: [
{ name: 'HaMaster', level: '2', enable: 'up',baseling_name:'激活' },
{ name: 'HaMaster', level: '1', enable: 'up',baseling_name:'激活' }
]
*/
pageSize: 15,
Summarize:
- When you click the drop-down list for the first time, the store will trigger ajax to get data from the remote end, and then the click will not trigger the ajax request of the store. Simply put, it is a drop-down menu, the first click will trigger the load event of the store
- getStore is not available in any component, it can be used directly in the control (this points to the control object), in the case of other components, you can use the global Ext.getStore to obtain; pass the parameter as the storeId value, in the MVC
development mode, the controller is configured immediately The name of the store instantiated by the item stores;
in other cases, add a configuration item storeId:'xxx' to the store, and give the store an id
Understanding of setValue of the drop-down box component
displayField : 'name',
valueField : 'id',
//queryMode : 'remote',
queryMode : 'local',
store : Ext.create('Ext.data.Store',{
storeId:'ruleSetStore',
fields:['id','name'],
Problem: Sometimes you use the setValue(key) method to assign a value, but you find that the displayed key is not the value corresponding to the key.
The premise of setValue() is that the data in the combobox has been loaded. If there is no record, the key will be displayed directly.
Idea 1: In this case, you can usually let the drop-down component store load it, and get the latest data from the server again. The data returned by the server is sorted in descending order by the id in the database, and the load event of the monitored store is the first in setValue at this time. OK; in this case, there is complete information in the store, and there will be no problem with setValue.
Ext. getCmp('ruleSet'). getStore(). load();
listeners : {
'render':function(combo){
//store的load事件setValue第一行
combo.getStore().on("load",function(s,r,o){
//console.log(r[0]);
if(typeof r[0] != 'undefined'){
//for void list back
combo.setValue(r[0].get('id'));
}else{
combo.setValue('该对象无规则，请新建');
}
s.add({
id: '0',name: '--新建规则--'});
});
},
Add an option to the first row of the dropdown list
As in the above example, the operation store is added to the last line of the drop-down menu using the add of the store; is there any way to add it to the first line?
Summarize:
- The drop-down menu generally has two fields displayField and valueField. What you setValue set is the value value, and it will automatically display the display value, provided that your store has this complete record, otherwise, whatever you setValue will display (at this time, the parameters submitted by your ajax request The value is also the value of your setValue, there will be problems, the value in the valueField you actually want to submit, but at this time, there is no value)
Therefore, the best practice is that when the record is incomplete and you want to just display a certain content (not based on this selection of ajax), you can setValue; otherwise, it is best to load a complete data.