Extjs store insert roweditor - extjs

The setup:
I have a grid with a roweditor plugin. On the toolbar I have a "add new" button to insert a new row.
The problem:
When I'm trying to add a new record my store.insert(0, rec), doesn't seems to add the record on the 0 index.
My view:
Ext.define("app.view.partners.Partners",{
extend: "Ext.grid.Panel",
alias: 'widget.partners',
requires: [
"Admin.view.partners.PartnersController",
"Admin.view.partners.PartnersModel"
],
height: 700,
controller: "partners",
viewModel: {
type: "partners"
},
bind: {
store: '{partners}'
},
title: "Partners List",
columns: [
{ header: 'id', dataIndex: 'id', hidden: true},
{ header: 'Partner', dataIndex: 'Partner', flex: 3,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
tbar: [{
text: 'Add record',
iconCls: 'fa fa-plus-square green',
handler: 'onAddClick'
}],
selType: 'rowmodel',
plugins: [{
ptype: 'rowediting',
clicksToMoveEditor: 1,
pluginId: 'partnersRowEditingPlugin',
autoCancel: false,
listeners: {
edit: 'onEditClick',
canceledit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
context.store.remove(context.record);
}
}
}
},{ptype: 'bufferedrenderer'},
{ptype: 'gridfilters'}
]
});
My viewmodel:
Ext.define('app.view.partners.PartnersModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.partners',
stores: {
partners:{
model: 'app.model.Partners',
storeId: 'partners',
autoLoad: true,
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy:{
type: 'ajax',
// load remote data using HTTP
url: 'read.php',
reader: {
type: 'json',
idProperty: 'id',
rootProperty: 'data',
totalProperty:'total'
}
}
}
}
});
and in the viewcontroller:
onAddClick: function(){
var rec = new app.view.partners.PartnersModel({});
//var rec = new new Admin.model.Partners({});
this.isNewRecord = true;
var store = this.getView().getStore();
store.insert(0, rec);
this.getView().getPlugin(controllerName + 'RowEditingPlugin').startEdit(0,0);
}
here is a console.log after store.insert(0,rec)
It appears that the store does the insert, but it is inserted last. I can see it added on the grid as the last record.
I don't know what I am doing wrong.

Related

ExtJS combobox: the values loaded but doesn't show

This my code to add combobox in extjs version 2.2 ..... the data is loaded and showed empty rows and when select any row it get the right item and i want to align the label to left
Thanks in advance
Ext.onReady(function(){
var relationValues = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['DKEY', 'NAME_AR', 'NAME_EN'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'LoadRelation'
}),
autoLoad: true
});
var userForm = new Ext.form.FormPanel({
standardSubmit: true,
frame:true,
title: 'User Information',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
xtype: 'combo',
name: 'relation',
fieldLabel: 'Relation',
mode: 'local',
store: relationValues,
displayField:'NAME_EN',
valueField: 'DKEY',
//anchor: '100%',
listeners: {
select: function(f,r,i){
console.log(r);
}
}
}
],
buttons: [{
text: 'Insert',
handler: function() {
userForm.getForm().getEl().dom.action = 'login';
userForm.getForm().getEl().dom.method = 'POST';
userForm.getForm().submit();
}
},{
text: 'Reset',
handler: function() {
userForm.getForm().reset();
}
}]
});
userForm.render('mydiv');
});

extJs - GridPanel with combobox cell editing

I have a grid panel populated from local store. I added combo box for editing type cell. I want my combo box to be populated from a remote source. But I can't make it load any data. Here is my code:
Ext.define('System.view.MainTab.NewConnection.Contacts', {
extend: 'Ext.grid.Panel',
alias: 'widget.newConnectionContactsPanel',
requires: [
'Ext.grid.View',
'Ext.grid.column.Column',
'Ext.form.field.ComboBox',
'Ext.toolbar.Toolbar',
'Ext.toolbar.Fill',
'Ext.button.Button',
'Ext.grid.plugin.RowEditing'
],
height: 250,
width: 400,
itemId: 'contactsGridPanel',
title: 'My Grid Panel',
initComponent: function() {
var records = [];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'type'},
{name: 'value'}
]
});
store.loadData(records);
var me = this;
Ext.applyIf(me, {
columns: [
{
dataIndex: 'type',
xtype: 'gridcolumn',
text: 'Type',
flex: 1,
editor: {
xtype: 'combobox',
displayField: 'neme',
valueField: 'id',
queryMmode: 'remote',
store: new Ext.data.JsonStore({
proxy: {
type: 'ajax',
url: '/ws/rest/contacts/getKeywords.json?keywordType=CONTACTS',
reader: {
type: 'json',
root: 'data',
idProperty: 'id'
}
},
autoLoad: true,
fields: [
{type: 'integer', name: 'id'},
{type: 'string', name: 'name'}
]
})
}
},
{
dataIndex: 'value',
xtype: 'gridcolumn',
text: 'Value',
flex: 1,
editor: {
xtype: 'textfield'
}
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
itemId: 'removeBtn',
text: 'Remove'
},
{
xtype: 'button',
itemId: 'addBtn',
text: 'Add',
listeners: {
click: function (button, e, eOpts) {
var grid = button.up('#contactsGridPanel');
var store = grid.getStore();
var rowEditing = grid.getPlugin('rowediting');
rowEditing.cancelEdit();
var record = store.add({})[0];
rowEditing.startEdit(record, 0);
}
}
}
]
}
],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
pluginId: 'rowediting',
listeners: {
edit: function() {
}
}
})
]
});
me.callParent(arguments);
}
});
Here is a json response I get from the server:
{
"success": true,
"data": [
{
"id": 1,
"name": "Fax"
},
{
"id": 2,
"name": "Home page"
}
]
}
Can't make it all work. The combo box is empty. What am I doing wrong?
The most likely is that you have a typo in your displayField config.
As a side note, you should really say what kind of debugging you've done. Saying you "can't make it work" doesn't really help. Does the request hit the server? Does the store get data in it? Mentioning what you've done would help someone answering you.
You should catch the column Values from your remote source. Try adding the mapping attribute.
autoLoad: true,
fields: [
{type: 'integer', name: 'id', **mapping:'id'**},
{type: 'string', name: 'name', **mapping :'name'**}
]

Adding rows to grid

I am trying to add rows to my grid.
I saw an example in the docs:
onAddRouteClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
buying_vendor_id: 12,
country_code: '1',
route: 0
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
}
But i cant seem to make it work in my code.
This is my grid:
onBtnRoutesSearchClick: function(button, e, options){
var me = this;
var v_url = 'GetRoutes.jsp?' + Ext.urlEncode({'route_id': routeID, 'route_country_code' : routeCountryCode , 'route_vendor_id' : routeVendorID});
var newTab = Ext.create('Ext.panel.Panel', {
id: 'routes_pannel',
title: 'Routes',
autoScroll: true,
layout: {
type: 'fit'
},
closable: true,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'buttonResetBid',
icon: 'images/Plus.png',
text: 'Add Row',
listeners: {
click: {
fn: me.onAddRouteClick,
scope: me
}
}
}
]
}
],
items: [{
id: 'routes_grid',
xtype: 'gridpanel',
autoShow: false,
autoScroll: true,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'buying_vendor_id', type: 'int', sortType: 'asInt'},
{name: 'country_code', type: 'int', sortType: 'asInt'},
{name: 'route', type: 'int', sortType: 'asInt'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: v_url,
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
}),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'buying_vendor_id',
width: 100,
text: 'Buying Vendor'
},
{
xtype: 'gridcolumn',
dataIndex: 'country_code',
width: 100,
text: 'Country Code'
},
{
xtype: 'gridcolumn',
dataIndex: 'route',
width: 80,
text: 'Route'
}
],
}]
});
var panel = Ext.getCmp("MainTabPanelID");
panel.add(newTab).show();
}
Any ideas?
1.Create your model
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'ProductID'},
{name: 'ProductName'},
{name: 'UnitPrice'},
{name: 'UnitsInStock'}
]
});
2.create your rowEditing
var rEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners: {edit: function (editor, e) { }); }
});
3.get Store and create your grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
plugins: [rEditor],
title: 'Products',
columns: [ ],
dockedItems: [ {
xtype: 'toolbar',
dock: 'top',
items: [ {
xtype: 'button',
text: 'Yeni',
listeners: {
click: {
fn: function () { store.insert(0, new Product()); rEditor.startEdit(0, 0); }
}
}
} ]
} ],
width: 450,
renderTo: Ext.getElementById('hede')
});

Adding an empty row to a grid

I am trying to add rows to my grid.
I saw an example in the docs:
onAddRouteClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
buying_vendor_id: 12,
country_code: '1',
route: 0
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
}
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
}
But i cant seem to make it work in my code.
This is my grid:
onBtnRoutesSearchClick: function(button, e, options){
var me = this;
var v_url = 'GetRoutes.jsp?' + Ext.urlEncode({'route_id': routeID, 'route_country_code' : routeCountryCode , 'route_vendor_id' : routeVendorID});
var newTab = Ext.create('Ext.panel.Panel', {
id: 'routes_pannel',
title: 'Routes',
autoScroll: true,
layout: {
type: 'fit'
},
closable: true,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'buttonResetBid',
icon: 'images/Plus.png',
text: 'Add Row',
listeners: {
click: {
fn: me.onAddRouteClick,
scope: me
}
}
}
]
}
],
items: [{
id: 'routes_grid',
xtype: 'gridpanel',
autoShow: false,
autoScroll: true,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'buying_vendor_id', type: 'int', sortType: 'asInt'},
{name: 'country_code', type: 'int', sortType: 'asInt'},
{name: 'route', type: 'int', sortType: 'asInt'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: v_url,
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
}),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'buying_vendor_id',
width: 100,
text: 'Buying Vendor'
},
{
xtype: 'gridcolumn',
dataIndex: 'country_code',
width: 100,
text: 'Country Code'
},
{
xtype: 'gridcolumn',
dataIndex: 'route',
width: 80,
text: 'Route'
}
],
}]
});
var panel = Ext.getCmp("MainTabPanelID");
panel.add(newTab).show();
1.Create your model
Ext.define('Product', {
extend: 'Ext.data.Model',
fields:
[
{ name: 'ProductID' },
{ name: 'ProductName' },
{ name: 'UnitPrice' },
{ name: 'UnitsInStock' }
]
});
2.create your rowEditing
var rEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners:
{
edit: function (editor, e) { });
}
});
3.get Store and create your grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
plugins: [rEditor],
title: 'Products',
columns:
[
],
dockedItems:
[
{
xtype: 'toolbar',
dock: 'top',
items:
[
{
xtype: 'button',
text: 'Yeni',
listeners:
{
click:
{
fn: function () {
store.insert(0, new Product());
rEditor.startEdit(0, 0);
}
}
}
}
]
}
],
width: 450,
renderTo: Ext.getElementById('hede')
});
So you are trying to add a record to store right?
OK, lets look at the Store API
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Store-method-add
Sample usage:
myStore.add({some: 'data'}, {some: 'other data'});
The best practice is to also create a Model class . Read the component guides on grid and the data package .

ExtJs: Store populated by Grid comes up as blank

I am using an ArrayStore and filling it up by adding model records.
This store is associated with a data grid.
Now the arraystore object is getting filled perfectly fine but the data is not coming up in the grid. In fact, on debugging, I found that the store of the grid (datagrid.store) also has the data, but still it does not display it on the screen!!
Following is my code.
Model:
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'attribute',
type: 'string'
},
{ name: 'attributeValue',
type: 'string'
}
]
});
Store:
var attrValueStore = Ext.create('Ext.data.ArrayStore', {
autoSync: true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});
Grid
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueGrid', {
//requires: ['Ext.ux.CheckColumn'],
autoRender: true,
extend: 'Ext.grid.Panel',
alias: ['widget.attributevaluegrid'],
id: 'SQLAttributeValueGrid',
store: attrValueStore,
columnLines: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
columns: [
{ /*Expression */
xtype: 'gridcolumn',
text: 'Attribute',
sortable: false,
menuDisabled: true,
flex: 0.225,
dataIndex: 'attribute'
},
{ /*Attribute Values*/
xtype: 'gridcolumn',
editor: 'textfield',
text: 'Values',
flex: 0.225,
dataIndex: 'attributeValue'
}
],
initComponent: function () {
this.callParent(arguments);
}
});
Modal Window displaying the grid
var attributeValueForm = Ext.create('Ext.window.Window', {
title:'Missing Attribute Values',
id: 'attributeValueForm',
height:500,
width:400,
modal:true,
renderTo: Ext.getBody(),
closeAction: 'hide',
items:[
{
xtype: 'attributevaluegrid',
border: false,
//height: 80,
region: 'center',
split: true
}
],
buttons: [
{
id: 'OKBtn',
itemId: 'OKBtn',
text: 'OK',
handler: function () {
Ext.getCmp('attributeValueForm').close();
}
},
{
text: 'Cancel',
handler: function () {
Ext.getCmp('attributeValueForm').close();
}
}
]
});
Now at the time of displaying the modal window, I checked the value of the store object as well as the store inside the grid object. Both are having the proper data.
But when the window opens, I am getting a blank grid
Maybe you need to load the store data... try with:
var attrValueStore = Ext.create('Ext.data.ArrayStore', {
autoSync: true,
autoLoad : true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});

Resources