Related
I have 3 items in my main panel (Main.js):
Form (display data from selected row of Grid1)
Grid1 -Ext.grid.Panel (which get data from JSON file)
Grid2 -Ext.grid.Panel (should display some of the columns from selected row in Grid1)
All 3 views share same MainModel.js associated with Main.js.
I am able to bind Grid1 data to form using formula:
formulas: {
someVal: {
bind: '{employeeDetails.selection}', //reference to grid1
get: function(item){
return item;
}
},
Form-
items:[
{
xtype: 'form',
title: 'Form',
defaultType: 'textfield',
items: [
{
xtype: 'displayfield',
fieldLabel: 'ID',
bind: '{someVal.id}'
}, //...
But I cannot find any way to do the same between Grid1 and Grid2. I googled for hours. Only source for data for ExtJs grid seems to be store. Essentially is there any way to populate grid other than using store. Can we use bind inside columns or something? Thanks.
EDIT:
updated formula for selection:
myStoreDataFormula: {
bind:{
bindTo:'{employeeDetails.selection}',
deep:true
},
get: function(employee){
if(employee!=null){
var empArray = [];
empArray.push(employee.data);
return empArray;
}
}
}
A somewhat obscure feature when using a store defined inside a viewmodel, is that instead of defining concrete values, you can use the '{ ... }' mustache to bind to other viewmodel fields / formulas, or component configs that are published via their reference (personally I found this most useful for putting path variable's into url of the store's proxy).
Here is an example of grid bound to store, which in turn has it's data bound to a formula:
Ext.define('MyView', {
viewModel: {
stores: {
myStore: {
fields: ['name'],
data: '{myStoreDataFormula}'
}
},
formulas: {
myStoreDataFormula: function(get) {
return [{
name: 'Foo'
}, {
name: 'Bar'
}];
}
}
},
extend: 'Ext.grid.Panel',
xtype: 'MyView',
bind: {
store: '{myStore}'
},
columns:[{
dataIndex: 'name',
flex: 1
}]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create({
xtype: 'MyView',
width: 300,
height: 300,
renderTo: Ext.getBody()
});
}
});
Yes, this would still have you to have 2 stores, but you can make second grid's store to be fully dependent on the first grid's published selection config.
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've come across a rather interesting problem. I have a store, which uses a model. My model looks like this:
Ext.define('HealOmni.model.device_model', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
fields: [
{
name: 'device_id'
},
{
name: 'device_name'
},
{
name: 'device_id_real'
},
{
name: 'sim_number'
},
{
name: 'other_device_details'
},
{
convert: function(v, rec) {
return rec.get('device_name') + " " + rec.get('device_id_real');
},
name: 'device_name_and_id'
}
]
});
and then this store is used by a ComboBox, the combo box looks like this:
xtype: 'combobox',
height: 30,
itemId: 'deviceID',
fieldLabel: 'Device ID',
labelClsExtra: 'screenSharingFontLowerHalf',
labelSeparator: ' ',
displayField: 'device_name_and_id',
queryMode: 'local',
store: 'userDeviceManagementLoggedInDisplay',
valueField: 'device_id_real'
I use the combination field device_name_and_id as the display field of the combobox. However, when I reloaded my site, it seemed that the ComboBox could not display the field properly. When I use the other fields, let's say device_id, it displays just fine. It's only the combination field that does not display and I don't know why.
I log the values to console after I load the store and all fields are displayed, even the combination ones -- so I'm really rather confused as to why the ComboBox won't display properly.
Does anyone know how to show a "convert" field in a combobox?
Please check below fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1m9t
Ext.define('HealOmni.model.device_model', {
extend: 'Ext.data.Model',
fields: [{
name: 'device_name_and_id',
convert: function (v, rec) {
return rec.get('device_name') + " " + rec.get('device_id');
}
}]
});
var storeRec = Ext.create('Ext.data.Store', {
model: 'HealOmni.model.device_model',
data: [{
device_id: 1,
device_name: 'device one with id'
}, {
device_id: 2,
device_name: 'device two with id'
}]
});
Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
valueField: 'device_id',
displayField: 'device_name_and_id',
store: storeRec
});
I've made a small fiddle for you. Compare this to your code, i hope it helps:
https://fiddle.sencha.com/#view/editor&fiddle/1m9e
I am new to ExtJS 4 and struggling at times with the learning curve. I have followed the documentation on sencha's site for MVC concept for basic structure of my app, however I am having difficulty determining where/how to implement certain components/handlers/listeners as I don't quite have the feel for this frame work yet.
So, here is my question.... (Yes I did look at other posts on SO but I think at this point I am too stupid to identify and apply what similar posters may have come accross to solve my issues)
How do I bind a date field in my grid to the date picker date that is selected and vice versa? If I select a date in my date picker I would like to have my grid load relevant rows from my db. If I select a row in my grid I would like to see the date picker reflect the date in the selected row.
Can someone give me a narrative of the approach i should be taking? I have seen some code examples but I don't clearly see an obvious preferred method or the way it should be done. If there is a link someone can give me to look at I will be happy to study.
This is my first post on SO so please forgive me for any etiquette I am lacking as well as other annoying things. Thanks in advance!
Store:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset'
}}
});
model:
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'message_id',type: 'textfield'},
{name: 'recip_email',type: 'textfield'},
{name: 'unix_time_stamp',type:'datefield'}
]
});
View:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 1})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
Viewport:
Ext.Loader.setConfig({enabled:true});
// This array is for testing.
dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
title: 'mydate',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
disabledDates:["^(?!"+dateArray.join("|")+").*$"],
// disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
Ext.Msg.alert('date picker example in init2.js');
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
});
Update to Datepicker in Viewport:
One additional note is that i notice a property attribute in the JSON packet that has the date included even without making you suggested changes to the store. I notice there may be a bug in the link you provided?? If i set to false or remove it altogether from my store it has same behavior and is included in my JSON packet.
Do I need to encode the url also? when I click on a row in my grid and hit the update button i recive the grid row on my server side with what appears to be already url encoded by extjs perhaps?
Ext.Loader.setConfig({enabled:true});
// This array is for testing.
dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
disabledDates:["^(?!"+dateArray.join("|")+").*$"],
// disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
// Ext.Msg.alert('date picker example in init2.js' + '<br>' + Ext.Date.format(date,'m/d/Y'));
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// store.proxy.extraParams = { key:'test'};
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
});
If you want to filter records displayed in grid by selected date in date picker on the server side try to filter grid's store.
In your store configuration you need to set remoteFilter config attribute to true. Then store proxy will automatically add filter params into store load data requests. Also if you have only one instance of this store, add to configuration unique storeId.
In your datepicker handler you need set store filter to selected date:
handler: function(picker, date)
{
// get store by unique storeId
var store = Ext.getStore('storeId');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", date);
}
Then on server side you need to parse and process filter param.
I cannot figure out how to show my Ext.dataview.List object inside of another object. If I try to show the Ext.dataview.List object in the viewport, by itself, I can see my data. But if I try to include it as a component inside of another component, it thinks there is no data (judging from the HTML output), and doesn't appear to display anything.
So, if I have an app.js with the following code:
Ext.application({
name: 'MobileUnion',
views: ['LocalsList'],
models: ['Local'],
stores: ['Locals'],
launch: function() {
// Initialize the main view
var mainView = {
xtype: 'localslist'
};
Ext.Viewport.add([mainView]);
}
});
I can set up MobileUnion.view.LocalsList this way, which results in no list:
Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.Container',
alias: 'widget.localslist',
requires: 'Ext.dataview.List',
config: {
items: [
{
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'
}
]
}
});
Or, I can set it up this way, which results in a populated list, but not inside of another component:
Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.dataview.List',
alias: 'widget.localslist',
config: {
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'
}
});
The reason I am trying to pull this off is so that I can get a list component to display inside of a tab panel.
Note: I have assembled a Fiddle with everything, here: http://www.senchafiddle.com/#6nCH8
I must be missing something basic, but at this point, having gone through the documentation, and purchased two books, one of which I've read fully, and the other of which I am reading while coding, I am still without an answer. Any help would be most greatly appreciated.
Additional Code
app/model/Local.js
Ext.define('MobileUnion.model.Local', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'dateCreated', type: 'date', dateFormat: 'c' },
{ name: 'localName', type: 'string' },
{ name: 'designation', type: 'string' }
],
}
});
app/store/Locals.js
Ext.define('MobileUnion.store.Locals', {
extend: 'Ext.data.Store',
requires: ['MobileUnion.model.Local'],
config: {
model: 'MobileUnion.model.Local',
data: [
{ localName: 'ABCD', designation: '123' },
{ localName: 'WXYZ', designation: '456' }
],
autoLoad: true,
sorters: [{ property: 'dateCreated', direction: 'DESC'}]
}
});
In option 1, you define a container but you actually don't add items to you container. To add your list to the container, add xtype: 'list' to your items array. Next thing you have to do is to set the containers layout to fit, otherwise the list won't show up. This should work for you:
Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.Container',
alias: 'widget.localslist',
requires: 'Ext.dataview.List',
config: {
layout: {
type: 'fit' //set containers layout
},
items: [
{
xtype: 'list', //add xtype
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'
}
]
}
});
More about layouts in Sencha: http://docs.sencha.com/touch/2-1/#!/guide/layouts
Good luck!