extjs checkbox data rendering issue - extjs

php return data from server side but not extjs not render the value of fields
i'm using xtype: 'checkbox'
{"total":1,"success":true,"locks":[{"id":"1","record_id":"11","is_unreachable":"1","is_directory_Lock":"1","is_Internet_Lock":"0","is_partner_Lock":"1","is_home_business":"1","is_top_listing":"1","is_mole":"1","is_pre_call":"1","is_new_business":"1","is_free_adv":"1","is_verified":"1","is_reviewed":"1","is_idr":"1"}]}
json array return from server

you have to paste you code.
But why not go to the example:
http://docs.sencha.com/ext-js/4-0/#!/example/grid/array-grid.html

Ext.define('UserApp.view.uiTypes.LockFeature',{
extend: 'Ext.form.Panel',
collapsible: true,
flex: 1,
height: 200,
width: 600,
store: null,
itemId: 'lockfeature',
layout:{
type: 'table',
columns: 3
},
items:[{
xtype: 'checkbox',
boxLabel: 'Is Unreachable',
name: 'is_unreachable',
id: 'is_unreachable',
dataIndex: 'is_unreachable',
inputValue: 'true',
uncheckedValue: 'false',
value: true,
},{
xtype: 'textfield',
name: 'is_unreachable_update',
fieldLabel: 'Last Update',
},{
xtype: 'textfield',
name: 'update_by_user',
fieldLabel: 'By'
}],
initComponent: function(){
console.log(this.table);
console.log(this.record_id);
var table = this.table;
var parentTable = table.split('_');
console.log(parentTable[0]);
var store = Ext.create('UserApp.store.LockFeature');
store.getProxy().setExtraParam('table',parentTable[1]);
store.getProxy().setExtraParam('tab',parentTable[1]);
store.getProxy().setExtraParam('saving_table', table);
store.getProxy().setExtraParam('record_id',this.record_id);
this.store = store;
this.callParent(arguments);
store.load();
}
});

Related

How to add selectable option to combobox without affecting the store on Sencha ExtJS 5?

so I have a view where I display a combobox and a grid that share a 'Roles' store. If you pick an option on the combobox, the grid will be filtered accordingly.
I am looking for a way to add an "All" option to the combobox that is selectable (so placeholder or value attributes don't work for me). I want to do this because I cannot add that option to the store without affecting the grid as well.
This is my code:
Ext.define("MODIFE.view.administration.Roles",{
extend: "Ext.panel.Panel",
xtype: "app-administration-roles",
controller: "administration-roles",
viewModel: {
type: "administration-users"
},
title: "Roles",
items:[
{
title: 'Búsqueda de Roles',
frame: true,
resizable: true,
xtype: 'form',
layout: 'column',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
items: [{
fieldLabel: 'Rol',
xtype: 'combobox',
store: 'Roles',
displayField: 'Description',
valueField: 'RoleId',
}]
}, {
items: [
{ fieldLabel: 'Estatus', xtype: 'combobox' },
]
}],
buttons: [
{ text: 'Nuevo' },
{ text: 'Buscar' }
]
},
{
layout: 'fit',
items: [{
xtype: 'grid',
id: 'rolesGrid',
title: 'Listado de Roles',
store: 'Roles',
columns: [
{ text: 'Rol', dataIndex: 'Description', flex: 2},
{ text: 'Estatus', dataIndex: 'Status', flex: 2},
]
}]
}]
});
Thanks in advance!
You could clone the store, then any alterations wont be reflected in the original store. (but it's messy, and may have problems with syncing if you have this enabled)
//clone store
var records = [],
me = this;
me.store.each(function(r){
records.push(r.copy());
});
var store2 = new Ext.data.Store({
recordType: me.store.recordType,
model: me.store.model
});
store2.add(records);
//add record
store2.add({ID:"-1", NAME: "-Please select-"});

ExtJS how to create a custom field from a custom component

I have my application (ExtJS 4.2.1) and I have a form:
xtype: 'form',
bodyPadding: 10,
autoScroll: false,
itemId: 'editForm',
defaults: {
msgTarget: 'side',
xtype: 'textfield'
},
//layout:'anchor',
items: [{
xtype: 'combobox',
itemId: 'cboEmployer',
store: Ext.create('App.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: false,
},{
xtype: 'radiogroup',
fieldLabel: 'Type',
name: 'RequestInAdvance',
columns: 2,
items: [{
boxLabel: 'Normal',
name: 'RequestInAdvance',
inputValue: 0,
checked: true
}, {
boxLabel: 'Advanced',
name: 'RequestInAdvance',
inputValue: 1
}
]
}, {
xtype: 'fieldset',
title: 'Date selection',
defaults: {
labelWidth: 89,
anchor: '100%',
layout: {
type: 'hbox',
defaultMargins: {
top: 0,
right: 5,
bottom: 0,
left: 0
}
}
},
items: [{
xtype: 'highlightdate', // <- This is a custom datepicker but I need it to be a field type
name: 'SelectedDates',
itemId: 'datePicker'
}],
},
],
buttons: [{
text: 'Save',
action: 'commit',
glyph: Glyphs.SAVE,
disabled: true
}],
xtype: 'highlightdate' is a custom datepicker and I need to do custom form Validation so I can mark the element as error:
In my validation method I have:
var fieldMatch = Ext.ComponentQuery.query('field[name=' + error.field + ']');
if (fieldMatch.length) {
// add extra validaiton message to the offending field
fieldMatch[0].markInvalid(error.message);
}
So when I try to set an error to my highlightdate xtype It can be found becuase is not a field.
Is there a way to workaround this?
xtype is just a shortname for your custom 'highlightdate' class and can be replaced by the new Namespace.CustomClass({cfg}) notation. What you need to figure out is: what base class does this custom class extend? If it extends Ext.form.field.Base or Ext.form.field.Text for ex. than it's also a field and inherits all the properties from it.

EXT JS - on click transfer record to store of popup grid panel

This is my popup with tabs.
I need to give a value from record to gridpanel in tab 2 in store to get attributes from server side by category_id. Searched answer in official documentation and didn't find.
Can help me somebody?
Ext.define('desk.view.CategoryPopup', {
extend: 'Ext.window.Window',
alias: 'widget.categorypopup',
title: 'Change Category',
layout: 'fit',
autoShow: true,
bdoyPadding: 10,
initComponent: function(){
this.items = [{
xtype: 'tabpanel',
items: [
{
xtype: 'form',
title: 'Add / Edit / Delete Category',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Parent Category'
},
{
xtype: 'textfield',
name: 'new',
fieldLabel: 'New Category'
},
{
xtype: 'textfield',
name: 'id',
fieldLabel: 'Category ID',
hidden: true
},
{
xtype: 'textfield',
name: 'parent',
fieldLabel: 'Parent ID',
hidden: true
}
],
bodyPadding: 10
},
{
xtype: 'gridpanel',
alias: 'widget.categoryattr',
title: 'Attributes',
height: 350,
buttons: [{'text': 'Add attribute', 'action' : 'add-attribute'}],
columns: [
{
name: 'Name',
dataIndex: 'name'
}
],
width: 300,
store: Ext.widget('categoryattributes')
}
]
}];
this.buttons = [
{
text: 'Update',
action: 'add'
},
{
text: 'Delete',
action: 'delete'
}
];
this.callParent(arguments);
}
})
This is function in controller
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
}
you need something like this:
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
Ext.Ajax.request({
url: '/api/category/'+ record.getId() +'/attributes', //example url insert your webservice
success: function(response){
var attributes = Ext.decode(response.responseText);
view.down('grid').getStore().loadData(attributes);
}
});
}
you will need a store with a model for your grid.

Data Store has empty data property

I am working with Ext.js and trying to get a data Store set up and mapped to data fields on my FormPanel so that I can easily acess data input.
Something is missing in my mapping:
When I enter data in the textfields and hit my Submit button's submit handler, the data property on the store is blank. I was expecting it to contain data input on the page. Can someone help? Thanks very much:
infoPanel = function () {
this.store = new Ext.data.JsonStore({
autoLoad: true,
root: 'Data',
storeId: 'creditMemoStore',
fields: ['shipto', 'billto', 'reasonCode', 'creditClaimed', 'adjustmentAmount', 'poNumber']
});
this.fieldset = {
xtype: 'fieldset',
flex: 1,
border: false,
defaultType: 'field',
items: [
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Ship to',
name: 'shipto',
//dropdown
allowBlank: false
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Bill to',
name: 'billto',
//dropdown
allowBlank: false
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Reason Code',
name: 'reasonCode',
//dropdown
allowBlank: false
},
{
labelWidth: 160,
xtype: 'numberfield',
allowNegative: false,
fieldLabel: 'Amount',
allowBlank: false,
name: 'creditClaimed'
},
{
labelWidth: 160,
xtype: 'numberfield',
allowNegative: false,
fieldLabel: 'Adjustment Amount',
name: 'adjustmentAmount',
allowBlank: false,
maxLength: 5
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Customer PO Number',
allowBlank: false,
name: 'poNumber',
maxLength: 15
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Debit Memo Number',
allowBlank: false,
name: 'dmNumber',
maxLength: 50
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Credit Memo Number',
allowBlank: false,
name: 'cmNumber',
maxLength: 6
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Currency Code',
name: 'currencyCode',
//dropdown
allowBlank: false,
maxLength: 3,
value: 'USD'
}
]
};
this.panel = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
width: 700,
title: 'Create Credit Memo',
height: 400,
frame: true,
id: 'creditMemoFormPanel',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [
this.fieldset
],
store: this.store,
buttons: [
{
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
},
{
text: 'Submit',
formBind: true,
handler: function () {
var form = this.up('form').getForm();
var store = Ext.StoreMgr.get('creditMemoStore');
var dataObject = { testPost: store.data};
if (form.isValid()) {
Ext.Ajax.request({
url: 'CreateCreditMemo',
jsonData: Ext.JSON.encode(dataObject),
success: function() { Ext.Msg.alert('json post Success'); },
failure: function () { Ext.Msg.alert('json post Fail'); },
});
}
}
}
]
});
}
Ext.onReady(function () {
var ip = new infoPanel();
});
The Ext.js Store is only used for records where more than set of data is displayed at a time.
The Store doesn't apply to a basic form. The Ext.js Form posts the values of all of the fields automatically on submit.

ExtJS4 Reload grid Panel in button handler

I'm working with ExtJS4 and trying to build a search feature using a form. I've got the form displayed and a user enters one of 4 criteria and clicks Search, the grid is then built and shows the results from a JSON call.
What I'm trying to achieve is to allow the user to be able to enter different search criteria and click Search again and have the grid updated to show the new results. In my first attempt the grid is rendered for each click of Search and in my second attempt it simply pushes the results of the search into the grid without removing the previous entries.
Here's my current setup:
Ext.define('job',{
extend:'Ext.data.Model',
fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})
Ext.onReady(function(){
var formPanel = Ext.widget('form', {
renderTo: 'search',
frame: true,
width: 350,
bodyPadding: 5,
bodyBorder: false,
title: 'Search',
defaults: {
anchor: '100%'
},
{
xtype: 'combo',
name: 'jobyear',
fieldLabel: 'Job Year',
store:
new Ext.data.SimpleStore({
fields: ['year'],
data: [
['2008'],['2009'],['2010'],['2011'],['2012']
] //end of data
}),
displayField: 'year',
typeAhead: true,
emptyText: 'Select a year'
}], //end of items
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'component',
id: 'formErrorState',
baseCls: 'form-error-state',
flex: 1
}, {
xtype: 'button',
formBind: true,
id: 'search',
disabled: true,
text: 'Search',
width: 140,
height: 35,
handler: function() {
var columns = [
{xtype: 'rownumberer',sortable: true},
{text: 'School Name', sortable:true,dataIndex:'account_name'},
{text: 'Acct Number', sortable:true,dataIndex:'account_number'},
{text: 'Job Number',sortable:true,dataIndex:'job_number'},
{text: 'Version',sortable:true,dataIndex:'version'},
{text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
{text: 'Program', sortable:true,dataIndex:'program'},
{text: 'Job Type', sortable:true,dataIndex:'type'}
]; // end columns
var userGrid = new Ext.grid.Panel({
id: 'FOO',
multiSelect:true,
store: store,
columns: columns,
stripeRows: true,
title: 'Results',
renderTo: Ext.get('results'),
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
})
var form = this.up('form').getForm();
var store = new Ext.data.Store({
model: 'job',
pageSize: 10,
autoLoad: true,
remoteSort:true,
proxy: {
actionMethods: {
read: 'POST'
},
type: 'ajax',
fields: ['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
url: '/search?'+ form.getValues(true),
reader:{
type: 'json',
root: 'results',
totalProperty: 'totalCount'},
}, //end proxy
sorters:[{
property:'version',
direction:'ASC'
}]
}).on('load', function(){
userGrid.reconfigure(this); // ???
});
} // end button handler
}] //end items
}] // end dockeditems
});
});
I've tried refreshing the grid and calling load() but I don't think I've hit yet on the right combination. I'd like the grid contents to be replaced with those from the latest ajax call to /search.
You should not create a new panel and a store on each search button click, so move it out of the button handler. If you just call load({params:{search:'whatever'}}) on the store of the grid when user pushes search button you will get the new data populated in your grid automatically. You don't need to reconfigure the grid or do anything else. Essentially the grid is bound to the store and when the store data changes the view behind the grid will automatically refresh.
I got this solved by following some of DmitryB's advice. I inherited this code and after some massaging I got it working as intended. Below is my final solution. In the handler function on the button you need to be sure and update the URL of the proxy defined in the store so that when you call store.load() it's correct.
Ext.require([
'Ext.form.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
//'extjs.SlidingPager'
]);
/*Setup Data Model*/
Ext.define('job',{
extend:'Ext.data.Model',
fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})
Ext.onReady(function(){
var formPanel = new Ext.widget('form', {
renderTo: 'search',
frame: true,
width: 350,
bodyPadding: 5,
bodyBorder: false,
title: 'Search',
defaults: {
anchor: '100%'
},
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'none'
},
items: [{
xtype: 'textfield',
name: 'jobnumber',
fieldLabel: 'Job Number',
allowBlank: true,
minLength: 7,
maxLength: 7
}, {
xtype: 'textfield',
name: 'accountnumber',
fieldLabel: 'Account Number',
allowBlank: true,
minLength: 6,
maxLength: 7
}, {
xtype: 'textfield',
name: 'customername',
fieldLabel: 'Customer Name',
allowBlank: true,
}, {
xtype: 'combo',
name: 'jobyear',
fieldLabel: 'Job Year',
store:
new Ext.data.SimpleStore({
fields: ['year'],
data: [
['2008'],['2009'],['2010'],['2011'],['2012']
] //end of data
}),
displayField: 'year',
typeAhead: true,
emptyText: 'Select a year'
}], //end of items
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'button',
formBind: true,
id: 'search',
disabled: true,
text: 'Search',
width: 140,
height: 35,
handler: function() {
store.proxy.url = '/search?' + formPanel.getForm().getValues(true)
store.load();
} // end button handler
}] //end items
}] // end dockeditems
});
var store = new Ext.data.Store({
model:'job',
pageSize:10,
autoLoad: false,
remoteSort:true,
proxy:{
type:'ajax',
fields:['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
url: '',
reader:{
totalProperty:'totalCount',
type: 'json',
root: 'results'
},
actionMethods: 'POST'
},
sorters:[{
property:'version',
direction:'ASC'
}]
});
var columns = [
{xtype: 'rownumberer',sortable: true},
{text: 'School Name', sortable:true,dataIndex:'account_name'},
{text: 'Acct Number', sortable:true,dataIndex:'account_number'},
{text: 'Job Number',sortable:true,dataIndex:'job_number'},
{text: 'Version',sortable:true,dataIndex:'version'},
{text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
{text: 'Program', sortable:true,dataIndex:'program'},
{text: 'Job Type', sortable:true,dataIndex:'type'}
]; // end columns
var userGrid = new Ext.grid.Panel({
id: 'userGrid',
multiSelect: false,
store: store,
columns: columns,
stripeRows: true,
title: 'Results',
renderTo: 'results',
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
})
});

Resources