I am using superboxselect for one of my projects. I need to perform some additional filtering. Therefore i need to be able to do it in the keyup event.
But i can not get it to work.
var test = new Ext.ux.form.SuperBoxSelect( {
applyTo : 'testId',
id : 'test',
allowBlank : true,
msgTarget : 'title',
xtype : 'superboxselect',
resizable : true,
hiddenName : 'statesHidden[]',
width : 300,
store : somestore,
mode : 'local',
displayField : 'name',
valueField : 'code',
classField : 'cls',
styleField : 'style',
extraItemCls : 'x-flag',
extraItemStyle : 'border-width:2px',
stackItems : true,
listeners : {'keyup' : testFunction}
});
function testFunction(){
alert("hola");
}
set enableKeyEvents property as true.
enableKeyEvents: true
Related
I have a combobox gets the list of values from serverside. When I add a new
value in db ,it will reflect at the last index of the combobox.My requirement is
for a given value I want to change the index to zero.
For example if I added x and y as new values , now I want to change the
index of x to zero.
My combobox code:
{
xtype : 'combo',
//typeAhead : true,
triggerAction : 'all',
name : 'agreementTypeCombo',
id : 'agreementTypeCombo',
//hiddenName : 'agreementTypeCombo',
editable : false,
mode : 'local',
store : new Ext.data.JsonStore({
fields : [{
name : 'id',
mapping : 'id'
}, {
name : 'label',
mapping : 'label'
}
],
idProperty : 'id',
data : MD_updateOpportunityMasterDataVO.agreementTypeList
}),
valueField : 'id',
displayField : 'label',
//emptyText : CONST_NOT_AVAILABLE,
fieldLabel : 'Agreement Type',
labelStyle: 'font-weight:bold;',
helpText : getFieldTip(MODULE_NAME,CATEGORY_SALES_SUMMARY,'Agreement Type'),
//allowBlank : false,
anchor : '95%',
value : opportunityVO.agreementTypeId
}
If you add it locally use
store.insert(0, newItem);
If you add it on server and then reload then the server must return the combo store records in the required order.
I am using ExtJS 3.4 and I want to use fileupload in my application. My code and fileupload field screen shot are shown below. There is a problem about showing fileupload field, I couldn't solve this error. Anyone can help?
var uploadFormPanel = new Ext.FormPanel({
fileUpload : true,
autoHeight : true,
height : 200,
bodyStyle : 'padding: 10px 10px 0 10px;',
labelWidth : 50,
defaults : {
anchor : '95%',
allowBlank : false,
msgTarget : 'side'
},
items: [
{
xtype : 'combo',
fields : ['id','name'],
name : 'fuelCompany',
store : comboStore,
valueField : 'id',
displayField : 'name',
submitValue : true,
typeAhead : true,
triggerAction : 'all',
selectOnFocus : true,
allowBlank : false,
mode : 'remote',
anchor : '95%'
},{
xtype : 'fileuploadfield',
id : 'form-file',
name : 'file',
buttonText : 'select file',
buttonCfg : {
iconCls : 'upload-icon'
}
}
]
});
It's a little tricky, but I think I figured out how to get the button showing the text:
//...
{
xtype : 'fileuploadfield',
id : 'form-file',
name : 'file',
buttonCfg : {
text : 'select file'
}
}
//...
You need to place the button text in the buttonCfg for the button to size correctly. The only drawback is that you can't add an iconCls to the button if you want it to automatically resize. As an alternative, you could use a little workaround:
//...
{
xtype : 'fileuploadfield',
id : 'form-file',
name : 'file',
buttonCfg : {
// The text cfg takes html too
text : '<div class="upload-icon"' +
' style="width: 15px; height: 15px; display: inline-block;' +
' margin: 0 5px;"></div>' +
'select file'
}
}
//...
It can not reach css file, I put css style in jsp file where my javascript code defined my problem solved.
I'm trying to make a combobox that dependent from other combobox with default values but into the listeners of combobox must loading data of itself . I have the problem when using this.store.loadData(todoItems) with todoItems as an array of four positions.
This's store:
var cmb_items = new Ext.data.SimpleStore({
fields : ['itemId', 'item'],
data : itemsMenu
});
I dont know why. Here is my code, can anyone lend me a hand?
{
xtype : 'combo',
store : cmb_items,
hiddenName : 'id_item',
valueField : 'id_item',
mode : 'local',
allowBlank : false,
value : nombreItem,
fieldLabel : 'items',
disabled : true,
name : 'items',
triggerAction : 'all',
emptyText : 'Seleccione un item',
editable : false,
id : "items",
anchor : '90%',
displayField : 'item',
listeners : {
select: function () {
idSistema = Ext.getCmp("sistemas").getValue();
selectedMenu = Ext.getCmp("menus").getValue();
todoItems = getItemsMenu(selectedMenu,idSistema);
//alert(todoItems)
this.store.loadData(todoItems);
idItem = this.getValue();
alert(idItem); // RETURN UNDEFINED
for(i=0;i<this.store.getCount();i++){
if(todoItems[i][0]==idItem){
nombreItem = todoItems[i][1];
outItem = todoItems[i][2];
}
}
}
}
},
Thank you!
I'm not much clear with code, but if you're looking for combo depends another means, try my example.
var countryStore = new Ext.data.SimpleStore({
fields: ['alpha2code','name'],
data: [["BE","Belgium"],["BR","Brazil"],["BG","Bulgaria"]]
});
function getState(stCode){
var data=[];
switch(stCode){
case 'BE':
data=[["BE","Belgium1"],["BR","Brazil1"],["BG","Bulgaria1"]];
break;
case 'BR':
data=[["BE","Belgium2"],["BR","Brazil2"],["BG","Bulgaria2"]];
break;
case 'BG':
data=[["BE","Belgium3"],["BR","Brazil3"],["BG","Bulgaria3"]];
break;
}
return data;
};
var statesStore = new Ext.data.SimpleStore( {
fields: ['statecode','name']
});
var stateForm = new Ext.form.ComboBox({
fieldLabel : 'Country',
id : 'countryCombo',
name : 'country',
msgTarget : 'side',
triggerAction : 'all',
lazyRender : true,
store : countryStore,
mode: 'local',
valueField : 'alpha2code',
emptyText : 'Create or Select an partment',
displayField : 'name',
editable : true,
listeners:{
'select': function(combo,value,index){
debugger;
var input = combo.getValue();
var stateCombo=Ext.getCmp('statesCombo');
//stateCombo.clearValue();
//stateCombo.store.baseParams.countryID=input;
stateCombo.store.loadData(getState(input));
}
}
});
var stateForm1 = new Ext.form.ComboBox({
fieldLabel : 'States',
id : 'statesCombo',
name : 'states',
mode: 'local',
msgTarget : 'side',
triggerAction : 'all',
lazyRender : true,
store : statesStore,
valueField : 'statecode',
emptyText : 'Create or Select an Department',
displayField : 'name',
editable : true
});
var formPanel = new Ext.form.FormPanel({
title: 'World',
labelWidth: 120,
width: 350,
padding: 10,
items:[stateForm,stateForm1]
});
formPanel.render(document.body);
There are two comboboxes, one's data is fixed, the other is request from the servlet with AJAX. If I click the fixed combobox first, the other combobox's data is correctly loading, but if I click the other combobox first, then I click the fixed combobox, the other combobox will be loading along.
var win_form_combox0 = Ext
.create(
'Ext.form.field.ComboBox',
{
flex : 1,
name : 'combox0',
allowBlank : false,
store : Ext
.create(
'Ext.data.Store',
{
model : 'Combox',
proxy : {
type : 'ajax',
url : 'interfaceInfoFindController.do?actionType=FINDTRANSFORMERCOMBOX0'
},
autoLoad : true
}),
editable : false,
displayField : 'displayField',
valueField : 'value',
queryMode : 'local',
value : 'transformer',
listeners : {
select : function(combox) {
win_form_combox1.store.removeAll();
win_form_combox1.store.load();
//win_from_combox1.stopAnimation();
//win_form_combox1.setValue(combox.value);
}
}
});
var win_form_combox1 = Ext
.create(
'Ext.form.field.ComboBox',
{
flex : 2,
name : 'combox1',
margins : '0 0 0 5',
editable : false,
displayField : 'displayField',
valueField : 'value',
queryMode : 'local',
value : false,
store : Ext
.create(
'Ext.data.Store',
{
model : 'Combox',
data : [ {
value : false,
displayField : '请选择'
} ],
proxy : {
type : 'ajax',
url : 'interfaceInfoFindController.do?actionType=FINDTRANSFORMERCOMBOX1'
},
autoLoad : false,
listeners : {
load : function() {
win_form_combox1
.setValue(win_form_combox1.store
.getAt(0).data.displayField);
}
}
}),
listeners : {
select : function(combox) {
win_form_combox2.store.load();
//win_form_combox2.setValue(combox.value);
}
}
});
I have this code. If i click on button my form parameters are inserting into database. How i can do it?? what i should write there?
And if i click on reset form, my window closing. Please help! Thank you!
var AddQuestion = new Ext.Button({
method : 'POST',
url : '/questions/create',
tooltip : 'Add Question',
icon : '/images/icons/silk/add.png',
iconCls : 'add',
style : 'margin-right: 60px;float:right;',
handler : function() {
new Ext.Window({
title : 'Add Question',
width : 700,
height : 800,
bodyStyle : 'padding: 10px',
layout : 'form',
modal : true,
closable : true,
resizable : false,
draggable : false,
autowidth : true,
items :[
{
fieldLabel : 'Question',
name : 'question[text]',
xtype : 'htmleditor',
enableFont : false,
enableFormat : false,
enableFontSize : false,
enableLists : false,
enableAlignments: false,
enableFont : false,
enableColors : false,
height : 160,
width : 560
},
{
name :'form_type',
fieldLabel :'Form Type',
xtype :'combo',
triggerAction :'all',
mode :'local',
editable : false,
allowBlank : false,
emptyText :'You should Choose any...',
store :new Ext.data.SimpleStore({
fields :['mode', 'name'],
data :[
['1', 'TextArea Question'],
['2', 'Scale Question'],
['3', 'TextArea + Scale Question']
]
}),
displayField :'name',
valueField :'mode',
hiddenName :'form_type'
},
{
xtype : 'itemselector',
name : 'selected_respondents',
imagePath : '../ux/images/',
bodyStyle : 'background:#DFE8F6',
multiselects: [{
legend : 'All Respondents',
width : 270,
height : 350,
store : st,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
},{
legend : 'Selected Respondents',
width : 270,
height : 350,
store : st2,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
}]
},
{
fieldLabel :'To do',
xtype : 'button',
text : 'Refresh respondents ↑',
height : 30,
icon : '/images/icons/silk/arrow_refresh_small.png',
width : 180,
handler: function(){
if((who_is_admin == '1') || (who_is_admin == '0')){
if (st2.getCount() == 0){
st.reload();
}else
{
Ext.Msg.show({
title : 'Message for You',
msg : "You should left <i>'Selected Respondents'</i> field empty to <b>refresh</b> some changes!",
modal : true,
Height : 200,
closable : true,
resizable : false,
draggable : false,
Width : 300,
buttons : Ext.Msg.OK
});
}
}
}
},
{
xtype : 'checkbox',
boxLabel : 'Make Question Active',
inputValue : '1',
name : 'is_active',
hiddenName : 'is_active',
checked : true
},
],
buttons: [{
text: 'Reset Form',
handler: function(){
}
},{
text: 'Submit Form',
handler: function(){
}
}
}] // button end
}).show(); //show window
}
});
You can do this by sending AJAX request as soon as user clicks on button.
For eg in your case handler for 'Submit Form' button should look like
Ext.Ajax.request({
url:'assertion.htm', // url of page where you want to send it
method: 'POST',
params: {
selectedSource:source.getValue() //Right hand side whatever value you want to send
},
scope:this
});