PDA

View Full Version : forceSelection:true is not working in ExtJS4.1



atul.sachan@capgemini.com
24 Jul 2012, 2:08 AM
I am using combo box but forceSelection (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-forceSelection) : true is not working for me. User can enter any value apart from list.
Combo box configuration
-------------------------------------------
xtype: 'combobox',
width: 140,
fieldLabel: bundle.getMsg('vl.locate.label.make')+'<span class='+styleData.required+'>*</span>',
labelSeparator : "",
labelAlign: 'top',
id:'makeID',
emptyText: bundle.getMsg('vl.locate.label.emptymake'),
store: 'Make',
displayField: 'label',
valueField: 'value',
mode : 'local',
forceSelection : true,
triggerAction : 'all',
queryMode: 'local',
action : 'makeChange',
style : {marginLeft:'10px'}
--------------------------------------------------------------------
Regards,
At

sword-it
24 Jul 2012, 2:37 AM
Hi atul,

atul.sachan@capgemini.com


I am using combo box but forceSelection (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-forceSelection) : true is not working for me. User can enter any value apart from list.

User can type any text into combobox, if you give forceSelection : true then it restrict the selected value of combobox will be one of the values in the list.

See the working example http://jsfiddle.net/xRgmL/

atul.sachan@capgemini.com
24 Jul 2012, 2:43 AM
37426

sword-it
24 Jul 2012, 2:51 AM
after type any text, try to lose focus from combobox. you can see the result. If typed text not matched with any item in the combo list, nothing item will be selected.

friend
24 Jul 2012, 9:19 AM
Your only other option is to set editable: false, but this prevents a user from directly typing anything in the combo's input field and they're forced to use the dropdown.

tshivanand
5 Jan 2013, 5:33 AM
Hi ,
i am Shivanad tripathi new in Extjs and i am trying to autoclose popup window by using Closable:true but it's not working,
Thanks&Regards,
Shivanand
this is my code
Ext.define('mailtrack.view.core.js.AdminBlockEditor', { extend: 'lib.Commons.Components.Containers.MailTrackWindow',
height: 600,
width: 1200,
resizable : false,
header : false,
autoScroll: true,
scrollable: true,
collapsable: true,
closable:true,
id : 'block_editor',
name: 'block_editor',
xtype : 'block_editor',
title: 'Template Block Editor',
modal:true,
initComponent: function() {
var closeBar = Ext.create('mailtrack.view.core.js.CloseToolBar2', {title:'Template Block Editor',window:me});
var active_block_id = this.activeblockIdval;
var undoStack = this.undoStack;
var tagStore = Ext.state.Manager.get('ADMINTAGSTORE');
var block_background_color = Ext.create('lib.Commons.Components.Containers.MailTrackPanel', {
title : 'Block Background Color',
border: 'layout',
region: 'center',
width:400,
height:195,
floating : false,
dockedItems: [{
xtype : 'toolbar',
dock : 'top',
layout : {
pack : 'top'
},
items: [{
padding:'10 0 0 10',
fieldLabel : 'On',
labelWidth : 22,
xtype : 'radio',
name : 'main_on_radio',
id:'main_block_on',
checked:true,
listeners: {
change: function(radiogroup, radio) {
if (Ext.getCmp(Ext.id(this.id)).getValue()) {
Ext.getCmp('block_backgroung_color_picker_main1').setVisible(true) ;
Ext.getCmp('colorText1').setVisible(true) ;
Ext.getCmp('block_backgroung_apply_button_main').setVisible(true) ;
}
}
}
},{
fieldLabel : 'Off',
labelWidth : 22,
xtype : 'radio',
name : 'main_on_radio',
id:'main_block_off',
listeners: {
change: function(radiogroup, radio) {
if (Ext.getCmp(Ext.id(this.id)).getValue()) {
Ext.getCmp('block_backgroung_color_picker_main1').setVisible(false) ;
Ext.getCmp('colorText1').setVisible(false) ;
Ext.getCmp('block_backgroung_apply_button_main').setVisible(false) ;
}
}
}
}]
}],
layout : {
type : 'table',
columns : 2
},
items: [{
xtype : 'textfield',
id:'colorText1',
readOnly : true,
fieldStyle : true,
width : 145,
padding:'10 5 0 10'
},
Ext.create('Ext.Button', {
id: 'block_backgroung_color_picker_main1' ,
menu: {
xtype: 'colormenu',
value: '000000',
handler: function (obj, rgb) {
Ext.getCmp('colorText1').setValue(rgb.toString()) ;
} // handler
}, // menu
text: 'Color picker'
}),{
xtype : 'button',
text : 'Apply',
margin:'0 0 0 5',
id : 'block_backgroung_apply_button_main' ,
maxWidth : 50,
handler : function() {
if(undoStack[0] == undefined){
undoStack.push(Ext.getCmp('admin_customize_panel').body.dom.innerHTML);
}
var temp_block_backgrndclr = Ext.getCmp('colorText1').getValue() ;
if (temp_block_backgrndclr != null && temp_block_backgrndclr != "" && temp_block_backgrndclr.length > 0) {
Ext.getCmp(active_block_id).body.setStyle('backgroundColor', "#"+Ext.getCmp('colorText1').getValue());
Ext.getCmp('colorText1').setValue("") ;
storeContent();
//Ext.getCmp('htmlBlockEditor').refresh() ;
} else {
alert("Please choose color.");
// Ext.Msg.alert("Please choose color.") ;
}
}
}]
});

function storeContent(){
undoStack.push(Ext.getCmp('admin_customize_panel').body.dom.innerHTML);
}
var blockFormatting = Ext.create('lib.Commons.Components.Containers.MailTrackPanel', {
title : 'Block formatting options : Border and Colors',
border: 'layout',
region: 'center',
width:400,
height:195,
bodyPadding: 20,
floating : false,
visible : true,
layout : {
type : 'table',
columns : 2
},
items: [{
xtype : 'textfield',
id : 'blockFormatingColor',
readOnly : true,
width : 145,
padding:'0 0 0 1'
},
Ext.create('Ext.Button', {
width : 80,
maxWidth : 80,
menu: Ext.create('lib.Commons.Components.Menu.MailTrackColourMenu',{
value: '000000',
handler: function (obj, rgb) {
Ext.getCmp('blockFormatingColor').setValue(rgb.toString()) ;
} // handler
})
, // menu
text: 'Color picker'
}),{
xtype : 'combo',
fieldLabel : 'Style',
labelWidth : 30,
id : 'styleCombo_block',
store : new Ext.data.ArrayStore({
fields : ['abbr', 'action'],
data : [['1', 'none'],
['2', 'dotted'],
['3', 'dashed'],
['4', 'solid'],
['5', 'double'],
['6', 'groove'],
['7', 'ridge'],
['8', 'inset'],
['9', 'outset'],
['10', 'inherit']]
}),
displayField : 'action',
valueField : 'abbr',
mode : 'local',
minWidth : 60,
maxWidth : 125,
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
emptyText : 'Select Style'
},{
xtype : 'combo',
id : 'widthCombo_block',
store : new Ext.data.ArrayStore({
fields : ['abbr', 'action'],
data : [['1', '1'], ['2', '2'],
['3', '3'], ['4', '4'],
['5', '5'], ['6', '6'],
['7', '7'], ['8', '8'],
['9', '9'], ['10', '10'],
['11', '11'], ['12', '12'],
['13', '13'], ['14', '14'],
['15', '15']]
}),
fieldLabel : 'Width',
labelWidth : 30,
displayField : 'action',
valueField : 'abbr',
mode : 'local',
minWidth : 70,
maxWidth : 125,
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
emptyText : 'Select Width'
},{
xtype : 'button',
text : 'Apply',
padding:'0 0 0 5',
maxWidth : 50,
handler : function() {
if(undoStack[0] == undefined){
undoStack.push(Ext.getCmp('admin_customize_panel').body.dom.innerHTML);
}
var temp_style = Ext.getCmp('styleCombo_block').getRawValue() ;
var temp_width = Ext.getCmp('widthCombo_block').getRawValue() ;
var temp_email_backgrd_color = Ext.getCmp('blockFormatingColor').getValue() ;
if (temp_email_backgrd_color == null || temp_email_backgrd_color == "" || temp_email_backgrd_color.length < 1) {
alert("Please choose color.") ;
} else if(temp_style == null || temp_style == "" || temp_style.length < 1){
alert("Please select style.") ;
}else if(temp_width == null || temp_width == "" || temp_width.length < 1){
alert("Please select width.") ;
}else{
var temp_customize_panel = Ext.getCmp(active_block_id) ;
temp_customize_panel.setBodyStyle('borderStyle',temp_style);
temp_customize_panel.setBorder(temp_width);
temp_customize_panel.setBodyStyle('borderColor', "#"+temp_email_backgrd_color);
Ext.getCmp('blockFormatingColor').setValue("") ;
storeContent();
}
}
}]
});

var blockPadding = Ext.create('lib.Commons.Components.Containers.MailTrackPanel', {
title : 'Padding',
border: 'layout',
region: 'center',
visible : true,
width:400,
height:195,
items : [{
xtype : 'combo',
id : 'panelposition',
store : new Ext.data.ArrayStore({
fields : ['positionid', 'action'],
data : [['1', 'none'], ['2', 'All'], ['3', 'top'],
['4', 'bottom'], ['5', 'left'], ['6', 'right']]
}),
fieldLabel : 'Position',
padding:'0 0 0 10',
labelWidth : 45,
displayField : 'action',
valueField : 'action',
minWidth : 70,
maxWidth : 125,
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
emptyText : 'Select Position'


},{
xtype : 'combo',
id : 'panelwidth',
store : new Ext.data.ArrayStore({
fields : ['widthid', 'action'],
data : [['1', '1'], ['2', '2'], ['3', '3'], ['4', '4'],
['5', '5'], ['6', '6'], ['7', '7'], ['8', '8'],
['9', '9'], ['10', '10'], ['11', '11'],
['12', '12'], ['13', '13'], ['14', '14'],
['15', '15']]
}),
fieldLabel : 'Width(pixels)',
labelWidth : 75,
padding:'0 0 0 10',
displayField : 'action',
valueField : 'widthid',
minWidth : 70,
maxWidth : 125,
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
emptyText : 'Select Width'


},{
xtype : 'button',
text : 'Apply ',
margin:'0 0 0 5',
handler : function() {
if(undoStack[0] == undefined){
undoStack.push(Ext.getCmp('admin_customize_panel').body.dom.innerHTML);
}
var Active_block_padding = Ext.getCmp(active_block_id);
var position = Ext.getCmp('panelposition').getValue() ;
var widthinpx = Ext.getCmp('panelwidth').getValue();
if (position == 'All') {
Active_block_padding.body.setStyle('padding', widthinpx+"px");
storeContent();
} else if (position == 'left') {
Active_block_padding.body.setStyle('padding-left',widthinpx+"px");
storeContent();
} else if (position == 'right') {
Active_block_padding.body.setStyle('padding-right', widthinpx+"px");
storeContent();
} else if (position == 'top') {
Active_block_padding.body.setStyle('padding-top', widthinpx+"px");
storeContent();
} else if (position == 'bottom') {
Active_block_padding.body.setStyle('padding-bottom', widthinpx+"px");
storeContent();
}



}
}]
}) ;

var blockEdit = Ext.create('lib.Commons.Components.Containers.MailTrackPanel', {
width:788,
height:587,
title:'Contact Management',
collapsable:true,
layout :{
type:'vbox',
},

items:[block_background_color, blockFormatting, blockPadding]
});

var editGridPanel = Ext.create('lib.Commons.Components.Containers.MailTrackPanel', {
height: 600,
width: 400,
title: 'Block Content Editor',
id: 'block_editor_panel',
loadMask: true,
layout: 'border',
region: 'west',
tbar: [{
text: 'Apply',
xtype: 'button',
handler: function() {
Ext.getCmp(active_block_id).update(Ext.getCmp('htmlBlockEditor').getValue()) ;
Ext.getCmp('htmlBlockEditor').setValue("") ;
me.close() ;
}
}],
items:[{
id : 'htmlBlockEditor',
xtype : 'htmleditor',
autoScroll : true,
enableColors : true,
enableAlignments : false,
enableFont : true,
enableFontSize : true,
width:500,
height: 600,


}]
});

var TagsGridPanel = Ext.create('lib.Commons.Components.Grid.MailtrackGridPanel', {
store:tagStore,
collapsible: true,
collapseDirection: Ext.Component.DIRECTION_LEFT,
layout: 'border',
region: 'west',
width: 280,
height: 400,
title: "Tag Library",
id:'tagGrid',
loadMask : true,
columns: [{
text: '<b>Name</b>',
width: 220,
renderer : this.tagName,
id: 'tagName',
name:'tagName',
dataIndex: 'tagName'
},
{
text: '<b>Button</b>',
xtype:'actioncolumn',
width: 60,
items:[{
icon:'mailtrack/view/resources/images/apply.png',
iconCls: 'click',
enableToggle: true,
pressed: true,
handler:function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var exmpl=rec.get('tagName');
var before = Ext.getCmp('htmlBlockEditor').getValue();
if(Ext.getCmp('htmlBlockEditor').activated){
Ext.getCmp('htmlBlockEditor').insertAtCursor(exmpl) ;
}else{
Ext.getCmp('htmlBlockEditor').setValue(before+exmpl);
}
}
},
]},
]
});


var tagAndImageLibrary = Ext.create('lib.Commons.Components.Containers.MailTrackPanel', {
layout: 'border',
region: 'north',
width: '90%',
height: 700,
items:[,TagsGridPanel,blockEdit]
});

var editorStyleCollection = Ext.create('lib.Commons.Components.Containers.MailTrackPanel', {
height: 600,
width: 1100,
collapsable:true,
title: 'Block Edit',
layout: 'border',
region: 'center',
items: [tagAndImageLibrary]
}) ;

var me = this;
Ext.applyIf(me, {
layout: 'border',
items:[editGridPanel,editorStyleCollection]
});
me.callParent(arguments);
}
});
i am attaching screen shot also