If I use 'x-form-search trigger' as iconCls in a button, the search(magnifying glass) icon appears as an image inside of the button. How do I make the icon the button and not an image inside the button?
Or is there any other way to get the search icon as a button?
Instead of adding a button with search icon you can write a trigger click function and than on click of the search icon i.e a trigger of the combo you can write your logic or call a function
Below is the example
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
onTrigger1Click: function(event) {
alert('WRITE YOUR LOGIC HERE');
},
});
Related
I have a table in my database which contains a list of Countries and their respective country codes as shown below:
country country code
------- -------------
Canada CA
Russia RU
USA US
China CN
France FR
When I select the country from the combobox I would like the textfield in the form to populate its respective country code. Does anyone know how this can be accomplished?
My combobox is defined as below:
{
xtype: 'combobox',
labelAlign: 'top',
fieldLabel: 'Country',
id: 'CountrySelectField',
name: 'country_id',
store: 'Country',
displayField: 'name',
valueField: 'id',
width: 300,
allowBlank:false,
}
You could try using the records argument to select event
listeners : {
select :function (combo, records, index, eOpts ){
Ext.getCmp('textbox').setValue(records[0].get('country_code'))
}
}
You should be able to add a listener to your combobox that sets the value of your textfield like this :
listeners : {
select :function (combo, records, index, eOpts ){
Ext.getCmp('myTextBox').setValue(combo.value);
}
}
With ExtJS 5 and 6 a chained store is a store that is a "view" of a source store. The chained store may be sorted & filtered independently without having any impact on the source store.
var mySourceStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name']
});
var myChainedStore = Ext.create('Ext.data.ChainedStore', {
source: mySourceStore
});
And also gridpanels can have a column with comboboxes using the widgetcolumn.
{
xtype: 'widgetcolumn',
text: 'all combos',
widget: {
xtype : 'combobox',
store : myChainedStore,
valueField : 'id',
displayField : 'name',
forceSelection: true
}
}
What I need is each row having another instance of the chained store. And depending on some other value in the row, the chained stored is filtered. In effect the combobox in each row may show a different set of values.
Is it a good approach to use widget columns and chained stores to accomplish this? How would such a solution look like?
PS: Just for the record, these are other approaches that I found to accomplish something similar:
How define differents stores for each cell combobox editor in a grid?
https://www.sencha.com/forum/showthread.php?60618-different-values-for-a-ComboBox-on-each-row-of-an-EditorGrid
You can create instance of store by using:
{
xtype: 'widgetcolumn',
text: 'all combos',
widget: {
xtype : 'combobox',
store : Ext.create('Ext.data.ChainedStore'),
valueField : 'id',
displayField : 'name',
forceSelection: true
}
}
I have filled a ng-grid with SharePoint items, I want to open the SharePoint editform in a SharePoint modal after clicking the edit button at the end of each row.
I can only make this work without the OpenPopUpPage. When I use OpenPopUpPage the {{row.entity.Id}} does not change to the row Id and as such results in a broken edit page.
Works:
{ displayName: 'Edit', cellTemplate: '<a ng-href="../lists/locations/editform.aspx?IsDlg=1&id={{row.entity.Id}}">Edit</a>' }
Opens the modal but with broken editform (not correct id):
{ displayName: 'Edit', cellTemplate: '<a ng-href="#" onclick="javascript:OpenPopUpPage(\'../lists/locations/editform.aspx?IsDlg=1&id={{row.entity.Id}}\')">Edit</a>' }
I don't know anything about sharepoint popups, but to pass a value to a function you should use this code:
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'name',
displayName: 'Name'
}, {
field: 'id',
displayName: 'Action',
cellTemplate: '<a ng-click="popup(row.entity.id)" href="#">Edit</a>'
}]
};
$scope.popup = function(id) {
// call your popup from here
alert(id);
}
Try this Plunker
I working on a kendo ui grid. The grid is not-editable as default.
In the toolbar is a 'edit' button. When the user clicks on it, the grid should be editable in batch mode like this.
The only solution to get this work is remove and recreate the grid/datasource with new properties (editable:true etc).
This works as expected. Now I want to set the focus on the first row/cell, so that the user can see that the grid is editable now (in the example below the row becomes an input field).
Any suggestions for this?
Here is a fiddle for this.
$('.k-grid-edit').on('click', function (e) {
e.preventDefault();
// remove old grid
$('#grid').html('');
// recreate grid with edit: true and new datasource
$('#grid').kendoGrid({
dataSource: dataSourceInEdit,
editable: true,
columns: [{
field: 'TableId',
title: 'Id',
width: 50
}, {
field: 'Area',
title: 'Area'
}, {
field: 'Table',
title: 'Table',
width: 60
}, {
command: 'destroy',
title: ' ',
width: 100
}]
}).data("kendoGrid");
}); // end edit
Okay, I got it:
These 2 lines make it happen:
var grid = $("#rt_tableGrid").data("kendoGrid");
grid.editRow($("#rt_tableGrid tr:eq(1)"));
Certainly only on my local script, in the Fiddle I cant´t get it to work.
Although in the Docu is written: Requires "inline" or "popup"
Documentation here
I just typed up another post and halfway through I figured out my problem. Let's see if it happens again.
I need to be able to update another drop down if a given one is selected. My problem is the secondary drop down isn't loaded the first time; nothing happens on the page. If the user selects the same element a second time, then everything works fine.
I'm programatically generating a bunch of ComboBoxes:
var item = new Ext.form.ComboBox({
store: store,
id: input.id,
name: input.id,
displayField: 'description',
valueField: 'id',
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select one...',
typeAhead: false,
editable: true,
allowBlank: allowBlank,
selectOnFocus:true,
fieldLabel: input.label,
listeners: {
scope: this,
'select': checkDependencies
},
autoHeight: true
});
My problem occurs when I try to update the dependent drop down. Here's the function that gets called when the user selects an option:
function checkDependencies(el, ev){
debug(el);
debug(el.value);
var val = el.value;
if (Ext.isArray(dependencies[val])) {
var id = dependencies[val]['changeId'];
var input = Ext.getCmp(id);
var vals = dependencies[val]["vals"];
input.store.removeAll();
gridForm.doLayout();
debug("num elements: " + vals.length);
input.autoHeight = true;
for (var i=0;i<vals.length;i++) {
input.store.add(vals[i]);
}
gridForm.doLayout(false,true);
}
}
It hits all the debug lines. There are elements in the list, but like I said, the first time the user selects an element it doesn't work, but subsequent selections work fine.
I ended up putting doLayouts eveywhere, but it didn't seem to help.
Try setting queryMode: 'local' on the secondary box, and in your checkDependencies, doing input.lastQuery = ''.