Develop Reference

Get and send id tagfield values. Extjs

There are two fields in the grid:
...
{
text: 'Спец. учетка',
sortable: true,
dataIndex: 'specuserName',
flex: 2,
editor: {
xtype: 'combobox',
store: 'Vendors',
displayField: 'name',
valueField: 'name',
//editable: false,
queryMode: 'remote',
//forceSelection: true,
triggerAction: 'all',
allowBlank: true
}
},
{
header: 'Сотрудники группы',
dataIndex: 'users',
flex:2,
editor: {
xtype: 'tagfield',
typeAhead: true,
queryMode: 'remote',
filterPickList: true,
triggerOnClick: true,
displayField: 'name',
valueField: 'name',
triggerAction: 'all',
store: 'IntraUsers',
}
},
...
ViewController looks like that:
Ext.define('App.view.MainIntranetController', {
extend: 'Ext.app.ViewController',
alias: 'controller.intranetcontainer',
onGridEditorIntraEdit: function (editor, ctx, eOpts) {
//combobox
var vendorColIdx = 2;
var combo = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
var vendorRecord = combo.findRecord('name', combo.getValue());
console.log(vendorRecord);
ctx.record.set('specuserId', vendorRecord.get('id'));
//tagfield
var vendorColIdx = 3;
var tagfields = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
var valuetag = tagfields.getValue();
//ctx.record.set('mainusersId', vendorRecord.get('id'));
//ctx.record.set(valuetag);
//console.log(ctx.record);
//ctx.grid.getStore().sync();
}
});
First I get the id of the selected combobox values ​​and set it to send to the server, and then I try to get the id of the selected tagfields values ​​to send them to the server, but I don’t get it right.
How to make the id of the selected values ​​with tagfield go to the server.
Thanks.

Since setting the tagfield's displayField to "name" prevents getting the array of selected record ids, another way to achieve this is by using tagfield's getValueRecords method. We can pass the result of this method to the Array's map function and gather only the ids:
var tagfieldSeletedIds = Ext.Array.map(tagfield.getValueRecords(), function(record) {
return record.getId()
});

how to apply navigation in extjs grid

I want to load only 25 rows at a time in grid. After clicking next button next 25 rows should be added. Data in grid is in json format and it is from servlet. I am getting json data from servlet. But i want to load particular part only. How can implement please help me.
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
'sno',
'name', 'salary'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
//url: 'http://localhost:8080/sampleweb/AccessServlet',
url: 'http://localhost:8080/sampleweb/DataServlet',
// the return will be XML, so lets set up a reader
reader: {
type: 'json',
root:'jsonObj'
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "sno",width:140, dataIndex: 'sno', sortable: true
,editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}},
{text: "name", width: 180, dataIndex: 'name', sortable: true,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
]}},
{text: "salary", width: 180, dataIndex: 'salary', sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 1000000
}},
{
xtype: 'actioncolumn',
width: 30,
sortable: true,
menuDisabled: true,
items: [{
icon: 'http://etf-prod-projects-1415177589.us-east-1.elb.amazonaws.com/trac/docasu/export/2/trunk/client/extjs/shared/icons/fam/delete.gif',
handler: function(grid, rowIndex, colIndex) {
store.removeAt(rowIndex);
}
}]
}
],
renderTo:'example-grid',
width: 560,
plugins: [rowEditing],
height: 400
});
});

You need pagination, take a look at the example provided by Sencha. Basically, all you have to do on the front-end is to add and configure one paging toolbar and the framework takes care about the rest. The real job is on the server side where your servlet will have to parse start and limit parameters, include them in queries and return the appropriate data. This is an example of the request generated by ExtJS once you correctly incorporated paging toolbar:
{
//your request data
..
start: 0,
limit: 25
}
This request will fetch first 25 rows. Of course you can configure the number of rows in your application.

You just have to add
limitParam : 10,
pageParam :'pageNumber',
in the proxy attribute of store. If you want to load a specific page use
grid.getStore().currentPage = The Page Number You Want To Load;
before loading the store.

how to get the value on extjs combo box?

I have a following code for combo box, how can I get the value that is selected in the combobox and load that value into a variable, and use it later.
Thank you
Ext.define('Column', {
extend: 'Ext.data.Model',
fields: ['data1', 'Data2']
});
var store = Ext.create('Ext.data.Store', {
model: 'Column',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/data.xml',
reader: {
type: 'xml',
record: 'result'
}
}
});
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
store: store,
displayField: 'data1',
valueField: 'data1',
width: 250,
labelWidth: 120,
fieldLabel: 'select a value',
renderTo: 'simpleCombo',
queryMode: 'local',
typeAhead: true
});

Simply use the select event
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
store: store,
displayField: 'data1',
valueField: 'data1' ,
width: 250,
labelWidth: 120,
fieldLabel: 'select a value',
renderTo: 'simpleCombo',
queryMode: 'local',
typeAhead: true,
listeners: {
select: function(combo, records) {
// note that records are a array of records to be prepared for multiselection
// therefore use records[0] to access the selected record
}
});
API Link
Additional content from the comments:
Take a look at the multiSelect property of the combobox. You get all values separated by a defined delimiter and the select event will give you a records array with more that one record. Note the that getValue() only give you the defined displayField which is a string and not the record itself. So using iComboValue[0] gives you the first character. The selected records should always be accessed using the selected event. But you may store them in a array for later use and overwrite it with any new select.

You can also use:
var iComboValue = simpleCombo.getValue();

may be you should try this
// to get the combobox selected item outside the combo listener
simpleCombo.on('change', function (combo, record, index) {
alert(record); // to get the selected item
console.log(record); // to get the selected item
});

Populate ExtJS combobox with JSON

I am using ExtJS (3) and just trying to populate a combobox/drop down using records from the database that are being queried using JSON.
Here is my JSON call:
var projectDropDown = new Ext.data.Store({
autoLoad: true,
url: 'dropdown.json',
storeId: 'projectDropDown',
idProperty: 'ProjectID',
fields: [ 'ProjectID', 'ProjectName' ]
});
And then my combobox code:
{
xtype: 'combo',
id: 'ProjectName',
fieldLabel: 'Project Name',
valueField: 'ProjectID',
displayField: 'ProjectName',
store: projectDropDown,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a Project...',
selectOnFocus:true
}
The JSON is returning my data like this:
[
{
"ProjectID":"1",
"ProjectName":"Mike's Test Project"
},
{
"ProjectID":"2",
"ProjectName":"My Second Test Project"
},
{
"ProjectID":"3",
"ProjectName":"My Third Project"
},
{
"ProjectID":"6",
"ProjectName":"More testing from me"
}
]
I think I am close, I just don't see what I am missing to make the connection.
Thanks for any assistance.

The first step I would do would be to output the store (or size of the store or something) to the console to see if the data is getting loaded properly into the store.
My guess would be that you need to enclose your JSON that is returned into some root object. Try giving your store a JSONReader with a root element specified like so:
var projectDropDown = new Ext.data.Store({
autoLoad: true,
url: 'dropdown.json',
storeId: 'projectDropDown',
reader: new Ext.data.JsonReader(
{
root: 'projects'
}),
idProperty: 'ProjectID',
fields: [ 'ProjectID', 'ProjectName' ]
});
Then change the JSON returned to look like this instead
{
"projects" : [
{"ProjectID":"1","ProjectName":"Mike's Test Project"},
{"ProjectID":"2","ProjectName":"My Second Test Project"},
....
]
}

ExtJs. Easyest way to show empty grid

I'm using ExtJs 4. I have a grid, but i don't have a store or columns pre defined. I just don't know what grid should be showing. But i still nead to render grid using Json markup.
I want to do something like this:
//grid with empty store and no collumns
{
xtype: 'grid',
columns: [],
store: new ArrayStore([])
}
What is the easyest way to do this?

You can't load create a grid without any columns.. however you can create one without any data (just set store to autoload: false). For example..
{
xtype: 'grid',
//..other config here
store: new Ext.data.JsonStore({
url: 'store/url.php',
autoLoad: false
}),
cm: new Ext.grid.ColumnModel({
columns: [
{ dataIndex: 'id', header: ' ' }
]
})
}