I have created a picker in Sencha touch 2.1. My Data is displaying properly. I want to disable a particular value not all so that if I select that value and click "doneButton" then it shouldn't be taken.
Example:
function loadPicker(paramName, valueSet) {
Ext.Viewport.remove(Ext.getCmp(paramName + 'Pickerfield'), true);
if (!paramName.picker) {
paramName.picker = Ext.Viewport.add({
xtype: 'picker',
id: paramName + 'Pickerfield',
useTitles: true,
slots: [{
name: paramName,
title: paramName,
data: valueSet
}],
doneButton: {
listeners: {
tap: function(button, event, eOpts) {
var selectedPacingModeValue =
Ext.getCmp(paramName + 'Pickerfield').getValue()[paramName];
sendSetPendingRequest(paramName, selectedPacingModeValue);
}
}
}
});
}
}
lets take these are the values in my picker field. What I am doing on select of an value and click of "doneButton", I am showing the value in a textfield. What I want is if I will select "option 2" and click "doneButton" then option 2 shouldn't be displayed in textfield but for all other values this selecting and showing in textfield operation should work.
You can just get the selected record and check that flag upon click of the done button, then move to textbox (or not).
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
itemId: 'mySelectField',
label: 'Choose one',
options: [
{
text: 'apple',
value: 50
}, {
text: 'orange',
value: 100,
disabled: true
}, {
text: 'banana',
value: 200
}, {
text: 'papaya',
value: 300
}
]
},
{
xtype: 'button',
text: 'done',
handler: function(button){
var panel = button.up(),
sf = panel.down('#mySelectField'),
tf = panel.down('#answerfield');
/* you can only access the raw value unless you use
* an actual store and an actual model with the
* disabled field. In that case you can do
* sf.getRecord().get('disabled')
*/
if(sf.getRecord().raw.disabled === true){
tf.setValue(''); //noting to see :)
} else {
tf.setValue(sf.getRecord().get('text')); //display value
}
}
},
{
xtype: 'textfield',
itemId: 'answerfield',
title: 'answer'
}
]
}
]
});
Working fiddle: http://www.senchafiddle.com/#d46XZ
UPDATE
Like you asked: with the picker
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'SenchaFiddle',
launch: function() {
var picker = Ext.create('Ext.Picker', {
slots: [
{
name : 'stuff',
title: 'Stuff',
data : [
{
text: 'apple',
value: 50
}, {
text: 'orange',
value: 100,
disabled: true
}, {
text: 'banana',
value: 200
}, {
text: 'papaya',
value: 300
}
]
}
],
listeners: {
change: function(p, value){
var tf = panel.down('#answerfield'),
firstSlot = p.getItems().get(1), //index 0 is the toolbar 1 first slot and so on..
selectedRecord = firstSlot.getData()[firstSlot.selectedIndex];
if(selectedRecord.disabled === true){
tf.setValue(''); //noting to see :)
} else {
console.log(selectedRecord);
tf.setValue(selectedRecord.text); //display value
}
}
}
});
var panel = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'button',
text: 'show picker',
handler: function(button){
Ext.Viewport.add(picker);
picker.show();
}
},
{
xtype: 'textfield',
itemId: 'answerfield',
title: 'answer'
}
]
}
]
});
}
});
working fiddle: http://www.senchafiddle.com/#SFgpV
Related
I want to collapse or expand a node based on a condition in tree.panel in extjs 4.2.1
tree.on("beforeitemexpand",function(node) {
if (booleanFlag === true) {
//allow to expand
} else {
//donot allow to expand
}
});
I have tried the beforeitemExpand then return false if booleanFlag is false, but it is not working.
The event "beforeitemexpand" appears to have a bug in Extjs 4.2.1, its not ideal but you could use "beforeitemclick" and "beforeitemdblclick" to achieve the functionality that you want:
Ext.application({
name: 'Fiddle',
launch: function () {
var enableHomeExpand = false;
var enableBookExpand = false;
var store = Ext.create('Ext.data.TreeStore', {
root: {
children: [{
text: 'homework',
expanded: false,
children: [{
text: 'book report',
children: [{
text: 'test',
leaf: true
}, {
text: 'test 2',
leaf: true
}]
}, {
text: 'algebra',
leaf: true
}]
}, {
text: 'homework',
children: [{
text: 'book report',
children: [{
text: 'test',
leaf: true
}, {
text: 'test 2',
leaf: true
}]
}]
}]
}
});
var handleClick = function (node,rec,item){
if ((rec.data.text =="book report")&&(enableBookExpand)){
return true;
}
if ((rec.data.text =="homework")&&(enableHomeExpand)){
return true;
}
return false;
}
var treepanel = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 400,
height: 200,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners:{
beforeitemdblclick: handleClick,
beforeitemclick: handleClick
},
buttons:[{
text:'Enable Expand "homework"',
handler: function(){ enableHomeExpand = true; }
},
{
text:'Enable Expand "book report"',
handler: function(){ enableBookExpand = true; }
}]
});
}
});
Here is the FIDDLE
Well considering a grid I create in my application:
{
xtype: 'ordergrid',
itemId: 'ordergrid',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
}
}]
},
With ordergrid being defined with:
extend: 'Ext.grid.Grid',
xtype: 'ordergrid',
I wish to modify the items of the menu dynamically. I've first tried doing this through a store:
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
store: { type: 'status' }
Though this doesn't seem to work. Then I tried accessing this menu through a component query, during the init function of some controller:
Ext.define('BinkPortalFrontend.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
init: function () {
console.log('..... initializing ......');
const menus = Ext.ComponentQuery.query('ordergrid #status_menu');
const menu = menus[0];
menu.setItems([{
text: 'some',
value: 'some'
}, {
text: 'new',
value: 'mew'
}]);
},
};
However this returns an error: "Cannot read property 'setItems' of undefined"
Debugging shows the obvious problem: it doesn't find any menu.
What's more, even a "catch all" query like
Ext.ComponentQuery.query('menu');
or
Ext.ComponentQuery.query('#status_menu');
Shows an empty array: so what's going on? (I most definitely see the menu from its initial load).
There is one reason your menu is not created. Menu will created whenever button will tap or whenever getMenu() method get called.
If you want to get your menu using Ext.ComponentQuery.query(), so for this you need to do use initialize event of button and forcefully create menu using getMenu() method like below :-
{
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function(btn) {
Ext.defer(function() {
// This will print undefined because menu have not created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will print menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}
Another way you can use getMenu() method of button. It will return the menu component.
In this FIDDLE, I have created a demo using grid, button and menu. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
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"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Grid', {
title: 'Change menu items dynamically',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
itemId: 'statusbtn',
menu: {
itemId: 'status_menu',
defaults: {
// handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function (btn) {
Ext.defer(function () {
// This will undefined because menu has not been created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}, {
xtype: 'button',
align: 'right',
text: 'Change Items',
handler: function (btn) {
var newItems = [];
store.each(rec => {
newItems.push({
text: rec.get('name'),
value: rec.get('name')
})
});
/*
* You can also get menu using button
* btn.up('titlebar').down('#statusbtn').getMenu().setItems(newItems);
*/
Ext.ComponentQuery.query('#status_menu')[0].setItems(newItems);
Ext.toast('Menu items has been change. Please check', 2000);
}
}]
},
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
height: 200,
layout: 'fit',
fullscreen: true
});
}
});
For more details about component you can also see this ComponentManager
I have a tab, named "Schema", that renders a grid. One of the grid columns is checkcolumn type. What values should I pass to the store when I render my grid, so I have some of the checkboxes checked and others not checked? It must be something really trivial, but I couldn't find a solution so far.
Here is a simplified structure of the grid and the checkcolumn:
{
title: 'Schema',
listeners: {
activate: function(tab) {
myNmsps.renderSchema();
}
},
id: 'schemaTab',
items: [{
xtype: 'grid',
id: 'schema',
border: false,
data: [],
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
isEditable: true,
}
},{
text: 'Position',
dataIndex: 'position',
editor: {
xtype: 'combobox',
id: 'position',
}
}, {
text: 'Type',
dataIndex: 'type',
id: "TypeDropdown",
editor: {
xtype: 'combobox',
id: 'SelectType',
}
}, {
text: 'Size',
dataIndex: 'size',
id: "SizeDropdown",
editor: {
xtype: 'combobox',
id: 'SelectSize',
}
}, {
text: 'FilteringType',
dataIndex: 'filteringType',
editor: {
xtype: 'combobox',
id: 'filteringType',
}
}, {
xtype:'checkcolumn',
fieldLabel: 'checkboxIsUnique',
name: 'checkboxIsUnique',
text: 'Is Unique',
id: 'checkboxIsUniqueID',
dataIndex : 'checkboxIsUniqueIDX',
listeners:{
checkchange: function(column, rowIdx, checked, eOpts){
var schemaStore = Ext.getCmp('schema').getStore();
schemaStore.each(function(record,idx){
if(rowIdx == idx && checked===true){
record.set('checkboxIsUnique',true);
record.raw[6] = true;
} else if(rowIdx == idx && checked===false){
record.set('checkboxIsUnique',false);
record.raw[6] = false;
}
record.commit();
});
}
}
},
{
text: 'Delete',
dataIndex: 'deleteColumn',
id: "deleteColumn"
}
],
listeners: {
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
]
}
In the checkchange listener
And this is simplified function that generates the store and renders the grid:
renderSchema: function() {
var grid = Ext.getCmp("schema");
for (var i = 0; i < myGridData; i++) {
storeArr[i][0] = myGridData[i].name;
storeArr[i][1] = myGridData[i].type;
storeArr[i][2] = myGridData[i].size;
storeArr[i][3] = i;
storeArr[i][4] = "<button class='schemaDeleteButton x-btn'> </button>";
storeArr[i][5] = myGridData[i].filteringType;
storeArr[i][6] = myGridData[i].isUnique; // true/false;
}
var dataStore = Ext.create('Ext.data.ArrayStore', {
extend: 'Ext.data.Model',
fields: [
{name: 'name'},
{name: 'type'},
{name: 'size'},
{name: 'position'},
{name: 'deleteColumn'},
{name: 'filteringType'},
{name: 'checkboxIsUnique'}
],
data: storeArr
});
grid.suspendEvents();
grid.reconfigure(dataStore);
grid.resumeEvents();
}
So I'm passing true or false for the field checkboxIsUnique, but it doesn't affect my interface that looks like this:
The field in my dataStore in the renderSchema function should've been named 'checkboxIsUniqueIDX' - same as the dataIndex in checkcolumn component.
I am adding a textfield dynamically when i click add button, after that i need to get the values what i added dynamically while i click save button. its in extjs2.0 itself.
This is the code what i am working on
var settingsEmailPanel = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
id:'emailForm',
title: 'Email Servers',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'checkbox',
items: [{
boxLabel: 'Server 1',
hideLabel: true,
name: 'server1'
},{
boxLabel: 'Server 2',
hideLabel: true,
name: 'server2'
},{
boxLabel: 'Server 3',
hideLabel: true,
name: 'server3'
}, {
boxLabel: 'Server 4',
hideLabel: true,
name: 'server4'
}
],
buttons: [{
text: 'Add',
handler: function () {
settingsEmailPanel.add({
xtype: 'textfield',
fieldLabel: 'New ServerName',
name: 'newServer',
allowBlank:false
});
settingsEmailPanel.doLayout();
}
},{
text: 'Save',
handler: function () {
alert("Save clicked");
console.log(Ext.getCmp("emailForm").getForm().findField("newServer").getValue());
}
}]
});
Here what I am trying to do is onclick of save I need to query each element of form and if element xtype is textfield then getting value each by each and displaying that.
Code for save button is :
{
text: 'Save',
handler: function() {
var settingsEmailPanel = this.up().up();
var settingsEmailPanelItem = settingsEmailPanel.items.items;
for (var i = 0; i < settingsEmailPanelItem.length; i++) {
if (settingsEmailPanelItem[i].xtype == "textfield") {
var Value = settingsEmailPanelItem[i].getValue();
alert(Value)
}
}
// alert("Save clicked");
//console.log(Ext.getCmp("emailForm").getForm().findField("newServer").getValue());
}
}
I created a fiddler for you which you can check here.
Fiddle
Note : I can not see fiddle work for ExtJs 2 so I did in ExtJS 4. For making work in extJS 2 you need to assign uniqe id to each textfield and then retrive the value I suppose. The above answer will work from ExtJS 4 and above. if you make a fiddle for ExtJS 2 and I will try further more.
Just add them to an array every time you create one so you can retrieve them later in your save button handler :
var textFields = [];
/*
* [...]
*/
buttons: [{
text: 'Add',
handler: function () {
var textField = Ext.create('Ext.form.field.Text', {
xtype: 'textfield',
// ...
});
textFields.push(textFields);
settingsEmailPanel.add(textField);
settingsEmailPanel.doLayout();
}
},{
text: 'Save',
handler: function () {
for(var i=0; i<textFields.length; i++){
console.log(textFields[i].getValue());
}
}
}]
I have a window with a checkboxGroup in it. I would like whatever selections are made in the checkboxGroup to be saved when my "apply" button on the window is pressed. So far I have
xtype: 'checkboxgroup',
stateful: true,
stateID: 'checks',
getState: function() {
return {
items: this.items
};
},
stateEvents: ['close'],
columns: 2,
vertical: false,
items: [...]
I'm pretty sure my stateEvents are wrong, what would I use to indicate that I want the state to be saved when the parent window is closed?
I have this line in my app.js file's launch function, right before I create the top viewport
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Thank you!
apparently the state of the checkbox group does not include the values of the checkboxes http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.CheckboxGroup-method-getState
i had to go via a session variable and the parent window events ..
var configPopup;
var configForm = Ext.create('Ext.form.Panel', {
id: 'form-config',
name: 'form-config',
frame: true,
layout: 'anchor',
items: [
{
border:0,
anchor: "100%",
xtype: 'checkboxgroup',
fieldLabel: 'Include options',
labelWidth: 100,
id: 'opt_relation',
labelStyle: 'margin-left:10px;',
items: [
{
boxLabel: 'relation 1',
name: 'opt_relation',
inputValue: 'rel1',
checked: true
},
{
boxLabel: 'relation 2',
name: 'opt_relation',
inputValue: 'rel2',
checked: true
},
{
boxLabel: 'relation 3',
name: 'opt_relation',
inputValue: 'rel3',
checked: true
}
]
}
],
buttons: [
{
text: 'Close',
handler: function() {
configPopup.hide();
}
}]
});
configPopup = new Ext.Window({
id:'configPopup',
title: 'Chart configuration',
layout : 'fit',
width : 390,
closeAction :'hide',
plain : true,
listeners: {
show: function() {
var v = Ext.state.Manager.get("optRelation");
if (v) {
Ext.getCmp('opt_relation').setValue(v);
}
},
hide: function() {
var v = Ext.getCmp('opt_relation').getValue();
Ext.state.Manager.set("optRelation",v);
}
},
items : [
configForm
]
});