I think it's very simple to answer to this question:
I have simple grid with my custom store:
//other code
{
xtype: 'grid',
store: 'SecondStore',
itemId: 'mainTabPanel2',
columns: [
//this is not from the store
{
header: 'Not Form Store',
id: 'keyId2',
},
//from the store
{
header: 'From Store',
dataIndex: 'label',
id: 'keyId',
}
]
}
the store only populate the second column with id: keyId. In fact it have:
fields: [{ name: 'label' }]
And this work well.
I want to get from a function the row n°1 of this grid.
handler: function() {
var grid = Ext.ComponentQuery.query('grid[itemId="mainTabPanel2"]')[0];
//var row= get row(1) <- i don't know how to get the complete row
}
I'm working with ExtJs 4 so i can't get it with the command grid.getView().getRow(1);
I can't get it from the store because i want to get also the content of the column with id:keyId2 that is not stored in the store, so I can't do something like:
grid.getStore().getAt(1);
Anyone know how to get the complete row in ExtJs 4?
Thank you!
You can solve in this ExtJS 4.x using getNode: grid.getView().getNode(index)
getNode can take an HTML ID (not very useful), an index, or a store record.
I think you need something like this:
Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
alert(grid.getStore().getAt(1).data.name);
});
jsFiddle: http://jsfiddle.net/RftWF/
Get FireBug plugin and monitor the grid at 'handler'. If you see the data from the column keyId2 than you can see the way in the firebug too. i.e grid object->store object-> data array.
Can you tell us how did you add data in the column keyId2 of the grid ?
I've solved accesing the DOM:
/* Get Dom of the first grid */
var DOMgrid = Ext.select('#'+gridview.getId());
var gridChild = DOMgrid.elements[0].children[1].children[0].children;
Then you should get the "children" you are interested to simply following the DOM structure.
You can also get the singleton flyweight element applying the Ext.fly() comand and update the content with the update() comand:
Ext.fly(/*DOM object here*/).update(/*raw content here*/)
Related
below i have a kendoUI grid that fetches data from a server. The user can then edit two columns in the grid. I have a separate button that will post the data back to the server and i do not use the kendo grid's UPDATE transport for this. The problem i am having is that if i fetch the data from the grid, it does not reflect the user inputs. For example, to get to the underlying data for the grid i do the following:
products= $("#Grid").data("kendoGrid").dataSource.data()
But when i iterate over products and check the NewPrice or Comment property, it's always blank. Here is how the grid's data source is defined:
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Portal/API/GetProductPrices?id=" + pId,
dataType: "json",
success: function (data) {
localModel.userId = data.userId;
localModel.products = data.Products;
return options.success(model.products);
},
});
}
},
},
scrollable: false,
selectable: true,
schema: {
model: {
id: 'Id',
fields: {
Item: { type: 'string', editable: false },
Price: { type: 'number', editable: false },
NewPrice: { type: 'number', editable: true },
Comment: { type: 'string', editable: true, validation: { required: true } },
}
}
},
columns: [
{ field: "Price", title:"Price"},
{
field: "NewPrice", title: "<span class='editMode'>Proposed Value</span>", format: "{0:p}", attributes: { style: "text-align:center;" }, headerAttributes: { style: "text-align:center;" }, width: "50px",
template: "#=NewValueTemplate(data)#",
},
{ field: "Comment", title: "<span class='editMode viewWorkflowMode'>Notes</span>", width: "210px", template: "#=NotesTemplate(data)#" },
]
Any advice in resolving would be appreciated
You haven't specified the editing type that you are using.
Which type are you using: inline, batch or popup ?
Is only this the datasource ? I see no update function.
I suggest you take a look at the three demos.
Batch
Inline
Popup
The worst thing is that you haven't specified the value of the property editable.
By default it is false, that means the kendoGrid is not editable, even if you have specified editable: true over your model fields.
Shortcut to "Editable" configuration
update #2 :
As already said here
If the data source is bound to a remote service (via the transport option) the data method will return the service response.
So, when you use dataSource.data() method on your grid, if you haven't updated correctly your datasource, you should receive all "old" data. (I found strange that you get blank value over those properties, maybe a cache problem)
As I already said, your dataSource doens't provide no update function.
Here you are an example about the configuration of the update function in kendo dataSource, with request to remote service.
Suggest you to look on both examples:
Example - specify update as a string and Example - specify update as a function
Please implement the logic from the following example:
var _roleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, title: "Software Engineer" },
{ id: 2, title: "Quality Assurance Engineer" },
{ id: 3, title: "Team Lead" },
{ id: 4, title: "Manager" }
]
});
var _peopleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
{ id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
{ id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" },
{ id: 4, name: "Russell", roleId: 4, roleTitle: "Manager" }
]
});
var _grid = $("#grid").kendoGrid({
dataSource: _peopleDataSource,
columns: [
{
field: "name",
title: "Name"
},{
field: "roleTitle",
title: "Role",
editor: function(container, options) {
$("<input data-bind='value:roleTitle' />")
.attr("id", "ddl_roleTitle")
.appendTo(container)
.kendoDropDownList({
dataSource: _roleDataSource,
dataTextField: "title",
dataValueField: "title",
template: "<span data-id='${data.id}'>${data.title}</span>",
select: function(e) {
var id = e.item.find("span").attr("data-id");
var person =_grid.dataItem($(e.sender.element).closest("tr"));
person.roleId = id;
setTimeout(function() {
$("#log")
.prepend($("<div/>")
.text(
JSON.stringify(_grid.dataSource.data().toJSON())
).append("<br/><br/>")
);
});
}
});
}
}
],
editable: true
}).data("kendoGrid");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<br/>
<div id="log"></div>
You may view the demo here: http://jsfiddle.net/khNsE/175/
In this case, i needed to allow some rows based on data rules to enter 'edit mode' at the same time, so specifying inline, popup, etc was not an option. What i did instead was use a custom template function when defining the grid columns. the custom template function returned html, but in the html i used the data-bind attribute to bind to my model. Finally on the DataBound event of the grid, i bind my model to the rows.
field: "NewPrice", title: "New", format: "{0:p}", template: "#=newValueTemplate(d)#",
....
....
function newValueTemplate(d){
if (d.IsEditable)
return "<input type='number' data-bind='value:NewPrice' />"
else
return "<span />"
}
function gridDataBound(e){
var items = this.dataSource.view();
var gridRows = this.tbody.children();
for (var i = 0; i < items.length; i++)
kendo.bind(gridRows[i], items[i]);
}
My ExtJS Grid is not showing my store data. Using ExtJS 5
This is my grid (it's within a hbox):
{
xtype: 'grid',
title: 'Company Manager',
id: 'companyGrid',
flex: 1,
plugins: 'rowediting',
columnLines: true,
store: Ext.data.StoreManager.lookup('companyStore'),
columns: {
items: [{
header: 'ID',
dataIndex: 'id',
},
{
header: 'Name',
dataIndex: 'name',
},
{
header: 'Token',
dataIndex: 'access_token'
},
]
}
}
This is my store (I use the Google Extension of Sencha and it's filled with my data so this works + the ending }); were ignored by the coding block):
var companyStore = Ext.create('Ext.data.Store', {
storeId: 'companyStore',
proxy: {
type: 'ajax',
url: 'resources/data/company.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'access_token',
type: 'string'
}],
autoLoad: true
});
Does anyone know were I went wrong here?
I have tried: Reloading the store, checking if the store is actually filled, refreshing the grid view.
Nothing I tried worked and I decided to ask you guys for advice :)
#Evan Trimboli
You made me think and I fiddled arround for a second and found the following solution.
Instead of using the
store : Ext.data.StoreManager.lookup('companyStore'),
I used
bind : '{companyStore}',
And moved the define store towards the CompanyModel.js file :) now it works properly!!!!
Thanks :D
Going through the ExtJS documentation I got lost among the names and couldn't find the components I needed. I'd like to show the properties of an object like this:
Name: name
Address: address
With JSF, I would use a panelgrid with outputText tags. Is there a component like that?
And there's something else: I'd like to make this panel "closeable" like an accordion or something like that so the user could hide the information if not needed, but I couldn't make the accordion panel's size adapt to the content. When I used an accordionpanel in primefaces the panel was resized if the content changed. Is there any way you can do this with ExtJS?
Well, how about this:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
collapsible: true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
I have a simple case where I got a grid with an attached store.
There are 2 buttons. One with a handler that modifies the selected record. One with a handler that commits the selected record.
When I select a record and push edit -> editing takes place selection (looks lost) if you call grid.geSelectionModel().getSelection() you will see that the record is still selected. It just doesn't show it that way.
You can't select it again, you first have to select another record, and select the record back.
Secondly when you select a record click on the commit button, the value is committed, but the selection 'appears' again as lost.
Is this a bug? How can I fix this? I want it to keep the selection visible!
Here is a fiddle
and here is the sample code: (I use Ext 4.1.1)
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.container.Container', {
layout: 'fit',
renderTo: Ext.getBody(),
items: [{
xtype: 'grid',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
buttons: [{
text: 'commit selection',
handler: function(){
this.up('grid').getSelectionModel().getSelection()[0].commit();
}
},{
text: 'set selection name to maggy',
handler: function(){
this.up('grid').getSelectionModel().getSelection()[0].set('name', 'Maggy');
}
}]
}]
});
UPDATE:
I reported it on the sencha forum. Mitchel Simoens told me it's fixed in Ext 4.1.2. Too bad it's a 'Support subscriber only' version..
UPDATE:
I'm locating the issue to try and fix it. I believe the issue is located in the Ext.view.Table class in onUpdate method, more precise around this piece of code:
if (oldRowDom.mergeAttributes) {
oldRowDom.mergeAttributes(newRow, true);
} else {
newAttrs = newRow.attributes;
attLen = newAttrs.length;
for (i = 0; i < attLen; i++) {
attName = newAttrs[i].name;
if (attName !== 'id') {
oldRowDom.setAttribute(attName, newAttrs[i].value);
}
}
}
Is it a bad idea to just leave this piece of code out? I commented it out it seems like it's working now, but won't it break some other functionality? http://jsfiddle.net/Vandeplas/YZqch/10/
I think its a bug, maybe as part of refreshing the grid to show the dirty bits.
I circumvented this in an ugly way, in your revised fiddle:
{
text: 'set selection name to maggy',
handler: function(){
var sel = this.up('grid').getSelectionModel();
var rec = sel.getSelection()[0];
rec.set('name', 'Maggy');
sel.deselectAll();
sel.select(rec.index);
}
}
I did this for .set(), but the same can be done for commit()
Hope this helps somewhat.
How to populate form with JSON data using data store? How are the textfields connected with store, model?
Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [
{name: 'naziv', type:'string'},
{name: 'oib', type:'int'},
{name: 'email', type:'string'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
type: 'ajax',
url : 'app/myJson.json',
reader:{
type:'json'
}
},
autoLoad:true
});
Ext.onReady(function() {
var testForm = Ext.create('Ext.form.Panel', {
width: 500,
renderTo: Ext.getBody(),
title: 'testForm',
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
title: 'Contact Information',
items: [{
xtype:'textfield',
fieldLabel: 'Name',
name: 'naziv'
}, {
xtype:'textfield',
fieldLabel: 'oib',
name: 'oib'
}, {
xtype:'textfield',
fieldLabel: 'mail',
name: 'email'
}]
}]
});
testForm.getForm().loadRecord(app.formStore);
});
JSON
[
{"naziv":"Lisa", "oib":"2545898545", "email":"lisa#simpson.com"}
]
The field names of your model and form should match. Then you can load the form using loadRecord(). For example:
var record = Ext.create('XYZ',{
name: 'Abc',
email: 'abc#abc.com'
});
formpanel.getForm().loadRecord(record);
or, get the values from already loaded store.
The answer of Abdel Olakara works great. But if you want to populate without the use of a store you can also do it like:
var record = {
data : {
group : 'Moody Blues',
text : 'One of the greatest bands'
}
};
formpanel.getForm().loadRecord(record);
I suggest you use Ext Direct methods. This way you can implement very nice and clean all operations: edit, delete, etc.