I have 4 forms, which called to the main view by buttons through controller.
How I must to link fields of forms with Django database, through REST api?
For example I have form:
Ext.define('Foresto.view.forms.RenterData', {
extend: 'Ext.form.Panel',
title: 'Renter',
header: {
cls: 'header-cls'
},
xtype: 'foresto-renterdata',
layout: 'fit',
scrollable: true,
tools: [{
type: 'minimize',
handler: function() {
this.up("panel").hide();
}
}, {
type: 'save'
}, {
type: 'close',
handler: function() {
this.up("panel").close();
}
}],
requires: ['Foresto.view.forms.RenterType'],
url: 'save-form.php',
defaults: {
xtype: 'textfield',
labelWrap: true,
required: true,
afterLabelTextTpl: [
'<span style="color:red;font-weight:normal" data-qtip="Required">*</span>'
]
},
items: [{
xtype: 'foresto-rentertype',
label: 'Type',
name: 'rentertype'
}, {
xtype: 'selectfield',
label: 'Document',
name: 'document',
}, {
label: 'Document number',
name: 'document_num'
}, {
label: 'NAME',
name: 'name_represent'
}, {
label: 'Position',
name: 'position_represent'
}]
});
And values of
name: 'document'
From Django:
{"license","rent agreement","order", "ticket"}
Where I can to add api url? I have to create proxy store or I can add api into form?
Please help! thanks!
I defined a view that should be able to be called in two modes. There are only two differences depending on a flag:
title of view (config.title)
selectfield might be shown or hidden
Here is the simplified view:
Ext.define('MyApp.view.fancyView', {
xtype: 'fancyview',
extend: 'Ext.form.Panel',
config: {
cls: 'fancyviewclass',
title: "titleDependingOnFlag",
items: [
{
xtype: 'fieldset',
name: 'fieldsetFancy',
items: [
{
xtype: 'selectfield',
itemId: 'stateID',
usePicker: true,
label: 'state',
store: 'States',
name: 'StateID',
valueField: 'ID',
displayField: 'ID'
},
{
xtype: 'selectfield',
itemId: 'countryID',
usePicker: true,
label: 'country',
store: 'Countries',
name: 'CountryID',
valueField: 'ID',
displayField: 'ID',
//hidden: true
}
]
}
]
}
});
And of course there is a controller that creates this view. At the moment I'm passing the flag as config value, see
Ext.define('MyApp.controller.fancyController', {
...
raisedBasedOnTap:function (flag){
this.myFancyFlag = !!flag;
var myFancyView = Ext.create('FLSMOBILE.minimax.view.CallReportTimestampPlaceCar', {
myFancyFlag: me.myFancyFlag
});
app.pushView(myFancyView);
}
...
});
What would be the best approach to make the title depending on a flag (like title: fancyFlag? 'title1' : 'title2') and hide selectfield countryID based on the flag?
Thanks in advance!
I know how to add a store record into a form.
But now I have an object which is not part of a store.
I loaded it using the helper function
var fields = someFormPanel.getForm().getFields();
Ext.each(fields.items,function(field, i) {
if('name' in field && field.name in obj) field.setValue(obj[field.name]);
});
but afterwards I asked myself whether there already is a predefined function?
You can use setValues method from Ext.form.Basic object. If you use for your form Ext.form.Panel class you can get its underlying Ext.form.Basic with getForm() method.
var data = {
firstName: 'Homer',
lastName: 'Simpson'
}
var form = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'firstName',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'lastName',
allowBlank: false
}],
renderTo: Ext.getBody()
});
form.getForm().setValues(data);
Fiddle with example: https://fiddle.sencha.com/#fiddle/2op
I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).
Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();
You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!
I'm trying to simply store a 'store's data into a combobox that can be selected.
Here's my store.Users:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
fields: ['name', 'email'],
data: [
{name: 'Ed Hayes', email: 'ed#sencha.com'},
{name: 'Tommy Gunz', email: 'tommy#sencha.com'},
{name: 'Johnny Bravo', email: 'JB#BoA.com'},
{name: 'Billy Joe', email: 'billyJgeemail.com'},
{name: 'James Bond', email: 'goldenGun#HQ.com'}
]
});
Here's my app.js:
items: [
{ xtype: 'panel',
padding: 5,
height: 500,
width: '35%',
items: [
{
xtype: 'combobox',
padding: 5,
fieldLabel: 'Criteria',
stores: 'AM.store.hello'
}
]
}, ...
Currently this is not working, any ideas?
You are using stores, when the correct config property is store. See the docs for ComboBox here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-cfg-store
You should specify combobox properties correctly, especially, a store and a displayField:
{
xtype: 'combobox',
fieldLabel: 'Criteria',
displayField: 'name',// or email
name:..,
valueField:..
}