I have a basic grid, and I have added some filters to columns. I added them in the constructor like so, since some of them use stores
constructor: function(config) {
Ext.apply(this, {
features : [{
ftype: 'filters',
encode: true,
local: false,
filters: [{
type: 'string',
dataIndex: 'name'
},{
type: 'string',
dataIndex: 'priority'
},{
type: 'list',
store: Ext.getStore('adminCategory'),
dataIndex: 'adminOrg',
labelField: 'displayName'
},{
type: 'list',
store: Ext.getStore('adminClientList'),
dataIndex: 'client',
labelField: 'name',
listeners: {
activate: function(obj, eOpts) {
console.log(obj);
}
}
}]
}]
});
this.callParent(arguments);
The menu items load just fine, however when the filter activates, and starts to load the store, the filter params are not present, so they aren't submitted to the server.
I checked the beforeload event on the store, and the filters array is empty (in the operations object where all the sorter info is stored too).
The filtersfeature doesn't store the filter info in the same place as the default filters go. I don't know why, but it doesn't. In the same object you found the filters and sorters arrays, look in the params property, there should be a property in params called filter. That will contain the filters. By default, I believe all the filters are encoded into a json string, so if you want them as an array, you'll have to use Ext.decode.
Related
I am trying to bind a list of data from my MVC action controller in an inline JqGrid. The sample JSON data is follows
{Id:"1",FirstName:"Joy",Gender:"Male"},
{Id:"2",FirstName:"George",Gender:"Male"},
{Id:"3",FirstName:"Tessa",Gender:"Female"}
I am trying to bind a drop down for Gender within the inline JqGrid. The sample data for the dropdown is as follows.
{Id:"17b4bf97-4ab0-49b1-ab01-072f4dbed696",Gender:"Male"},
{Id:"f206d222-0608-4b92-b9dd-0cac5c66121",Gender:"Female"}
I have configured the JqGrid as follows
$("#tbl-users").CreateGrid({
url: // MVC controller action url,
colNames: ['User ID', 'First Name', 'Gender',....],
colModel: [
{ name: 'UserID', index: 'UserID', sorttype: 'integer', hidden: true, key: true },
{name: 'UserName', index: 'UserName', searchoptions: { sopt: ['cn'] }, editable: true},
{name: 'Gender', index: 'Gender', searchoptions: { sopt: ['cn'] }, editable: true,
edittype: "select",
formatter: 'select',
editoptions: {
dataUrl: // Url to get the list of Gender User from the MVC controller,
buildSelect:
function (response) {
//Code to build a drop down
}
}
},
});
On configuring as above I am not able to show the value of the Gender in my list. What am I missing? It would be helpful if I get guidance from anyone.
I am using JqGrid 4.5.1
With reference to the example add value attribute in Gender editoptions, The editoptions will look something like this.
$("#tbl-users").CreateGrid({
url: // MVC controller action url,
colNames: ['User ID', 'First Name', 'Gender',....],
colModel: [
{ name: 'UserID', index: 'UserID', sorttype: 'integer', hidden: true, key: true },
{name: 'UserName', index: 'UserName', searchoptions: { sopt: ['cn'] }, editable: true},
{name: 'Gender', index: 'Gender', searchoptions: { sopt: ['cn'] }, editable: true,
edittype: "select",
formatter: 'select',
editoptions: {
value:"17b4bf97-4ab0-49b1-ab01-072f4dbed696:Male;f206d222-0608-4b92-b9dd-0cac5c66121:Female"
dataUrl: // Url to get the list of Gender User from the MVC controller,
buildSelect:
function (response) {
//Code to build a drop down
}
}
},
});
Change the return value for Gender as GUID.So the json will look something like this
{Id:"1",FirstName:"Joy",Gender:"17b4bf97-4ab0-49b1-ab01-072f4dbed696"},
{Id:"2",FirstName:"George",Gender:"17b4bf97-4ab0-49b1-ab01-072f4dbed696"},
{Id:"3",FirstName:"Tessa",Gender:"f206d222-0608-4b92-b9dd-0cac5c66121"}
FOR DYNAMIC LOADING
You can generate the value for value attribute in editoption dynamically by assigning the value in Viewbag on page load.
Assume the action for the page as Index in your controller
public ActionResult Index()
{
ViewBag.Genders = "17b4bf97-4ab0-49b1-ab01-072f4dbed696:Male;f206d222-0608-4b92-b9dd-0cac5c66121:Female"; // You can create your logic with C#
return this.View();
}
Assign ViewBag.Genders in value attribute of edit option as shown below
editoptions: { value:"#ViewBag.GenderTypes" }
I hope this idea will help you.
Question 1: Is it possible to add custom data (Ex: testcase count : 5) to each card in a story board? If so, how? I couldn't find an example or specific information in documentation.
Question 2: Is it possible to get testcase count (including child story testcases)for a highlevel story in one query?
Please let me know. Here's my code
Ext.define('Rally.Story.View', {
extend: 'Rally.app.App',
launch: function() {
this.add({
xtype: 'rallyfieldvaluecombobox',
fieldLabel: 'Filter by Target Release:',
model: 'UserStory',
field: 'c_TargetRelease',
value: '15.0',
listeners: {
select: this._onSelect,
ready: this._onLoad,
scope: this
}
});
},
_onLoad: function() {
this.add({
xtype: 'rallycardboard',
types: ['User Story'],
attribute: 'ScheduleState',
readOnly: true,
fetch: ['Name', 'TestCases', 'c_StoryType', 'c_TargetRelease', 'PlanEstimate', 'Priority', 'TaskEstimateTotal', 'TaskRemainingTotal'],
context: this.getContext(),
cardConfig: {
editable: false,
showIconsAndHighlightBorder: false,
fields: ['Name', 'c_StoryType', 'c_TargetRelease', 'PlanEstimate', 'c_PriorityBin', 'Parent', 'TestCases', 'TaskEstimateTotal', 'TaskRemainingTotal']
},
storeConfig: {
filters: [
{
property: 'c_StoryType',
value: 'SAGA Feature'
},
{
property: 'c_TargetRelease',
operator: '=',
value: this.down('rallyfieldvaluecombobox').getValue()
}
]
}
});
},
_onSelect: function() {
var board = this.down('rallycardboard');
board.refresh({
storeConfig: {
filters: [
{
property: 'c_StoryType',
value: 'SAGA Feature'
},
{
property: 'c_TargetRelease',
operator: '=',
value: this.down('rallyfieldvaluecombobox').getValue()
}
]
}
});
},
});
Here's a sample card I made that contains the test case count:
You can add a field by simply including an object with some rendering information in it instead of just a simple string in the fields array in the cardConfig:
cardConfig: {
fields: [
'Name', //simple string field to show
{
name: 'TCCount', //field name
hasValue: function() {return true;}, //always show this field
renderTpl: Ext.create('Rally.ui.renderer.template.LabeledFieldTemplate', {
fieldLabel: 'Test Case Count', //the field label
valueTemplate: Ext.create('Ext.XTemplate',
['{[this.getTestCaseCount(values)]}',
{getTestCaseCount: function(data) { return data.Summary.TestCases.Count;}}])
})
},
//additional string fields
'PlanEstimate', 'Parent', 'TestCases', 'TaskEstimateTotal', 'TaskRemainingTotal']
}
This ended up being less straightforward than I thought it might be, but at least it is doable. The key part is using the LabeledFieldTemplate, specifying a field label and a value template to actually render the content.
You'll also notice the little beaker status icon in the footer which is automatically rendered because TestCases was included in the fields list.
As for your second question there is no roll up field on story for the total number of test cases included on child stories.
I want to send post request in sencha touch and the arguments I want to post are dynamic i.e. I want to take the textField values as a parameters to post. Please help me
proxy: {
type: "ajax",
url:'http://anotherserver.com/query.php',
method:'post',
extraParams: {
val: "TextField1.Text" // **here I want to provide the value of the textField help me plz**
},
reader: {
type: "json",
rootProperty: "notes",
totalProperty: "total"
}
},
Look first for Sencha Touch model concept because your can tag along your model into your Form (Ext.FormPanel) and treat it as one.
var model = Ext.create('Ext.data.Model',{
fields: ['name', 'email', 'password'],
proxy: [] //your proxy settings here,
customFunctionWithAjax: function(){
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
//after filling up your form you can get all textfields value
//with .getValues() and set it to your model
model.setData(form.getValues);
//then you can do anything you want like SAVE, or update
model.save();
//or call your custom function with your customised ajax request
model.customFunctionWithAjax();
// you can also check if your data are correct before sending it using .validate();
model.validate();
Usually you want to wrap the text field inside a form (formpanel).
Then you can use
var form = Ext.Viewport.down('.formpanel'),
values = form.getValues(),
textfieldValue = values.textfield_name;
...
extraParams: {
val: textfieldValue
},
I'm trying to call 2 values from my store, and set it inside the styles in a div which I put it in a html: item. The store loads the data from a web API, which is working fine(I've tested using fiddler and the return response is correct) but I cant get the data in the store to work inside the html item.
Below is my view:
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
requires:['myapp.store.Style'],
items: [
{
id: 'firstpage',
title: 'Welcome',
store: 'styleStore',
styleHtmlContent: true,
scrollable: true,
items: [
{
html: ['<div id="testStr1" style="font-style:{FontStyle}; color:{Color};">',
'This is a test string.',
' Go to the settings to change the style',
'</div>'
].join("")
}
]
},
}
]
}
My Store:
Ext.define('myapp.store.Styles', {
extend: 'Ext.data.Store',
requires:[
'myapp.model.Style'
],
config: {
autoLoad: true,
model: 'myapp.model.Style',
storeId: 'styleStore',
clearOnPageLoad:false,
proxy:
{
type: 'ajax',
listeners: {
exception:{
fn: function(pxy, response, operation, options){console.log("We've got a problem...");}
}
},
url: 'http://localhost/styleapi/api/styles',
reader: {
type: 'json',
rootProperty: 'data',
}
}
}
});
My model:
Ext.define('myapp.model.Style', {
extend: 'Ext.data.Model',
fields:[
{
name: 'Id',
type: 'int'
},
{
name: 'FontStyle'
},
{
name: 'Color'
},
],
proxy: {
type: 'rest',
url: 'http://localhost/styleapi/api/styles'
}
});
A few issues here...
First, your main class, myapp.view.Main, is nesting items inside it, and those items are not configured correctly. Your items: ... should be inside of config, and there should be an xtype for each item, if you want the item to not be the default type of container. In your current code, you have an items: .. config on your first item, where you are putting html. This results in a nested component, which is not what you are intending here.
In addition, you are using html, when you really want to use a template. When you have a fixed set (or object) of data, you can use a component with tpl and data; when using a store for the data, you would use a dataview with an itemTpl config, which will repeat that template for each item in the store. Currently, your top-level item is defaulting to a container, where you are using a store config, which won't do anything at the moment.
So, steps to fix:
Move the top-level item into config property
Change the top-level item to be a dataview
Move the html out of the nested item and into an itemTpl property as an XTemplate (i.e. itemTpl: new Ext.XTemplate('<div ...'))
I've noticed a problem with ST2 and selectfield pickers. I'm testing this on Desktop browser and tablet and both seem to show the same problem.
The problem seems to stem from having form data that is empty or uninitialised.
My example is a user logs into their account and needs to set their marital status. As this has never been set before the backing store model is actually 'null' for their marital status. When they click the picker, the pick for some reason picks the first item in the checklist automatically. This is evident by the check-mark on the right side of the item. The 2nd side-effect of this is, if you then select the first item, ST2 doesn't see this as an item change and so doesn't then propagate the selection change back to the form.
Is this is a bug? How do I get round this problem?
Ext.define('Gender', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Id', type: 'int'},
{name: 'ItemName', type: 'string'}
]
}
});
Ext.define('Details', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Gender', type: 'int'}
]
}
});
var myGenderStore = Ext.create('Ext.data.Store', {
model: 'Gender',
data : [
{Id: 1, ItemName: 'Male'},
{Id: 2, ItemName: 'Female'}
]
});
var myDetailsStore = Ext.create('Ext.data.Store', {
model: 'Details',
data : [
{ Gender: null }
]
});
var p = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender'
}
]
}
]
});
p.setRecord(myDetailsStore.getAt(0))
Ext.Viewport.setActiveItem(p);
// notice the picker has 'Male' selected even though the backing store for the Gender field is null
// also, we want to select Male from the list, but this isn't reflected on the form
// run below command in console window after selecting 'Male' even though it is selected and it shows null
// It only seems to like changes to the value as selecting female works. If then select Male from Female this also works.
p.getValues().Gender;
you can set value for the select field
p.down('selectfield[name=Gender]').setValue(myGenderStore.getAt(0).get('Id'))
see example: http://www.senchafiddle.com/#OuCtQ#GQJ2C
thanks
Just set the autoSelect config property to false,to prevent default selection like this:
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender',
autoSelect:false
}