Currently, we use an embedded tomcat, to start up ext-js application locally.
The Ext.application contains below code that loads the view port:
var viewPort = Ext.create('Ext.container.Viewport', {
layout : 'fit',
items: [
Ext.create('Ext.tab.Panel', {
items: [
Ext.create('Tab 1', {title: ' Tab 1'}),
Ext.create('Tab 2', {title: ' Tab 2'}),
],
}),
]
});
Can I load the tab2, above in the panel on condition basis. How can I configure say an option, some where in the web-application that loads tab2 only if the option is set?
For better clarification, something like -
// load tab 1
if (optionSet) {
// then load tab 2
}
Is this even possible? Thanks!
See if this snippet helps you:
var items = [{
xtype:'tab1'
,title:'Tab 1'
}];
if(condition) {
items.push({
xtype:'tab2'
,title:'Tab 2'
});
}
var viewPort = Ext.create('Ext.container.Viewport',{
layout:'fit'
,items:[{
xtype:'tabpanel'
,items:items
}]
});
Related
I need/would like to add a spinner (up and down arrows) to an Ext JS (6.6.0) Ext.form.field.ComboBox. Something like this:
The requirement is to keep the combobox functionality but also add the possibility to step through the list step by step.
I have to admit that I am quite new to Ext JS. I did some research and went through the Ext JS documentation a bit but I still have no clear idea how to best implement this.
Can anybody suggest something?
The easiest solution to your problems would be to add triggers.
This is the same technique that the combobox is using to apply a "trigger" (button) to the field.
Triggers have a handler config in which you can access (on user click) the combobox. From there you can easily access the current value and the store to get all the information you need to set the "next" or "last" value in relation to the values store position.
Here is a working live example: sencha fiddle
Here is a code example:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
triggers: {
spinner: {
type: 'spinner',
upHandler: function () {
const me = this,
position = me.getValue() ? me.getStore().indexOf(me.findRecordByValue(me.getValue())) - 1 : -1;
if (position >= 0) {
let newValue = me.getStore().getAt(position).get(me.valueField);
if (newValue) {
me.setValue(newValue);
}
}
},
downHandler: function () {
const me = this,
position = me.getValue() ? me.getStore().indexOf(me.findRecordByValue(me.getValue())) + 1 : 0;
if (position < me.getStore().getRange().length) {
let newValue = me.getStore().getAt(position).get(me.valueField);
if (newValue) {
me.setValue(newValue);
}
}
}
}
}
});
Suppose if i have created a grid store like this
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
data: [
[
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],
[
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
1,
"Altered State Police",
"14.95",
1
]
]
});
when i run it on browser i could not see anything because it has already been saved in the browser's memory , we need to display it to the the grid to see those data.
if i am editing the grid in the browser using editors plugin, so how can i see the changes made to the grid store? how to see it ?
You can add storeId to the store and then you can use the following global function:
Ext.StoreManager.lookup('storeId');
with this function you can always get the store from anywhere.
the gridpanel has the edit( editor, e, eOpts ) event which can be used after editing is complete.
Example:
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'gridStore',
(...)
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
(...),
listeners: {
edit: function(editing, e, eOpts) {
var record = e.record;
console.log('Changes on this record: ', e.record.getChanges());
console.log('Original value: ', (editing.ptype == 'cellediting' ? e.originalValue : e.originalValues));
console.log('New value: ', (editing.ptype == 'cellediting' ? e.value : e.newValues));
}
}
});
//for save on a toolbar
var button = Ext.create('Ext.button.Button', {
text: 'Save',
(...),
handler: function() {
var gridStore = Ext.StoreManager.lookup('gridStore');
console.log('all added, but not synchronized records: ', gridStore.getNewRecords());
console.log('all edited, but not synchronized records: ', gridStore.getUpdatedRecords());
console.log('all modified(added and edited), but not synchronized records:', gridStore.getModifiedRecords());
console.log('all removed, but not synchronized records:', gridStore.getRemovedRecords());
}
});
I'd say it depend.
First, to display you store in a grid, it should be something like this (simplified), following your code:
var grid = Ext.create('Ext.grid.Panel', {
title: 'Test',
store: store,
columns: [
{ text: 'title', dataIndex: 'title' },
{ text: 'director', dataIndex: 'director', flex: 1 }
],
height: 200,
width: 400
});
var MyWindow = Ext.create('widget.window',{width:400,height:200,items:[grid]});
MyWindow.show();
You assigned your store to a local variable "store". Normaly, if you use that store in a grid, and you make changes in that grid, it should reflect in the store.
When you make it editable with the editable grid plugin, changes are directly writen in the store, so this should work:
var currentStoreContent = store.data.items;
or, from the grid:
var currentStoreContent = grid.getStore().data.items
I am trying to place two Shield UI Charts in the same container. The one chart is line-type and the other- area. However it seems that the second chart is replacing the first one, so as a result I’ve got only the area chart to see. Below is my code:
$("#container2").shieldChart(
{
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: headerText
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'Q Data',
data: localData
}
]
}
);
$("#container2").shieldChart(
{
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: headerText
},
dataSeries: [
{
seriesType: 'area',
collectionAlias: 'Q Data',
data: localData
}
]
}
);
Each chart is completely and entirely rendered to a container, and to put it simple no other charts can be rendered to it in any given moment. I see you are using a single series charts, so first of all you can simply place the series in one chart.
Or you could simply place another container on the page, since having two containers will visually not reflect the appearance of the charts.
Here is my select field. We can see that the options are SI,American and Imperial
{
xtype: 'selectfield',
flex: 1,
itemId: 'units_Selector',
maxHeight: 50,
label: 'Units',
options: [
{
text: 'SI',
value: 'SI'
},
{
text: 'American',
value: 'American'
},
{
text: 'Imperial',
value: 'Imperial'
}
],
usePicker: false,
listeners: [
{
fn: function(element, eOpts) {
var unit = Ext.getStore('configstore').last().get('Units');
this.suspendEvents();
this.setValue(unit);
this.resumeEvents();
},
event: 'painted'
}
]
},
Here what I see when using my app...
OUPS seems like SI is displayed has International?
FYI - International was the option's name I gave this option at first. I decide to change it but my app seems to disagree with me on this one ....
Here is a console.log() of my selectfield's options
And here is the funniest part, my code.js file to see that it does save to it correctly from sencha architect
Would anyone know how to repair that problem...?
Answer is dumb...
Seriously, if you have multilanguage app... double check you aint modifing the value field -_-< when updating the language (text field).
found the problem by changing the itemId to something else to see who what changing the value of this select field. (Automaticly created an error and gave me a code line to find it)
How can I create dynamic form where all the fields are coming from a json file in sencha touch?
(Additional details transferred from "answer")
My json looks like it
{
success: true,
data: [
{xtype: "textfield", title: "label1", name: "textfield1"},
{xtype: "emailfield", title: "label2", name: "textfield2"},
{xtype: "passwordfield", title: "label3", name: "textfield3"},
{xtype: "button", title: "button", name: "button"}
]
}
I want a sepearte controller and a view.
i did it in a single controller file like this
form = Ext.create('MyApp.view.MyDataView');
var test=this;
var ajax = Ext.Ajax.request({
url: 'contacts.json',
method: 'get',
success: function(response)
{
console.log(response);
response = Ext.JSON.decode(response.responseText);
this.hello=response;
console.log(response.data.length);
for (var i = 0; i < response.data.length; i++)
{
form.add({
xtype: response.data[i].xtype,
id:response.data[i].title,
action:response.data[i].title,
label: response.data[i].title,
name: response.data[i].name
});
}
console.log(form.getValues());
form.setLayout();
form.show(document.body);
Ext.Viewport.animateActiveItem(form,{type: 'flip', direction: 'right'});
}
there is some problem i m facing regarding the utton tap event and if multiple buttons are there giving event to them is not yet possible for me ....can anybody help me regarding this ..
Have you tried something yet?
You can just create the form in the file like something like this:
{
xtype: 'form',
items: [ //...
]
}
Then you can load your file in, and decode it into a variable.
Ext.Ajax.request({
url: 'yourform.json',
success: function(response){
var formInJson = response.responseText;
var form = Ext.JSON.decode(formInJson);
//... do something with your form
}
});