Develop Reference

Rendering a "normal" checkbox with ext.js 4

I'm trying to do something, i think, that should be relatively simple with EXT.js 4, but I can not find an answer. I'm trying to create a checkbox with a type of "checkbox" currently when I try it renders it as a type="button"
here is a sample of what I'm doing (I belive this code comes from Sencha itself, but it is what I am trying to do)
THIS CODE
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width : 300,
title : 'Pizza Order',
items: [{
xtype : 'fieldcontainer',
fieldLabel : 'Toppings',
defaultType: 'checkboxfield',
items: [{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: '1',
id : 'checkbox1'
}, {
boxLabel : 'Artichoke Hearts',
name : 'topping',
inputValue: '2',
checked : true,
id : 'checkbox2'
}, {
boxLabel : 'Bacon',
name : 'topping',
inputValue: '3'
id : 'checkbox3'
}]
}],
bbar: [{
text: 'Select Bacon',
handler: function() {
var checkbox = Ext.getCmp('checkbox3');
checkbox.setValue(true);
}
},
'-',
{
text: 'Select All',
handler: function() {
var checkbox1 = Ext.getCmp('checkbox1'),
checkbox2 = Ext.getCmp('checkbox2'),
checkbox3 = Ext.getCmp('checkbox3');
checkbox1.setValue(true);
checkbox2.setValue(true);
checkbox3.setValue(true);
}
},{
text: 'Deselect All',
handler: function() {
var checkbox1 = Ext.getCmp('checkbox1'),
checkbox2 = Ext.getCmp('checkbox2'),
checkbox3 = Ext.getCmp('checkbox3');
checkbox1.setValue(false);
checkbox2.setValue(false);
checkbox3.setValue(false);
}
}],
renderTo: Ext.getBody()
});
RENDERS
<input type="button" hidefocus="true" autocomplete="off" class="x-form-field x-form-checkbox x-form-cb" id="checkbox1-inputEl" aria-invalid="false" data-errorqtip="">
Notice the type="button"? I nee the type to be a "checkbox"
Let me include the reason, maybe I am approaching this wrong. I am trying to make JAWS reader read the checkbox the way it should. As a type "button" JAWS reader reads it like a button and dose not read the label that goes with the check box.
Hope this makes since, please ask any question you need to and thanks for any help.
Ross

You can do this using config autoEl. Check this fiddle: http://jsfiddle.net/vdazU/3262/
{
xtype: 'component',
autoEl: {
html: '<input type="checkbox" id="checkbox1" name="topping" >Anchovies'
}
If you inspect the DOM, you will be able to see a html input checkbox.

I had the same problem, so almost 2 years later, here's your answer:
You need to include the css! It took me hours to figure this out.
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css">
BTW, put a comma after the 3.
inputValue: '3',

I had run your code at my end and its working fine. I am using extjs 6.0.2 and I think what you are seeing is that box that needs to be checked prefix to the label. It always remains as a button only. Even if you use a radiofield, then also it will be type="button" in dom because that box has to handle click event which can be handled by type="button". Can you provide the reason why you need it as type="checkbox"?

Adding form data inputs to jqGrid

I am trying to add the data obtained from the form and display it to JQGrid.
I have the following elements in my Form.
Textbox for username
Datepicker for date of birth
Combobox for selecting the country.
Two buttons Add and Clear button.
Whenever i click the Add button ,it has to add a row to the JQGrid.Whenver i click the clear button it has to reset the entire table.
Currently,I am trying to display the data from the form to the row.
Below is my effort till now.
<script>
$(function() {
$( "#pwd" ).datepicker();
var source = [{
text: "Australia",
value: 0
},
{
text: "India",
value: 1
},
{
text: "United States",
value: 2
},
{
text: "United Kingdom",
value: 3
}];
$("#jqxComboBox").jqxComboBox({
source: source,
theme: 'energyblue',
width: '240px',
height: '30px',
displayMember: 'text',
selectedIndex: 0,
valueMember: 'value'
});
$('#add').click(function(){
name=$('#name').val();
date=$('#pwd').val();
country=$('#jqxComboBox').val();
alert(name);
$('#jqGrid').jqGrid('addRowData',name,date,country);
}); });
</script>
<style type="text/css">
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" role="form" id="add_form">
<input type="text" id="name"></input>
<input type="text" id="pwd"></input>
<div id="jqxComboBox"></div>
<input type="submit" value="add">
<input type="submit" value="reset">
</div>
</form><table id="jqGrid">
</table>
</body>
</html>

May be you should init jqGird first and run code like below :
$(function() {
$("#jqGrid").jqGrid({
'datatype' : 'local',
// if there is no data at the beginning, just define an empty array [],
// or you can set init data with data option below
'data' : [ {
'name' : 'testUser',
'date' : '15/4/2016',
'country' : 'somewhere'
} ],
'colNames' : [ 'Name', 'Date', 'Country' ],
'colModel' : [ {'name' : 'name'}, {'name' : 'date'}, {'name' : 'country'} ],
'loadComplete' : function() { // You can add data manually using code below.
// You can define a datarow variable as single object and also an
// array of objects.
// array data example: var datarow = [{"name":"addedName",
// "date":"16/4/2016", "country":"any"},
// {"name":"addedName2", "date":"16/4/2016", "country":"any2"}];
var datarow = {
"name" : "addedName",
"date" : "16/4/2016",
"country" : "any"
};
// second parameter of method below is rowid just for generate id
// attribute of tr element.
// if keep rowid variable as undefined, jqGrid will generate a
// random id instead.
var rowid;
// last paremeter tell jqGrid add new data after last row.
$("#jqGrid").jqGrid("addRowData", rowid, datarow, "last");
}
});
});
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<table id="jqGrid"></table>

Echo value from database to selectize.js with php

I'm trying to echo out value from database with php for selectize.js.
Html code
<select id="type" placeholder="Type" name="type" required>
<!-- This option help to selected value from DB -->
<!--<option value="<?php echo $dataFromDB['type'] ?>" selected></option>-->
</select>
<button id="someType">Add Option</button>
Js code (example from selectizejs (with change))
var $select = $('#type').selectize({
maxItems: 1,
valueField: 'id',
labelField: 'days',
searchField: 'days',
options: [{
id: '1',
days: '5 days'
}, {
id: '2',
days: '2 days'
}, {
id: '3',
days: '1 days'
}],
create: true
});
var control = $select[0].selectize;
$('#someType').on('click', function () {
control.addOption({
id: '4',
days: 'New Days'
});
});
How to automatically add option from database value and set as selected option?
jsfiddle link
Note: I could echo out the value to option if there's a match between database value and options value.
Thanks in advanced.

Like this? http://jsfiddle.net/2zyp8jxn/1/
control.setValue("4");
Create a variable with php:
$php_test = "control.addOption({
id: '".$dataFromDB['type']."',
hari: '".$dataFromDB['type']."'
});
control.setValue('".$dataFromDB['type']."');
";
and add this jquery code
var control = $select[0].selectize;
$(function() {
<?php echo 'var someOptions ='. $php_test ?>
});
I dont know if create a variable someOptions is necessary or not but it works for me.
Thanks

Select2 load related data into second select2?

I am working with Cakephp 2.4, Select2 3.4 and Jquery 1.10.
In my app, I have a table with 3 columns - product code, product description and product price.
I have Select2 set up so that the user can select either via product code or via product description. What I want to achieve is:
if the users selects via product code, set the product description and price and if he selects via description, set product code and price.
My data gets returned as follows:
[{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"}, {"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"}, {"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}]
I am able to set the value of the second select2 box using plain jQuery:
$(".productCode").on('change', function (product){
$(".description").select2("data", {id: '1', text: 'Test'});
});
What do I have to use to set the .description select2 value to the "description" value returned?

You forget initialize the select elements. Do it like this:
<!DOCTYPE html>
<html>
<head>
<title>jquery select2 test</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<link href="select2/select2.css" rel="stylesheet"/>
<script src="select2/select2.js"></script>
</head>
<body>
<input type="hidden" class="productCode" />
<select class="description" >
</select>
<script type="text/javascript">
$(document).ready(function() {
var $productCode = $(".productCode"),
$description = $(".description"),
product = [{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"},{"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"},{"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}];
//should initilize two select first
$productCode.select2({
'placeholder' : 'input to search',
"width" : '200px',
"query": function(query){
var data = {results: product};
query.callback(data);
}
});
$description.select2({
'width' : '200px'
});
$productCode.on('change', function (product){
$description.select2("data", {id: '1', text: 'Test'});
});
});
</script>
</body>
</html>

If you use hidden inputs to back your Select2 controls, like this:
<input type="hidden" class="product" id="productCode" data-text="text" data-placeholder="code" />
<input type="hidden" class="product" id="description" data-text="description" data-placeholder="description" />
<input type="hidden" class="product" id="unitPrice" data-text="unitPrice" data-placeholder="unit price" />
And you have data like this:
var PRODUCTS = [
{ id: 1, text: '10001', description: 'Product 1', unitPrice: '1.25' },
{ id: 2, text: '10002', description: 'Product 2', unitPrice: '5.00' },
{ id: 3, text: '10003', description: 'Product 3', unitPrice: '2.74' }
];
You can populate your Select2 controls using the "data" option, like this:
$('.product').each(function() {
var $this = $(this);
$this.select2({
allowClear: true,
data: { results: PRODUCTS, text: $this.attr('data-text') }
});
});
And you can use the Select2 "val" function to get and set the values, like this:
$('.product').change(function() {
var selecteId = $(this).select2('val');
$('.product').select2('val', selecteId);
});
jsfiddle demo

How to get checked values of a Extjs 4 radio group?

I have bottom bar added to a panel like this
bbar: [{
xtype : 'button',
text : 'Select Filter By',
itemId : 'filter_by',
arrowAlign : 'right',
menu : [{
text : 'Item Code',
checked : true,
group : 'filter',
itemId : 'item_code'
},{
text : 'Description',
checked : false,
group : 'filter',
itemId : 'description'
}]
}]
how to get the which is checked from these two?
Regards

In this case, they both can be checked or unchecked.
You can give an id to each and then simply do Ext.getCmp('id1').getValue() and Ext.getCmp('id2').getValue() to get the state of each
If you want to use these as a "group", you will have to wrap them in a CheckboxGroup or RadioGroup depending on your requirement.

try this
the idea is just add a listener to each Ext.menu.Menu.
if you are working with your own class, you can make testCheck as one of your method..