Ext.define('MyApp.view.MyVehicleGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
header: false,
store: UserStore,
multiSelect: false,
columns: [
{
xtype: 'gridcolumn',
dataIndex: '_id',
text: 'Vehicle ID'
},
{
xtype: 'gridcolumn',
width: 126,
dataIndex: 'Plat_No',
text: 'Plat Number'
},
{
xtype: 'gridcolumn',
width: 200,
dataIndex: 'Name',
text: 'Added By'
}
]
})
i dont have any id declare in the gridpanel, because it will used in dynamicly,
so, i m using alias to find my grid component like below code
var grid = Ext.ComponentQuery.query('mygrid');
console.log( Ext.ComponentQuery.query('mygrid') );
if (grid.getSelectionModel().hasSelection()) { //error at here
var row = grid.getSelectionModel().getSelection()[0];
console.log(row.get('Plat_No'));
};
But, firebug return error with TypeError: grid.getSelectionModel is not a function
any other way to find my gridpanel component?
Ext.ComponentQuery.query() returns an array of matched Components from within the passed root object.
So if you have only one mygrid component in your application, you can get your grid like this:
var grid = Ext.ComponentQuery.query('mygrid')[0];
Related
friends!
I have a grid, with a widget column. I get the data for the store from the server.
I get different templates for each row and try to set these templates in my widget. However, I am not able to display the data in the templates.
Here is my example fiddle https://fiddle.sencha.com/#fiddle/3j41&view/editor
I expect the second column to display data with different templates. Instead of data I see {testName}.
In the third column everything works, but it's static data
Can you help me understand what's wrong?
My result:
My store:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'tplConfig'],
data: [{
name: 'Test 1',
tplConfig: {
tplBody: '<div><b>Name:</b> {testName}</div> <div>any text</div>',
tplData: {
testName: 'Alex'
}
}
} ]
});
My grid:
{
xtype: 'grid',
title: 'Widget Column Demo',
store: store,
columns: [
.....
{
xtype: 'widgetcolumn',
text: 'Dynamic',
width: 120,
dataIndex: 'tplConfig',
widget: {
xtype: 'component',
tpl: '{tplBody}',
//data: '{tplData}' //it's not working
}
}
.......
]
}
You can use renderer:
{
xtype: 'gridcolumn',
text: 'Dynamic',
width: 120,
dataIndex: 'tplConfig',
renderer: function(tplConfig) {
var t = new Ext.Template(tplConfig.tplBody);
return t.apply(tplConfig.tplData);
}
}
or as a 1 liner:
return new Ext.Template(tplConfig.tplBody).apply(tplConfig.tplData);
I am trying to find the best way to bind items to a textfield in my extjs project. I downloaded the data into a store with one record in the controller. How would I bind to this textfield from the one record? I would preferably bind in the view, not in the controller
You should read this guide to understand better what binding is
The best solution for you is bind the record on the viewmodel of the view, so:
textfield.setBind({
value:'{myRec.valueToRefer}'
})
viewmodel.set('myRec',record.getData());
If you want, you can also use a form to handle this, using form.loadRecord and giving to the textfield a name..
A tip:
set inside the viewmodel a value to null:
data:{
myRec:null
}
Set your record in the viewmodel after setting the bind to the textfield.
Other tip:
If you can, avoid using setBind and prefer to set the binding directly on textfield creation:
//WILL WORK BUT YOU CAN AVOID IT
textfield.setBind({
value:'{myRec.valueToBind}'
})
//YES
var textfield=Ext.create({
xtype:'textfield',
bind:{
value:'{myRec.valueToBind}'
}
});
Refer to Sencha documentation also
You can use bind config to bind the data or any other config for ExtJS component.
Bind setting this config option adds or removes data bindings for other configs.
For example, to bind the title config:
var panel = Ext.create({
xtype: 'panel',
bind: {
title: 'Hello {user.name}'
}
});
To dynamically add bindings:
panel.setBind({
title: 'Greetings {user.name}!'
});
To remove bindings:
panel.setBind({
title: null
});
In this FIDDLE, I have created a demo for biding. I hope this will help/guide you to achieve you requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
//defining Store
Ext.define('Store', {
extend: 'Ext.data.Store',
alias: 'store.gridstore',
autoLoad: true,
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: ''
}
}
});
//defining view model
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
data: {
formdata: null
},
stores: {
gridstore: {
type: 'gridstore'
}
}
});
//Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onGridItemClick: function (grid, record) {
//Bind the form data for CLICKED record
this.getViewModel().set('formdata', record)
}
});
//creating panel with GRID and FORM
Ext.create({
xtype: 'panel',
controller: 'myview',
title: 'Binding Example',
renderTo: Ext.getBody(),
viewModel: {
type: 'myvm'
},
layout: 'vbox',
items: [{
xtype: 'grid',
flex: 1,
width: '100%',
bind: '{gridstore}',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
itemclick: 'onGridItemClick'
}
}, {
xtype: 'form',
flex: 1,
width: '100%',
defaults: {
anchor: '100%'
},
title: 'Bind this form on Grid item Click',
bodyPadding:15,
margin: '20 0 0 0',
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'first',
allowBlank: false,
bind: '{formdata.name}'
}, {
fieldLabel: 'Email',
name: 'email',
allowBlank: false,
bind: '{formdata.email}'
}, {
fieldLabel: 'Phone',
name: 'phone',
allowBlank: false,
bind: '{formdata.phone}'
}]
}]
});
}
});
I'm trying to get the value of a cell in a grid using below. In-fact I'm just trying to print it in the console
console.log(Ext.ComponentQuery.query('gridcolumn[itemId=gridId]')[0].getEditor().getStore().findRecord('description', 'Description'));
Grid Code
Ext.define('Examples.grid.fdGrid', {
extend: 'Ext.grid.Panel',
xtype: foodGrid',
forceNewStore: true,
itemId: 'foodGrid',
height: Ext.getBody().getViewSize().height - 200,
autoload: false,
columns: [
{
text: 'Food Distrib',
xtype: 'gridcolumn',
itemId:'gridId',
dataIndex: 'food_distributor',
flex: 1,
renderer: function(value){
if(Ext.isNumber(value)){
var store = this.getEditor().getStore();
return store.findRecord('foodid',value).get('description');
}
return value;
},
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "description",
valueField: "foodid",
listeners: {
expand: function () {
var call = this.up('foodgrid[itemId=foodGrid]').getSelectionModel().selection.record.data.networkname.trim();
this.store.clearFilter();
this.store.filter({
property: 'call',
value: call,
exactMatch: true
})
}
},
},
}
});
But i'm getting an error as Uncaught TypeError: Cannot read property 'getEditor' of undefined
What's the error please?
Added the Grid Code part, and the column whose value I want to print.
The editor is created when needed (when the first edit occurs). So when the renderer is first called, the editor is not yet available.
What you want to do from inside your renderer, is to directly access the store, not go through the editor. Then you only need a pre-loaded store to be able to render the grid correctly.
renderer: function(value){
if(Ext.isNumber(value)){
var store =Ext.getStore("MyStore");
return store.findRecord('foodid',value).get('description');
}
return value;
},
editor: {
xtype:'combobox',
store:'MyStore'
Of course, you have to make sure that MyStore is loaded before you render the grid.
One can only guess what you are trying to do there but:
Column doesn't have a selection model of itself. Grid does.
Combobox needs a store.
getEditor may return String OR Object if an editor was set and column is editable
editable is provided by a grid plugin. In other words, specifying a column as being editable and specifying a column editor will not be enough, you also need to provide the grid with the editable plugin.
Some working example:
Ext.define('Examples.grid.fdGrid', {
extend: 'Ext.grid.Panel',
xtype: 'feedGrid',
forceNewStore: true,
itemId: 'foodGrid',
height: Ext.getBody().getViewSize().height - 200,
autoload: false,
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
columns: [
{
text: 'Food Distrib',
xtype: 'gridcolumn',
itemId:'gridId',
dataIndex: 'food_distributor',
flex: 1,
editable: true,
renderer: function(value){
if(Ext.isNumber(value)){
var store = this.getEditor().getStore();
return store.findRecord('foodid',value).get('description');
}
return value;
},
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "description",
valueField: "foodid",
store: {
fields:['food_distributor', 'description'],
data:[
{
'food_distributor':'a',
foodid:1,
description:'aaaaa'
},
{
'food_distributor':'a',
foodid:2,
description:'bbbbbb'
},
{
'food_distributor':'a',
foodid:3,
description:'aaaaa'
}]
},
listeners: {
expand: function () {
debugger;
var desc = this.up('grid').getSelectionModel().getSelection()[0].get('description').trim();
this.store.clearFilter();
this.store.filter({
property: 'description',
value: desc,
exactMatch: true
})
}
},
},
}
]
});
Ext.create('Examples.grid.fdGrid', {
store: {
fields:['food_distributor', 'description'],
data:[
{
'food_distributor':'a',
foodid:1,
description:'aaaaa'
},
{
'food_distributor':'a',
foodid:2,
description:'bbbbbb'
},
{
'food_distributor':'a',
foodid:3,
description:'aaaaa'
}]
},
renderTo:Ext.getBody()
})
Do you have
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
Without the plugin the editor doesnt work! and the editor will be undefined when you will try to obtain it
I have ExtJS application and I want to implement displaying total number of records in the header.
ViewModel:
Ext.define('AppName.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
// ...
stores: {
users: Ext.create("AppName.store.UsersStore")
}
});
Binding to view
Ext.define('AppName.view.main.UsersPanel', {
extend: 'Ext.panel.Panel',
// ...
items:[{
bind : {
title : 'Users ({users.data.length})'
},
items: [{
listeners : {
cellclick : 'OnSelectUser'
},
xtype: 'grid', columns: [
{ text: 'Full Name', dataIndex: 'fullName', flex: 2},
{ text: 'Address', dataIndex: 'address', flex: 1},
{ text: 'Sex', dataIndex: 'sex', flex: 1},
{ text: 'Date Of Birth', dataIndex: 'dob', flex: 1}
],
bind: '{users}'
}]
}]
});
And this works after first loading of records to Store by code
OnSearchButtonClick: function () {
var me = this,
usersStore = me.getViewModel().get('users');
usersStore.load();
}
But when I remove records from store by code
var me = this,
usersStore = me.getViewModel().get('users');
usersStore.loadData([], false);
or by
usersStore.removeAll()
then only table is cleared but not header.
So I have a question: how can I bind store size?
try with sync on the store after removing records.
usersStore.removeAll();
usersStore.sync();
sometimes binding not refresh binded components because new or removed records are not synched in the store
So I have a grid with two columns, the first has just text, the second needs to have a custom control (with a checkbox and a combo box)
Check the screenie:
Here is a link to a screenie:
The Problem:
When I click update to update the row. The first column gets updated, but the second column doesn't
I naively added a getValue() into my custom control but no luck!! (Note: I'm using row editing plugin)
Here is my code:
Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
//defs for all the toolbars and buttons
plugins: [rowEditing],
columns: [
{
xtype: 'rownumberer'
},
{
xtype: 'gridcolumn',
text: 'Column Titles',
dataIndex: 'ColumnTitle',
editor: {
xtype: 'textfield',
}
},
{
xtype: 'gridcolumn',
sortable: false,
align: 'center',
dataIndex: 'IssueCondition',
editor: {
xtype: 'reportpopulation'
}]
});
The reportpopulation is the custom control here. Here is the code for it:
Ext.define('SelectPopulation', {
extend: 'Ext.container.Container',
itemId: 'ctrSelectpopulation',
alias: 'widget.reportpopulation',
layout: {
type: 'hbox'
},
initComponent: function () {
//code to add combo box and checkbox snipped
....
},
getValue: function () {
//This doesn't work!
return "Booo";
}
});
So clicking Update doesn't :
Is there something I'm missing?
Should I inherit from FieldBase? Can I use multiple controls and create something like the screenie with FieldBase?
This works, even your getValue() was working, the problem is that you used a custom type value on that grid column (IssueCondition) and did not specified any renderer for it, try something like this:
Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
height: 300,
plugins: [Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})],
columns: [{
xtype: 'rownumberer'
}, {
xtype: 'gridcolumn',
text: 'Column Titles',
dataIndex: 'ColumnTitle',
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
sortable: false,
text: "Issue Condition",
align: 'center',
dataIndex: 'IssueCondition',
width: 200,
editor: {
xtype: 'reportpopulation'
},
renderer: function (v, attr, rec) {
console.info(arguments);
return 'cb: ' + rec.data.IssueCondition.cb + ' combo: ' + rec.data.IssueCondition.combo;
}
}],
store: Ext.create("Ext.data.Store", {
fields: ["ColumnTitle", "IssueCondition"],
proxy: {
type: "memory",
reader: {
type: "json"
}
}
})
});
Ext.define('SelectPopulation', {
extend: 'Ext.container.Container',
itemId: 'ctrSelectpopulation',
alias: 'widget.reportpopulation',
layout: {
type: 'hbox'
},
initComponent: function () {
Ext.apply(this, {
items: [{
xtype: "checkbox"
}, {
xtype: "combobox",
allowBlank: false,
store: [
[0, 'Zero'],
[1, 'One'],
[2, 'Two']
]
}]
});
this.callParent(arguments);
},
getValue: function () {
return {
cb: this.child('checkbox').getValue(),
combo: this.child('combobox').getValue()
};
}
});
Be aware that this is just an example.
Check the Fiddle here
Hope this helps.