Related
I'm facing an issue. I'm building an EXTJ 6.2 modern app with Sencha architect 4.1. I'm using the grid component in my panel with a server loaded store. I'd like to color rows according to the data I have.
In classic, this is doable with
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, p, store) {
//some if statement here
}
I tried this in modern but it doesn't work. Does anyone know of another way or a hack that I could do color the rows? Or at best at least change the one-color background.
I'd really like to avoid using the list component if possible.
In modern you can use itemConfig to configure Ext.grid.Row.
Add the code bellow to a Sencha Fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
itemConfig: {
listeners: {
painted: function (row) {
var record = row.getRecord();
var color = record.get('color');
row.setStyle('background: '+color)
//if (color == 'red')
//row.setStyle('background: red');
}
}
},
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120
},
{
text: 'Color',
dataIndex: 'color',
flex: 1
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
the itemConfig part is what will do the trick.
After #Gwynge's comment i've created another example setting the color to each cell using the renderer config:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
},
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Color',
dataIndex: 'color',
flex: 1,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
I hope this will help.
To color a row, the following code couldn't work in my project
itemConfig: {
listeners: {
painted: function(row) {
var record = row.getRecord();
}
}
}
row.getRecord doesn't work (getRecord() is not recognized as function)
I succeed to color a row from a cell
columns: [{
text: 'Name',
dataIndex: 'name',
width: 150,
sortable: true,
renderer: function(v, record, dataIndex, cell) {
var row = cell.up();
row.setStyle('background: ' + record.get('color') + ';');
return v;
}
}]
I found that neither of the solutions suggested in the accepted answer worked well for me. The solution using a painted event handler only works on first load. If the data is updated then the styling doesn't change so the rows are still coloured as per the original data. The renderer solution is unwieldy if you have a large number of columns or want to have multiple renderers.
For anyone else in the same boat, here's my solution:
itemConfig: {
viewModel: true,
bind: {
cls: '{record.IsEnabled === false ? "disabled" : ""}'
}
}
I am using ExtJS 5.0.1. I have a grid which does not autoLoad. Once the store is manually loaded by using the click button in TopBar, the grid receives records.
I am trying to implement infinite scroll on this grid. My store has extra params that need to be passed to the backend in order to get the records. After the first page is loaded, for the second page, no extra params are passed to the backend. How can I correct this?
My store looks as follows ->
Ext.define('MyStore', {
// extend: 'Ext.data.BufferedStore',
extend: 'Ext.data.Store',
model : 'MyModel',
remoteSort: true,
buffered: true,
leadingBufferZone: 10,
trailingBufferZone: 10,
pageSize: 100,
proxy: {
type : 'rest',
format: 'json',
url : '/myApp/list',
extraParams: {
fromDate: '',
toDate: ''
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'totalCount'
}
}
});
My Grid looks as follows-->
Ext.define('MyGridl', {
extend: 'Ext.grid.Panel',
requires: [
'MyStore'
],
layout: 'fit',
loadMask: true,
viewConfig: {
preserveScrollOnRefresh: true
},
initComponent: function() {
this.id = 'myGrid';
this.store = new MyStore();
this.callParent(arguments);
},
overflowY: 'auto',
frame: true,
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
text: 'Column1',
dataIndex: 'Col1',
flex: 1
},{
text: 'Column2',
dataIndex: 'Col2',
flex: 1
}
],
plugins: [
{
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10,
scrollToLoadBuffer: 10
}
],
tbar: {
items: [{
xtype : 'datefield',
id : 'fromDate',
emptyText: 'Enter From Date',
listeners : {
render : function(datefield) {
datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
}
}
},{
xtype : 'datefield',
id : 'toDate',
emptyText: 'Enter To Date',
listeners : {
render : function(datefield) {
datefield.setValue(new Date());
}
}
},{
xtype: 'button',
text: 'Filter by Date',
style: {
marginLeft: '15px'
},
scope: this,
handler: function(me){
var store = Ext.getStore('myStore'),
fromDay = me.up().down('#fromDate').getValue(),
toDay = me.up().down('#toDate').getValue();
store.removeAll();
store.load({
params:{
fromDate: fromDay,
toDate: toDay
}
});
}
}
]
}
});
I fixed this issue by adding
store.removeAll();
store.currentPage = 1;
store.getProxy().setExtraParam("fromDate", fromDay);
store.getProxy().setExtraParam("toDate", toDay);
store.load();
Here my code in sencha touch, i tried to add 2 button horizontaly, Means one to other.No,luck its keep on coming one in upper side and the other one lower.
var profilese = {
standardSubmit : false,
items: [tab,{
xtype: 'button',
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'DELETE',
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}]
};
How to set button in a same row.Please help me to sort it out.
I'm not sure what tab is in your code, but what you need to get the buttons aligned horizontally is an hbox layout:
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'button',
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}
]
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.HBox
In ExtJS point, there must be a container as parent to hold the children(Buttons). And the set the layout config as "hbox".
The code must look like,
items:[
tab,
{
xtype:'container',
layout:'hbox',
items:[
{
xtype:'button1'
},
{
xtype:'button2'
}
]
}
]
layout: {
type: 'column'
},
items: [
{
xtype: 'button',
columnWidth: 0.5,
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'button',
columnWidth: 0.5,
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}
]
i have a js view that contain button when i click this button i want to open another view
and it connot work
this is my first view
Ext.define('Ext4Example.view.login.WestMenu', {
extend: 'Ext.panel.Panel',
alias: 'widget.westmenu',
frame:'true',
initComponent: function() {
Ext.apply(this, {
title: 'Writeup',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
iconCls:'logo',
split: true,
collapsible: true,
items: [
{
xtype : 'button',
text:'Ajouter réunion',
action:'meet',
iconCls:'add',
name:'meet',
width:120,
height:30,
x:20,
y:30
}]
});
this.callParent(arguments);
}
});
and this is my second view
Ext.define('Ext4Example.view.login.create-rd', {
extend: 'Ext.window.Window',
alias: 'widget.test',
frame:'true',
initComponent: function() {
var win= Ext.create('Ext.window.Window', {
title: 'Ajouter réunion',
width : 630,
height: 600,
layout: 'fit',
iconCls:'add',
items: [{
xtype: 'form',
id : 'form-widgets',
},
items: [
{
fieldLabel: 'date',
xtype : 'datefield',
name : 'date'
}
],
}
]
}).show();
}
});
and this is my controller
Ext.define('Ext4Example.controller.Login', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'Home',
selector: 'home'
},
{
ref: 'Login',
selector: 'login'
}
],
stores: ['Login'],
models: ['Login'],
views: ['login.LoginForm','login.HomePage','login.CenterPanel','login.WestMenu','login.create-rd'],
init: function() {
this.control({
'login button[action=reset]': {
'click' : function(button, event, opt) {
var form = button.up('form');
form.getForm().reset();
}
},
'login button[action=connect]': {
'click' :this.connect
},
'login button[action=meet]': {
'click' :this.meet
}
});
},
connect:function()
{
this.getLogin().close();
var view1 = Ext.widget('home');
},
meet:function()
{
this.getHome().close();
var view2 = Ext.widget('test');
}
});
please any one have a solution of this
You have nothing that matches login. The selector login button[action=reset] means "Find a button xtype, with an attribute action, with a value reset, that exists as a child item under a container with xtype login".
It's the last past of your selector that's not satisfied.
Change the selector to:
westmenu button[action=reset]
i'm new in sencha touch and i'm having a weird problem with a button. I'm using mvc, and i have:
Adduserview.js
Ext.define('App.view.Adduserview', {
extend: 'Ext.form.Panel',
xtype: 'adduserview',
requires: ['Ext.form.FieldSet','Ext.field.Select','App.store.Companies'],
config: {
id: 'userform',
items: [
{
xtype: 'fieldset',
title: 'Details',
items:[
{
xtype: 'textfield',
name: 'userName',
label: 'Name'
},
{
xtype: 'textfield',
name: 'userLastname',
label: 'Lastname'
},
{
xtype: 'textfield',
name: 'userNumber',
label: 'Number'
}
]
},
{
xtype: 'fieldset',
title: 'Links',
items: {
xtype: 'selectfield',
label: 'Company',
store: Ext.create('App.store.Companies'),
displayField: 'companyName',
valueField: 'companyName'
}
},
{
xtype: 'button',
text: 'Send',
id: 'adduserButton'
}
]
}
});
Adduser.js
Ext.define('App.controller.Adduser', {
extend: 'Ext.app.Controller',
config: {
refs:{
userform: '#userform'
},
control: {
'#adduserButton': {
tap: function(){
var valuesUser = this.getUserform().getValues();
console.log(valuesUser);
if (notNull(valuesUser.userName) && notNull(valuesUser.userLastname) && notNull(valuesUser.userNumber)){
Ext.Ajax.request({
url: 'http://server.com/insertUser.php',
params: valuesUser,
method: 'post',
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
this.getUserform().reset();
}
else{
Ext.Msg.alert('Error', 'All the fields are necessary');
}
}
}
}
}
});
function notNull(a) {
if(a!="" && !(a.match(/^\s+$/))){
return true;
}
else{
return false;
}
};
The problem is that the button does not work, it just does nothing when pressed, and i have other two FormPanels exactly like that but with different data, and each of them has a controller just like the one i showed but with different code in the tap function, and they work. I noticed that when i see the scripts that are loaded in chrome, the Adduser.js is not there, so i guess thats the reason its not working, but im not sure why its not loading.
By the way i added the controllers to App.js.
Thanks for the help.
Change your refs to
refs:{
userButton: '#adduserButton'
}
And the Control As
control: {
userButton: {
Hope this helps you
update your controoler code with
Ext.define('App.controller.Adduser', {
extend: 'Ext.app.Controller',
config: {
refs:{
userform: '#userform'
}
},
init: function () {
this.control({
'#adduserButton': {
tap: function(){
var valuesUser = this.getUserform().getValues();
console.log(valuesUser);
if (notNull(valuesUser.userName) && notNull(valuesUser.userLastname) && notNull(valuesUser.userNumber)){
Ext.Ajax.request({
url: 'http://server.com/insertUser.php',
params: valuesUser,
method: 'post',
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
this.getUserform().reset();
}
else{
Ext.Msg.alert('Error', 'All the fields are necessary');
}
}
}
});
},
}
});
Add
controllers: [
'App.controller.Adduser',
],
in app